PDA

View Full Version : Toggle a layer while toggling another simultaneously



monaya
02-06-2010, 09:07 AM
If I set a div to display:none, I have this script to show a layer.

function toggleLayer( whichLayer )
{
var elem, vis;
if( document.getElementById ) // this is the way the standards work
elem = document.getElementById( whichLayer );
else if( document.all ) // this is the way old msie versions work
elem = document.all[whichLayer];
else if( document.layers ) // this is the way nn4 works
elem = document.layers[whichLayer];
vis = elem.style;
// if the style.display value is blank we try to figure it out here
if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
vis.display = (vis.display==''||vis.display=='block')?'none':'block';
}
</script>

<a href="javascript:showHide();" onClick="toggleLayer('sendlg');return false;">do this</a>


How could I adjust it to show one layer but hide another layer

vwphillips
02-06-2010, 09:54 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.div {
display:none;width:100px;height:100px;background-Color:#8B8B8B
}

/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/
function toggleLayer(id){
var obj=document.getElementById(id);
if (this.obj&&this.obj!=obj){
this.obj.style.display='none';
}
obj.style.display=obj.style.display!='block'?'block':'none';
this.obj=obj;
}

/*]]>*/
</script>
</head>

<body>
<a href="#" onClick="toggleLayer('d0');return false;">d0</a>
<a href="#" onClick="toggleLayer('d1');return false;">d1</a>
<div id="d0" class="div" >Div 0</div>
<div id="d1" class="div" >Div 1</div>
</body>

</html>

monaya
02-06-2010, 10:57 AM
Thanks I think I miscommunicated.

What I was trying to do was show one layer and hide another with the same link.

I think the code now hides both layers by default.

vwphillips
02-06-2010, 12:15 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#d0 {
display:block;width:100px;height:100px;background-Color:#8B8B8B
}

#d1 {
display:none;width:100px;height:100px;background-Color:#8B8B8B
}
/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/
function toggleLayer(id1,id2){
var obj=document.getElementById(id1);
obj.style.display=obj.style.display=='none'?'block':'none';
document.getElementById(id2).style.display=obj.style.display=='block'?'none':'block';
}

/*]]>*/
</script>
</head>

<body>
<a href="#" onclick="toggleLayer('d0','d1');return false;">d0</a>
<div id="d0" >Div 0</div>
<div id="d1" >Div 1</div>
</body>

</html>

monaya
02-06-2010, 03:47 PM
That works great! I was trying to modify it so that the link changes when the layers are switched


<script type="text/javascript">
/*<![CDATA[*/
function toggleLayer(id1,id2){
var obj=document.getElementById(id1);
obj.style.display=obj.style.display=='none'?'block':'none';
document.getElementById('loginmsg').innerHTML = 'register';
document.getElementById(id2).style.display=obj.style.display=='block'?'none':'block';
document.getElementById('loginmsg').innerHTML = 'login';
}
/*]]>*/
</script>

It worked good with only the first code block I added. So when you click login it would switch to register, but then when you click register again it doesn't go back to login

vwphillips
02-06-2010, 04:35 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#d0 {
display:block;width:100px;height:100px;background-Color:#8B8B8B
}

#d1 {
display:none;width:100px;height:100px;background-Color:#8B8B8B
}
/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/
function toggleLayer(obj,id1,id2){
var div=document.getElementById(id1);
div.style.display=div.style.display=='none'?'block':'none';
document.getElementById(id2).style.display=div.style.display=='block'?'none':'block';
obj.innerHTML=div.style.display=='none'?'d1':'d0';
}

/*]]>*/
</script>
</head>

<body>
<a href="#" onclick="toggleLayer(this,'d0','d1');return false;">d0</a>
<div id="d0" >Div 0</div>
<div id="d1" >Div 1</div>
</body>

</html>

monaya
02-06-2010, 08:58 PM
Right now, d0 shows by default, but d1 won't show when the link is clicked but when clicked again d0 shows again.

Is it me, or does it work on your end.

vwphillips
02-07-2010, 08:29 AM
works for me IE7 and FF

monaya
02-07-2010, 03:15 PM
I see what I mean now.

I was trying to make the hyperlink say to show the hidden layer not the one that's already showing.

i.e. link d1 should show when layer d1 is hidden and vice versa, link d0 should show when layer d0 is hidden.

hope that makes sense

vwphillips
02-08-2010, 09:23 AM
obj.innerHTML=div.style.display=='none'?'d0':'d1';