By theHuston on

Hello all..

I have a javascript running called columns.js.. it basically takes my 3 columns and makes sure they are the same height..

buuutt.. whenever I use the dropdown anything with jQuery.. it creates more room in the column the main content is in... but then I have to manually refresh to get the columns.js to run again and push the columns to length.

Anybody know a way to refrsh or recall the columns.js if the jQuery runs?

Thanks...

-theHuston

⋅ Categories: Drupal 5.x

Comments

mm167’s picture

mm167 commented

why not use the jquery function "bind"?

http://docs.jquery.com/Events/bind#typedatafn

theHuston’s picture

theHuston commented

So I ended up finding the collapse.js file... and found the function in the column.js file which initiates onLoad.. and set the column function to take off when the collapse is complete.. up and down..

/**
 * Toggle the visibility of a fieldset using smooth animations
 */
Drupal.toggleFieldset = function(fieldset) {
  if ($(fieldset).is('.collapsed')) {
    var content = $('> div', fieldset).hide();
    $(fieldset).removeClass('collapsed');
    content.slideDown(300, {
      complete: function() {
        // Make sure we open to height auto
        $(this).css('height', 'auto');
        Drupal.collapseScrollIntoView(this.parentNode);
        this.parentNode.animating = false;
		//Chris Added for the Columns.js
		initTall();
      },
      step: function() {
         // Scroll the fieldset into view
        Drupal.collapseScrollIntoView(this.parentNode);
      }
    });
    if (typeof Drupal.textareaAttach != 'undefined') {
      // Initialize resizable textareas that are now revealed
      Drupal.textareaAttach(null, fieldset);
    }
  }
  else {
    var content = $('> div', fieldset).slideUp('medium', function() {
      $(this.parentNode).addClass('collapsed');
      this.parentNode.animating = false;
	  //Chris Added for the Columns.js
		initTall();
    });
  }
}

//Commented at ChrisAdded for the Column.js

Hope this can help someone.

dooug’s picture

dooug commented

Hey,

I recently took the similar path to equalize the columns on a website. I used the equalizeCols plugin: http://www.tomdeater.com/jquery/equalize_columns/

However I've noticed some problems. The first is that when a fieldset is opened then collapsed, the columns' heights don't shrink. So, as fieldsets are opened and collapsed the column heights just keep increasing. The second is when a resizable textarea is resized, the columns aren't being kept equal, so somewhere I need to call the equalizeCols function again.

I'm curious about your Columns.js, does it run into the same problems? Can you make that code available?

jruberto’s picture

jruberto commented

Thanks theHuston! This is exactly what I needed. It sometimes makes a weird "flash" when collapsing a fieldset, not sure what's up with that but I can live with it.

Note that this can be accomplished without hacking core by using the http://drupal.org/project/jsregistry module and sticking a collapse.js file with these changes in your /sites/mysite-or-all/misc directory and clearing cache.

Cheers.

jruberto’s picture

jruberto commented

humm... one other issue. Wondering if anyone can propose a solution.

When on a page that contains AJAX content that resizes itself at page load time, this does not work. Specifically having a problem with Ubercart /cart/checkout page, where the payment information is an AJAX pane that loads after the page finishes loading, and the columns do not resize themselves. Thoughts? Thanks!