Jump to content

Internet Explorer compatibility


Coh3n
 Share

Recommended Posts

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 by Coh3n
Link to comment
Share on other sites

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);}

Link to comment
Share on other sites

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 by Coh3n
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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 () {}  }}

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...