Forum Moderators: open
The problem is that I can't get the very next code work in IE. It works fine with Firefox and Opera.
<script language="JavaScript" type="text/javascript">
<!--
function showdiv( pass ) {
var divs = document.getElementsByName( 'leaf' ) ;
for( i=0; i<divs.length; i++ ) {
if( divs[i].id.match( pass ) ) {
if( document.getElementById ) // DOM3 = IE5, NS6
divs[i].style.visibility="visible" ;
else if( document.layers ) // Netscape 4
document.layers[divs[i]].display = 'visible' ;
else // IE 4
document.all.divs[i].visibility = 'visible' ;
} else {
if( document.getElementById )
divs[i].style.visibility="hidden" ;
else if( document.layers )
document.divs[i].visibility = 'hidden' ;
else
document.all.divs[i].visibility = 'hidden' ;
}
}
}
//-->
</script>
<div>
<a href="javascript:showdiv('A')">Show div A and hide the rest</a>
<a href="javascript:showdiv('B')">Show div B and hide the rest</a>
<a href="javascript:showdiv('C')">Show div C and hide the rest</a>
</div>
<div id="A" name="leaf" style="position:absolute;">
content in div A
</div>
<div id="B" name="leaf" style="position:absolute; visibility: hidden">
content in div B
</div>
<div id="C" name="leaf" style="position:absolute; visibility: hidden">
content in div C
</div>
and a warm welcome to these forums. ;)
The script that you are using looks a little out of date and also it will not degrade gracefully.
This means that those who have javascript disabled - ( some 6-10% of users ) - will be
presented with a few meaningless links and only the one div visible. :(
Here is an another example for you try...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript"><title>show and hide divs</title>
<style type="text/css">
.hs {
color:#000;
margin:0 10px;
}
.show {
line-height:25px;
text-align:center;
border:1px dotted #ccc;
margin-top:10px;
}
.hide {
display:none;
}
#d0,#d2,#d4 {
border-color:#900;
}
#d1,#d3 {
border-color:#090;
}
</style><script type="text/javascript">
var c;
var k=0;
var j=0;
var ary=[];
var divs=document.getElementsByTagName('div');
var lnks=document.getElementsByTagName('a');
var splt;/**************************************************
function init is provided for those who have javascript disabled
and would, otherwise, not be able to view any of the divs at all.
They would also I presume not need the links that control the divs
so that will not show up.***************************************************/
function init() {
for(c=0;c<divs.length;c++) {
if(divs[c].className=='show') {
divs[c].className='hide';
divs[c].id='d'+k++;
}
}
for(c=0;c<lnks.length;c++) {
if(lnks[c].className=='hide') {
ary[c]=true;
lnks[c].className='hs';
lnks[c].id='a'+j++;
lnks[c].onclick=function() {
splt=this.id.split('a')[1];
if(ary[splt]==true) {
this.firstChild.nodeValue='hide '+(parseFloat(splt)+1);
ary[splt]=false;
showDiv(splt);
return false;
}
else {
this.firstChild.nodeValue='show '+(parseFloat(splt)+1);
ary[splt]=true;document.getElementById('d'+splt).className='hide';
return false;
}
}
}
}
}function showDiv(num) {
for(c=0;c<j;c++){
document.getElementById('a'+c).firstChild.nodeValue='show '+(c+1);
document.getElementById('a'+num).firstChild.nodeValue='hide '+(parseFloat(num)+1);
ary[c]=true;
ary[num]=false;
}
for(c=0;c<divs.length;c++) {
if(divs[c].className=='show') {
divs[c].className='hide';
}
}
document.getElementById('d'+num).className='show';
}if(window.addEventListener){
window.addEventListener('load',init,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',init);
}
}</script>
</head>
<body><div>
<a class="hide" href="#">show 1</a>
<a class="hide" href="#">show 2</a>
<a class="hide" href="#">show 3</a>
<a class="hide" href="#">show 4</a>
<a class="hide" href="#">show 5</a>
</div><div class="show">This is div one</div>
<div class="show">This is div two</div>
<div class="show">This is div three</div>
<div class="show">This is div four</div>
<div class="show">This is div five</div></body>
</html>
You solved my problem...
I had to make some minor changes to get it work right in my solution but now it works!
No problem, you're very welcome. ;)
I use to hide elements most times
element.style.top = -9000;
are you certain that you have replied to the right thread? ;)
birdbrain
I'm trying to use the show/hide capability to hide a div element for a specific period of time, and then reveal it.
I've tried all sorts of things from different places and nothing is working. Specifically, here is the one that I am attempting currently:
<script type='text/javascript'>
function MM_showHideLayers(element, time, action)
{
setTimeout("changeVisibility('" + element + "','" + action + "')", time)
}
function changeVisibility(element, action)
{
document.getElementById(element).style.visibility=action;
}
</script>
<div id="buy"><a href="#" target="_New"><img src="http://www.example.com/images/paul-sig.jpg" onload="MM_showHideLayers('buy', 5000, 'visible')"></a></div>
If anyone can help me with this, I would greatly appreciate it.
[edited by: eelixduppy at 5:54 pm (utc) on Feb. 5, 2009]
[edit reason] exemplified [/edit]
