Coding is fun. You set out with an idea, look around or dig in your memory for a way of executing it. A few minutes (or hours) later and you have a brand new object shining on the Web! Until that glorious glow is dimmed by a bug (no I’m not naming Internet Explorer, Internet Explorer never spoils my fun, what am I saying?). All that hard excitement and it’s not working.
For example, on my Web and Flash pages, I wanted a sleek mouse-over on my images to display more information about my work without taking away from the visual appeal of an image gallery. A few moments later, I had a simple hover effect in JQuery for it. Easy, simply toggle the visibility of my CSS class as follows:
First, to set my div to hidden: $("div.iFade").css("visibility", "hidden");.
Second, simply reveal it with a simple function:
$(".rollMe").hover(
function(){
$(this).find("div.iFade").fadeIn(500).css("visibility", "visible");
},
function(){
$(this).find("div.iFade").fadeOut(500).css("visibility", "hidden");
}
);}
Nothing to it. Now you see me – now you don’t, type of scenario with a fade thrown in for shows.
All happy, I test it in Firefox, as usual and it works like a charm. I then test it on IE8, fearing the worst but it works like charm also! Wonderful – I can’t believe it! And then I try IE9… and then Chrome… and finally Safari… and discover that the hidden visibility property is not working while using inline styles with those browsers. The only way to make it work was to use the property in my external style sheet, which, in this example, would not work.
This is XHTML, after all, and for a second, I forgot that even if I am not directly typing my style in my div tag, I am still committing the cardinal sin of adding mark-up to my XHTML instead of sending it to it’s happy style-sheet. Bad Jquery!
As a result, instead of switching visibility on and off, I can achieve the same effect, without the browser freaking out, by switching the classes instead.
$(".rollMe").hover(
function(){
$(this).find("div.iFade").fadeIn(500).removeClass("iFade").addClass("IShow");
},
function(){
$(this).find("div.IShow").fadeOut(500).removeClass("IShow").addClass("iFade");
}
);
In my CSS, iFade is set to hidden, IShow is set to visible et voila!
This is a little longer, requires a second class in CSS to avoid inline style but it is well worth it! And next time, I will remember that JQuery does not justify to forget how to code in XHTML!
Further reading:
