Video Not Displaying in Firefox
Our Family's Journey Through CRPS

jQuery Selector Order

I ran into an issue today with some jQuery code that worked in Chrome and IE but not in FF.

$(container).find('div.content-block').not('div.auto-height').height(height);

We use content blocks on our site and we have a jQuery function that sets the height of those blocks so they are all the same. We want to the blocks to basically be sized according to their content and don't want to lock our authors into a fixed height block. However, we can't have staggered blocks that are all a few pixels different. Our function finds the tallest block in a parent element and sets all the blocks to that height.

Of course, this is great 90% of the time, but sometimes you need to prevent the height from being set on a block. In the specific case I'm dealing with now, each block takes up a full row and has a more link to expand the content. For these cases we have a class "auto-height". In the above jQuery any blocks with that class should not have their height set. This did not work in FF.

With some troubleshooting I discovered that the order of the selectors matter. Placing not() before find() corrected the issue in FF.

$(container).not('div.auto-height').find('div.content-block').height(height);

Comments

The comments to this entry are closed.