Implement jQuery glow effect in Firefox

.glow is another unsupported / partially supported jquery method in different browsers. Chrome supports it & the website looks wonderful with this effect. IE however, doesn’t support & I had issues with Firefox. My code was like below


$('.yellow').on('mouseenter', function () {
$(this).glow({ radius: "20", color: "#D7CD3A" });
})
.on('mouseout', function () {
$(this).glow({ radius: "20", color: "#D7CD3A", disable: true });
});


$('.purple').on('mouseenter', function () {
$(this).glow({ radius: "20", color: "#a354bb" });
})
.on('mouseout', function () {
$(this).glow({ radius: "30", color: "#a354bb", disable: true });
});

$('.green').on('mouseenter', function () {
$(this).glow({ radius: "30", color: "#538b73" });
})
.on('mouseout', function () {
$(this).glow({ radius: "20", color: "#538b73", disable: true });
});

I basically have 2-5 products in each category. Every category products are in a specific color. For ex, yellow, green, blue and purple. I used JQuery Plugin (https://github.com/MisterDr/JQuery-Glow) to implement this glow effect for my different products in my website. This worked like a charm in Chrome. However, in Firefox there was an issue. The glow color was permanently set to the first product which I would hover. For ex, if I do, mouseenter event for a yellow product & then do mouseenter for a green product, the glow color for green product would be yellow.

Though, I was setting “disable: true” in mouseout event, it was not considered. I checked out several options and it did not work out. Thanks to Keshav Pandit, who took some time to look into Glow JQuery Plugin api code & he told me that the code refers to “id” and not “class” attribute value to identify an element. I was just wondering, if it is so, how it is working in Chrome & also in Firefox, glow in & out was also working. Just that the specified color was not used.

Anyway, I took his comment, added “id” attribute to all products and also changed the above code to reference to “id” rather than “class”. Viola!!! It worked. Though I have duplicate content now, the expected feature is there & I am happy..

If you look at plugin example, they have also used only “id” attribute. I didn’t think about trying it that way at all, until Keshav suggested me to check it. By this time, I was out-of-energy and couldn’t think. I just did what he said & again Thanks to him.. it worked.. Now the code looks like below

$('#yellow1').on('mouseenter',function(){
   $(this).glow({ radius:"20", color:"#D7CD3A"});}).on('mouseout',function(){//$(this).glow({ radius: "20", color: "#D7CD3A", disable: true });
   $(this).glow({ disable:true});});


Share This

Leave a Reply

Your email address will not be published. Required fields are marked *


four + 7 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>