Help! Javascript not working in IE

Obleroza · 20-08-2009 11:09pm #1

I'm a newbie to web design so this may be a simple question.
The following code worked fine in Mozilla and safari but not in IE. I can't seem to work out why.
The javascript hides the divs then opens them when certain headings are clicked.
Re-clicking closes the divs again. This works fine except for IE. It will open the sections but won't close them.

//Onload Functions
    function setVar(location)    
        {
            document.getElementById('personal').style.display ="none";
            document.getElementById('education').style.display ="none";
            document.getElementById('skills').style.display ="none";
            document.getElementById('work').style.visibility ="hidden";
                var open=false;
        }
    //called functions to hide or show the text
    function openSesame(location)
        {
            document.getElementById('hidden').style.visibility="hidden";
            if (open==true) 
                {    
                document.getElementById(location).style.display ="none";
                open=false;
                }        
            else
                {    
                document.getElementById(location).style.display ="block";
                open=true;
                }
        }    
    //function to hide or show 'Work' div    
    function openWork()
        {
            if (open==true) 
                {
                document.getElementById('work').style.visibility ="visible";
                open=false;
                }
            else
                {
                document.getElementById('work').style.visibility ="hidden";
                open=true;
                }
        }

Any help would be greatly appreciated.

Liam Byrne · 20-08-2009 11:44pm

Hard to say without seeing the HTML, maybe there's an ID clash in IE or something ?

It also appears that there's a LOT of duplication there - why have "openSesame" and "openWork" separate - why doesn't openWork just call openSesame with the parameter "work" ?

Try using jQuery for this;

You could set a class on all tabs, hide all tabs, and then show the one that you wanted using 2 lines of code:

function showTab(whichTab) {
$(".tabClass").hide();
$("#"+whichTab).show();
}

jQuery will handle all of the cross-browser stuff.

Obleroza · 21-08-2009 9:52am

Liam Byrne wrote: »

It also appears that there's a LOT of duplication there - why have "openSesame" and "openWork" separate - why doesn't openWork just call openSesame with the parameter "work" ?

One simple reason. Aesthetically I want the last div to take up space when hidden but not the earlier ones. I originally had only the openSesame function but added the other one to make it look better when the divs were hidden.

But I agree even the openSesame function duplicates because I only know getElementById (remember I'm a newbie).

How do I add the Jquery to the HTML?

Liam Byrne · 21-08-2009 12:57pm

Obleroza wrote: »

How do I add the Jquery to the HTML?

Would have to see the HTML markup in order to tell you.

Obleroza · 21-08-2009 1:50pm

would the problem have to do with the flag variable 'open'? Should I have declared it outside of the first function so the others can access it?

mewso · 21-08-2009 3:04pm

Yeah open will be separate vars in each function. The problem though is that global variables are evil. If I want a global variable for a widget then I will normally assign it to the parent element on the page load is probably best.

document.getElementById("myparentdiv").open = false;

Javascript supports these dynamic properties. They are also supported in an excellent way in jQuery:-

$("#myparentdiv").data("open", false);

This value is now accessible from anywhere but in a non evil global way:-

if (document.getElementById("myparentdiv").open) {
//do something if open is true
}

if (("#myparentdiv").data("open")) {
//do something if open is true
}

Also beginner or not it's never too early to refactor your code. For starters remove location as a parameter from the first function since it's never used.

Obleroza · 21-08-2009 3:44pm

mewso wrote: »

Yeah open will be separate vars in each function. The problem though is that global variables are evil. If I want a global variable for a widget then I will normally assign it to the parent element on the page load is probably best.

document.getElementById("myparentdiv").open = false;

Javascript supports these dynamic properties. They are also supported in an excellent way in jQuery:-

$("#myparentdiv").data("open", false);

This value is now accessible from anywhere but in a non evil global way:-

if (document.getElementById("myparentdiv").open) {
//do something if open is true
}

if (("#myparentdiv").data("open")) {
//do something if open is true
}

Also beginner or not it's never too early to refactor your code. For starters remove location as a parameter from the first function since it's never used.

Great thanks for the help and advice!

Help! Javascript not working in IE

Comments