Previous month:
May 2015
Next month:
August 2015

July 2015

jQuery Selector Order

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


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.


Video Not Displaying in Firefox

I spent hours today trying to debug a problem in Firefox. I'm working on slideshow of videos using a combination of the Slideshow Manager plugin for MODx which uses Nivo slider. Once you click a graphical play button, a Brightcove Smart Player loads and plays over the slide. For some reason this was working in all browsers except Firefox, which is odd, because generally when you run into one browser that's not rendering CSS and jQuery the way you'd expect, Internet Explorer is the culprit. In this case, all other browsers tested, Chrome, IE, Dolphin, worked, but in Firefox the video was located in the DOM correctly and you could hear it play, but the video and player were not at all visible.

Working with video elements in combination with a slideshow is tricky, though. I suspected I had some issue with opacity, visibility, or z-index. I spent an hour manipulating the CSS of the video and its parent elements to no avail. I started changing the jQuery that was removing and adding the video into the correct place in the DOM when the play button was pushed. But none of this was the culprit.

The problem I discovered, as I dug deeper into the CSS and started removing all styling elements related to the video and it's parent elements until I could get it to display in the offending browser, was the hack I'd used to vertically align the player in the header of the page. 

.element { position: relative; top: 50%; transform: translateY(-50%); }

This is a rather common hack you'll see used on the web, so use with caution. Specificcally, it was the transform property that caused the video not to display in Firefox. I also attempted replacing the transform property with browser specific properties but that did not correct the display issue in Firefox.

-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);

And yes, the parent element the video was positioned in did have a height property set. 

I've done some searches on the web and have not found anyone else documenting a similar issue. I'm not sure if this is specific to the transform being done on a video element or if it's more specific to my video slideshow implementation.