JQuery Flicker in Firefox

February 9th, 2009
20 comments JQuery posted by Pete

Wow. Ok, here’s an interesting one.

So, I’m building a slider for a client where you have a container DIV with a number of child DIV’s inside of it to display individual pieces of content per slide. The premise of this is the same as a number of sliders that are out there built in JQuery. Upon a click, the DIV just moves to the left or right to display different parts.

The way you normally hide everything that’s not appearing in the window is by using:

div { overflow: hidden; }

Easy enough. Or so I thought. The problem here is very specific. It actually only occurs on PC versions of Firefox, and even then, only when the content is sliding behind other content on the page. For example, if my slider is floating to the right, and I have some different content floating to the left, as the slider is sliding, the content on the left will start flickering uncontrollably in Firefox on the PC.

This boggled my mind. Especially as it didn’t occur in any other browser out there, even IE6. The solutions going to kill you… well maybe… it killed me.

The Fix:
Simply specify the plane of the overflow.  So, if your slider is going horizontally use:

div { overflow-x: hidden; }

And if your slider is going vertically use:

div { overflow-y: hidden; }

Yeah… That’s it.  Literally about 2 hours of head scratching and teeth gnashing and nearly window punching boiled down to the addition of 2 lousy characters.

Well, live and learn right?  Hopefully if you’ve found this post and have the same problem you can save yourself some tape dispenser hurling.

jQuery: $ is not a function

December 30th, 2008
28 comments JQuery, WordPress posted by Pete

Recently I ran into an issue  while trying to use jQuery on a custom WordPress based Content Management System.  This particular system had a number of instances in which the framework was being referenced.  Normally you insert jQuery code using the dollar sign ($) like so:

$(document).ready(function() {
   $("a").click(function() {
     alert("Hello world!");
   });
 });

The problem arises when a different system grabs the $ variable.  All of the sudden you have multiple $ variables being used as objects from multiple libraries, resulting in the error console message “$ is not a function”.

Fortunately there is a pretty easy way of fixing this in the form of jQuery.noConflict.  Running this function gives control of the $ variable back to whichever library first implemented it.  This will help to ensure that jQuery won’t conflict with other instances of the $ object in other libraries.

But please note, in doing this, you are re-assigning the variable so you will only be able to access jQuery commands using the ‘jQuery’ variable (which has just replaced ‘$’).  So our above code example would look something like this:

jQuery.noConflict();
jQuery(document).ready(function() {
   jQuery("a").click(function() {
     alert("Hello world!");
   });
 });

It doesn’t seem to be a very common problem and only occurs when multiple instances of the object crop up, but that’s easy to do in WordPress when multiple plugins begin conflicting with each other.   Follow the link for the  full jQuery documentation on jQuery.noConflict