By charos on

Hi,

I want to add a css class to equal heights jquery plugin. I am a complete newbie to css regarding functions so I need some help to add a class. I wanted to use equal heights module but it doesn't allow spaces in the css class.
I want to add ".rounded-shadow equalheight1 pane-rounded-shadow-test" in this plugin :

* Copyright (c) 2008 Rob Glazebrook (cssnewbie.com) 
 *
 * Usage: $(object).equalHeights([minHeight], [maxHeight]);
 * 
 * Example 1: $(".cols").equalHeights(); Sets all columns to the same height.
 * Example 2: $(".cols").equalHeights(400); Sets all cols to at least 400px tall.
 * Example 3: $(".cols").equalHeights(100,300); Cols are at least 100 but no more
 * than 300 pixels tall. Elements with too much content will gain a scrollbar.
 * 
 */

(function($) {
	$.fn.equalHeights = function(minHeight, maxHeight) {
		tallest = (minHeight) ? minHeight : 0;
		this.each(function() {
			if($(this).height() > tallest) {
				tallest = $(this).height();
			}
		});
		if((maxHeight) && tallest > maxHeight) tallest = maxHeight;
		return this.each(function() {
			$(this).height(tallest).css("overflow","auto");
		});
	}
})(jQuery);

Any help is appreciated!

⋅ Categories: Drupal 6.x

Comments

nevets’s picture

nevets commented

CSS class names can not have spaces, html elements can have more than one class so if you are looking at something like

<div class="rounded-shadow equalheight1 pane-rounded-shadow-test">

you are looking at an HTML element with three classes, "rounded-shadow", "equalheight1", and "pane-rounded-shadow-test". I would guess you want to use ".equalheight1"

charos’s picture

charos commented

Can you add the ".equalheight1" in the above jquery code? I think I tried it but it didn't do the trick. But then again, I am not sure about the syntax .

charos’s picture

charos commented

changed the title of the post to reflect the concept (combining class and type selectors)

nevets’s picture

nevets commented

Beside the css class you need to include the script and your own js code something like

$(document).ready(
  function() {
    $('.equalheight1').equalHeights();
  }
);
Jonathan Peterson’s picture

Jonathan Peterson commented

It's unclear from your question whether you want elements that have any of those classes to be of equal height, or only those elements that have all of those classes to be of equal height.

Use jQuery's multiple selector (http://api.jquery.com/multiple-selector/) if you want it to apply to any of them. For example, this makes any divs that are class foo OR bar OR baz the same height:

$(".foo, .bar, .baz").equalHeights();

If you mean you want only those elements that have class foo AND bar AND baz, just concatenate like this:

$(".foo.bar.baz").equalHeights();

Hope this helps.

Ideograph LLC
http://www.ideograph.com

charos’s picture

charos commented

I am trying to apply the equal height to some Panels pane. So I added a css class (equalheight1) to those panes I need to be equal. The problem is that with Stylizer(Panels feature to add css for colors and text) this css class in not a simple class. Here are the differences:
without stylizer
with stylizer