Thread: What Does THis JavaScript Do? Can I Chuck it Out of My Theme?

I am in the process of cleaning up my theme and my code-handicap has brought me here to ask this {stupid|simple|basic|n00b} question.

I am using the theme: Infrared | web2feel.com

which has a javascript code in the header. I want to know what is the purpose of this code and what would happen if I remove it.

Code:

<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
    if (!document.getElementsByTagName) return false;
    var sfEls1 = document.getElementById("catmenu").getElementsByTagName("li");
    for (var i=0; i<sfEls1.length; i++) {
        sfEls1[i].onmouseover=function() {
            this.className+=" sfhover1";
        }
        sfEls1[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover1\\b"), "");
        }
    }
        var sfEls1 = document.getElementById("menu").getElementsByTagName("li");
    for (var i=0; i<sfEls1.length; i++) {
        sfEls1[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls1[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>

I want to know what is the purpose of this code

Looks like it's the .js effects for the top menu navigation, sf = suckerfish menu - Sons of Suckerfish | HTML Dog - Son of Suckerfish Dropdowns | HTML Dog

The (sfHover) function sparks up once the page has loaded and loops through the elements in question and adds a class name when a particular event handler is invoked (in this case onmouseover) and removes that class name when another event handler is invoked (in this case onmouseout). With a little bit of adjustment to the CSS, this can essentially be used to mirror the behaviour of a pseudo-class (such as :hover).

and what would happen if I remove it.

Probably no more hover effects on the drop down menus for some awesome browsers. ( eg: IE 6 )

ah...then I guess it has to stay... can I move it to the footer of the theme?? to make the site load fast??

You could try that... Or how about leaving it in the header, but wrapping it inside a conditional CSS comment to make sure it only loads for the people with IE 6 browsers and below.

More info on conditionals:
CSS - Conditional comments
Conditional comments of IE

Code:

<!--[if lte IE 6]>
// code goes here

<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
    if (!document.getElementsByTagName) return false;
    var sfEls1 = document.getElementById("catmenu").getElementsByTagName("li");
    for (var i=0; i<sfEls1.length; i++) {
        sfEls1[i].onmouseover=function() {
            this.className+=" sfhover1";
        }
        sfEls1[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover1\\b"), "");
        }
    }
        var sfEls1 = document.getElementById("menu").getElementsByTagName("li");
    for (var i=0; i<sfEls1.length; i++) {
        sfEls1[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls1[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>

<![endif]-->