...

View Full Version : Works in all browsers except IE



Chrys
10-08-2011, 04:21 PM
Any ideas on how I can make this work in IE as well?? It is a code that shows a divide on click and then hides the rest at the same time.

live code is also at chryscreations.com/ns/boynames.html

Javascript:


function showstuff(divID)
{
els=document.getElementsByName('mydiv')
for (var i = 0; i < els.length; i++)
{
els[i].style.visibility="hidden";
els[i].style.display="none";
}
document.getElementById(divID).style.visibility="visible";
document.getElementById(divID).style.display="block";
}


HTML


<head>
<script>
window.onload=function()
{
showstuff('');
}
</script>
</head>

<body>
<a href="javascript:showstuff('adivide')">A</a>
<a href="javascript:showstuff('bdivide')">B</a>

<div name="mydiv" id="adivide"></div>
<div name="mydiv" id="bdivide"></div>

<body>

Logic Ali
10-08-2011, 04:42 PM
showstuff('');Why are you passing null to document.getElementById when that will obviously generate an error?

Chrys
10-08-2011, 04:43 PM
I didn't know that would generate an error... I am trying to hide all divides on page load... should i write a different script for the head to do that?

I tried creating an empty divide and having that be the one that shows on load but it still doesnt work...

window.onload=function()
{
showstuff('emptydivide');
}

<div name="mydiv" id="emptydivide"></div>

Logic Ali
10-08-2011, 05:08 PM
name attributes are deprecated except for form elements, so you can't use getElementsByName.

Note the differences:
<html>
<head>
<script>
function showstuff(divID)
{
els = document.getElementById( 'myDiv' ).getElementsByTagName( 'div' );

for (var i = 0; i < els.length; i++)
{
els[i].style.visibility="hidden";
els[i].style.display="none";
}

if( divID )
{
document.getElementById(divID).style.visibility="visible";
document.getElementById(divID).style.display="block";
}

if( window.event )
window.event.returnValue = false;

return false;

}

window.onload=function()
{
showstuff('');
}
</script>
</head>

<body>
<a href="#" onclick = "return showstuff('adivide')">A</a>
<a href="#" onclick = "return showstuff('bdivide')">B</a>

<div id='myDiv'>
<div id="adivide">I am div A</div>
<div id="bdivide">I am div B</div>
</div>

</body>
</html>

Chrys
10-08-2011, 09:46 PM
That doesn't seem to be working in any browser...

xelawho
10-08-2011, 09:55 PM
why not just use css to hide the divs on page load like I posted in the other thread:



<!DOCTYPE html>
<html>
<head>
<title>blank</title>
<meta charset="UTF-8">
</head>

<body>
<style>
.hide{
display:none;
}
</style>

<div class="hide" id="adivide">A</div>
<div class="hide" id="bdivide">B</div>
<div class="hide" id="cdivide">C</div>
<div class="hide" id="ddivide">D</div>

<script type="text/javascript">
var shownDiv;
function showstuff(divID){
if (shownDiv){
document.getElementById(shownDiv).style.visibility="hidden";
document.getElementById(shownDiv).style.display="none";
}
document.getElementById(divID).style.visibility="visible";
document.getElementById(divID).style.display="block";
window.location.hash="names";
shownDiv=divID;
}

</script>
<a href="javascript:showstuff('adivide')">A</a>
<a href="javascript:showstuff('bdivide')">B</a>
<a href="javascript:showstuff('cdivide')">C</a>
<a href="javascript:showstuff('ddivide')">D</a>
</body>
</html>

Chrys
10-08-2011, 09:57 PM
Sorry... I missed where you put all the divides into another div! :-) now it works great! :) Thank you so much!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum