Internet Explorer compatibility

[Coh3n]

Hey there, So I just recently found out that my website doesn't work properly in IE. My website is www.coh3n.com if you would like to take a look. From what I can tell, there's something wrong in my JS/jQuery code; more specifically, my onClickNavTab() method. I was hoping someone here may be able to help me. Here's the code:

/*** Called when a navigation tab is clicked.  Sets the current active tab to inactive* and sets "newActiveTab" to the active tab (i.e. highlights the new tab).** @author Cohen Adair* @param numOfTabs: how many navigation tabs there are.* @param obj: the object (i.e. tab) being clicked.*/function onClickNavTab(numOfTabs, obj){// loop through each tab, finding which one is active, then disabling it and breaking out of the loopfor (var i = 1; i <= numOfTabs; i++){  var navTab = document.getElementById("navTab_"+i);  console.debug("loop #"+i);   // if the active tab is found, set it inactive (or no class name at all)  if (navTab.getAttribute("class") == "active")  {   console.debug("found active navigation tab");   navTab.setAttribute("class", "");     break;  }} obj.setAttribute("class", "active"); // set the tab that was clicked to active, so it becomes highlighted // hide all the text before displaying the section that was clicked$("#body_about_me").hide();$("#body_projects").hide();$("#body_blogs").hide();$("#body_articles").hide();$("#body_portfolio").hide(); // change the title of the page depending on which tab is clickeddocument.title = obj.getAttribute("title"); // store the initial height so it can be reset before animationvar initialHeight = $("#body_main").height(); // set the body's height to auto so we can get the height to animate to$("#body_main").css("height", "auto"); var bodyAnimateTime = 1500; // display the sections text depending on which tab is clickedswitch(obj.getAttribute("id")){case "navTab_1":  $("#body_about_me").show(bodyAnimateTime);  break;case "navTab_2":  $("#body_projects").show(bodyAnimateTime);  break;case "navTab_3":  $("#body_portfolio").show(bodyAnimateTime);  break;case "navTab_4":  $("#body_blogs").show(bodyAnimateTime);  break;case "navTab_5":  $("#body_articles").show(bodyAnimateTime);  break;default:  alert("Tab isn't inluded in switch statement.");  tab = "";} // show the tab's content and get the final height of the bodyvar finalHeight = $("#body_main").height(); console.debug("finalHeight = "+finalHeight); // reset body's height so it stats the animation from what the user sees$("#body_main").height(initialHeight); // make sure the web page takes up the entire window (no blank area at the bottom)var minHeight = window.innerHeight - $("#footer").height() - $("#header").height() - 10;if (finalHeight <= minHeight)  finalHeight = minHeight; // reset body and footer locations so they can animate down to reveal content$("#body_main").animate({height: finalHeight}, bodyAnimateTime);$("#footer").animate({marginTop: finalHeight + 10}, bodyAnimateTime); createCookie("previousTab", obj.getAttribute("id"), 0);}

Thanks in advance,Coh3n

Edited November 27, 2012 by Coh3n

[justsomeguy]

Use the classname property to get or set the CSS class: http://www.w3schools.com/jsref/prop_html_classname.asp

[Coh3n]

I tried that, but it didn't seem to work. Maybe I missed something? Nothing in that method works in IE, not even the changing for the page's title. Everything works just fine in FF and Chrome, though. Here's the updated code. I really only changed a few lines to use .className and .title instead of get/setAttribute. I'm assuming that's what you meant?

/** * Called when a navigation tab is clicked.  Sets the current active tab to inactive * and sets "newActiveTab" to the active tab (i.e. highlights the new tab). * * @author Cohen Adair * @param numOfTabs: how many navigation tabs there are. * @param obj: the object (i.e. tab) being clicked. */function onClickNavTab(numOfTabs, obj){        // loop through each tab, finding which one is active, then disabling it and breaking out of the loop    for (var i = 1; i <= numOfTabs; i++)    {        var navTab = document.getElementById("navTab_"+i);        console.debug("loop #"+i);                // if the active tab is found, set it inactive (or no class name at all)        if (navTab.className == "active")        {            console.debug("found active navigation tab");            navTab.className = "";                        break;        }    }                obj.className = "active";    //obj.setAttribute("class", "active"); // set the tab that was clicked to active, so it becomes highlighted        // hide all the text before displaying the section that was clicked        $("#body_about_me").hide();    $("#body_projects").hide();    $("#body_blogs").hide();    $("#body_articles").hide();    $("#body_portfolio").hide();        // change the title of the page depending on which tab is clicked    document.title = obj.title;        // store the initial height so it can be reset before animation    var initialHeight = $("#body_main").height();        // set the body's height to auto so we can get the height to animate to    $("#body_main").css("height", "auto");        var bodyAnimateTime = 1500;        // display the sections text depending on which tab is clicked        switch(obj.getAttribute("id"))    {    case "navTab_1":        $("#body_about_me").show(bodyAnimateTime);        break;    case "navTab_2":        $("#body_projects").show(bodyAnimateTime);        break;    case "navTab_3":        $("#body_portfolio").show(bodyAnimateTime);        break;    case "navTab_4":        $("#body_blogs").show(bodyAnimateTime);        break;    case "navTab_5":        $("#body_articles").show(bodyAnimateTime);        break;    default:        alert("Tab isn't inluded in switch statement.");        tab = "";    }                // show the tab's content and get the final height of the body    var finalHeight = $("#body_main").height();    console.debug("finalHeight = "+finalHeight);        // reset body's height so it stats the animation from what the user sees    $("#body_main").height(initialHeight);        // make sure the web page takes up the entire window (no blank area at the bottom)    var minHeight = window.innerHeight - $("#footer").height() - $("#header").height() - 10;    if (finalHeight <= minHeight)        finalHeight = minHeight;        // reset body and footer locations so they can animate down to reveal content    $("#body_main").animate({height: finalHeight}, bodyAnimateTime);    $("#footer").animate({marginTop: finalHeight + 10}, bodyAnimateTime);        createCookie("previousTab", obj.getAttribute("id"), 0);}

[justsomeguy]

What happens when you run it in IE? Do you get Javascript error messages? Do the debug statements show up in the console?

[Coh3n]

Everything on the page loads, but the body is empty, and clicking the navigation tabs doesn't work. Also, this sounds bad, but what console? E: Oh, I found it. It says that "'console' is undefined."

Edited November 27, 2012 by Coh3n

[justsomeguy]

You're using console.debug statements there, that sends a message to the developer console. In IE you open the developer tools with F12.

[Coh3n]

I got it to work by commenting out all the console.debug calls; however, I don't particularly like this. Is there a way to call the debug methods so it works in all browsers?

[justsomeguy]

If a browser doesn't support the console then you can't do anything about that. One way I use is to detect if it doesn't support the console and just use empty functions for those, which aren't going to do anything. There's not really a reason to have debugging output in your live code though. You can add support for various console methods by defining them as empty functions:

if ((typeof console) == "undefined" || (typeof console.log) == "undefined"){  console = {    log: function () {}, // do nothing if undefined    debug: function () {}  }}

[Coh3n]

Oh that's neat. Thanks very much.