Category Archives: Javascript

Updated: Hover for non-anchor elements in IE6

The updated version of the previous version of Hover for non-anchor elements in IE 6.

Before proceeding further, here’s a brief description of the problem,

The ‘:hover’ pseudo-class works on all visual elements in IE 7+, FF, Safari, Chrome and Opera. But for obvious reasons IE 6 fails to recognize the ‘:hover’ pseudo-class for elements other than the anchor(<a></a>).

Here is the updated code, which is faster and is targeted only IE 6 by a combination of JavaScript conditional comments & feature detection.

    (function ($) {
        $(document).ready(function () {
            $.single=function(a){return function(b){a[0]=b;return a}}($([1]));
                if (!window.XMLHttpRequest) {
                    $('.hoverable').each(function () {
                        this.attachEvent('onmouseenter', function (evt) { $.single(evt.srcElement).addClass('hovered'); });
                        this.attachEvent('onmouseleave', function (evt) { $.single(evt.srcElement).removeClass('hovered'); });

All you’ve to do is to include this script in your html document and add the class ‘hoverable’ to all the non-anchor elements to which you want the hover action. And in your stylesheet add an extra selector for the element along with the ‘:hover’ style definition. Look at the code of the updated example to get a clear idea.

I’ve used James Padolsey’s single jQuery object snippet in the event handlers to prevent the creation of a new jQuery object every time the event handler is executed, hence saving a few execution cycles and memory.

Hover for non-anchor elements in IE6

Updated article on Hover for non-anchor elements in IE6

The :hover pseudo-class adds a special style to an element when you mouse over it.

The ‘:hover’ pseudo-class works fine in IE7, FF, Safari and Opera for all the elements. But for obvious reasons IE6 fails to recognize the ‘:hover’ pseudo-class for all elements other than the anchor(<a></a>).

The ‘:hover’ pseudo-class can be made to work in IE6 with the help of the jQuery method ‘hover()’.

Lets see how it is done.

Continue reading

safeMail : Anti-Spam Email with Unobtrusive Javascript

If you’ve included your email address in your site then you’d definitely get junk mail that clogs your inbox. The Spam Bots and Spam Crawlers crawl through the web pages constantly and add all the email address they encounter to their lists.

I wanted a perfect solution to keep the Spam Bots away from my email address. I came across several solutions based on Javascript. But none of them was generalized, almost all of them I encountered used Javascript to insert the email address and each address needed to be coded individually. You can find a similar solution from Joe Maller
Continue reading