Help! Javascript not working in IE

Obleroza

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

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

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

Obleroza wrote: »

How do I add the Jquery to the HTML?

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

Obleroza

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

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

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!