Forum Moderators: open
I am using this javascript (that i got off an old post on this site) to try and hide and show divs.
What I would like to do is be able to click to show a div and hide other divs of my choosing.
the following script does this, however, it hides ALL other divs meaning that my layout that is made up of box elements disapears...
<code>
function showdiv(pass)
{
var divs = document.getElementsById();
for(i=0;i<divs.length;i++)
{
if(divs[i].id.match(pass))
{//if they are 'see' divs
if (document.getElementById) // DOM3 = IE5, NS6
divs[i].style.visibility="visible";// show/hide
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) // Netscape 4
document.divs[i].visibility = 'hidden';
else // IE 4
document.all.divs[i].visibility = 'hidden';
}
}
}
</code>
my markup is along the lines of:
<div id="one" visibility="hidden">
this is div one </div>
<div id="two" visibility="hidden">
this is div two
</div>
<div id="three" visibility:inheret>
this is div three
</div>
where i would like to be able to click "this is div one" to show div one and hide "this is div two" without hiding div three.
if anyone knows a way of showing one div and then hiding selected other divs it would be very much appreciated.
Marcus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Div Visibility Example 3/31/04</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
div#one{height:100px;width:200px;visibility:hidden;background:red;}
div#two{height:100px;width:200px;visibility:visible;background:blue;}
div#three{height:100px;width:200px;visibility:visible;background:green;}
-->
</style>
<script type="text/javascript">
<!--
function swapSee(div1,div2){
var seeUm=document.getElementById(div1);
var noSee=document.getElementById(div2);
seeUm.style.visibility="hidden";
noSee.style.visibility="visible";
}
//-->
</script>
</head>
<body>
<div id="one" onclick="swapSee('one','two');"></div>
<div id="two" onclick="swapSee('two','one');"></div>
<div id="three"></div>
</body>
</html>
but...
I think i was a little unclear in my original post.
what i would like to do is click a link which shows one div. if i click another link i want another div to show up in its place. if i go back and click the first link again i want that first div to show again.
the javascript i posted does this, however, it
so the markup would be something like this:
<body>
<a href="javascript:showdiv('one')"> show div one </a>
<a href="javascript:showdiv('two')"> show div two </a>
<div id="one" visibility="hidden">
this is div one </div>
<div id="two" visibility="hidden">
this is div two
</div>
<div id="three">
this is div three
</div>
</body>
where i would like to be able to click "this is div one" to show div one and hide "this is div two" without hiding div three.
thanks again for any answers,
marcus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Div Visibility Example #2 3/31/04</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
div#one{position:absolute;height:100px;width:200px;visibility:hidden;background:red;}
div#two{position:absolute;height:100px;width:200px;visibility:visible;background:blue;}
div#container{height:100px;width:200px;}
div#three{height:100px;width:200px;visibility:visible;background:green;}
-->
</style>
<script type="text/javascript">
<!--
function swapSee(div1,div2){
var seeUm=document.getElementById(div1);
var noSee=document.getElementById(div2);
seeUm.style.visibility="hidden";
noSee.style.visibility="visible";
}
//-->
</script>
</head>
<body>
<div>
<a href="javascript:swapSee('two','one');">hide two, show one</a>
<a href="javascript:swapSee('one','two');">hide one, show two</a>
</div>
<div id="container">
<div id="one"></div>
<div id="two"></div>
</div>
<div id="three"></div>
</body>
</html>
Thankyou very much.
Marcus
It works for two, but i get strange things happening when i try to adapt it to five divs...
i am basically trying to make something like an image gallery - click a link up pops a div, click another link up pos a different div, click a different div and so on.
Thankyou,
I am starting to get the feeling that actually learning javascript may be a good idea...
marcus
Try out the following for an automated show idea:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Slideshow w/Divs</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body{
height:100%;
width:100%;
background:#000;
}
div#main{
height:100%;
width:100%;
margin:auto;
padding:0;
}
div#placer{
position:absolute;
width:200px;
margin-left:50%;
height:200px;
background:blue;
text-align:left;
}
.ss{
position:absolute;
visibility:hidden;
margin-left:-100px;
}
.v{
visibility:visible;
}
-->
</style>
<script type="text/javascript">
<!--
var rep_ct=0;
var num_slds=0;
var sldArr=new Array();
var setReps;
function setSlides(sld_num){
num_slds=sld_num;
for (var i=0;i<sld_num;i++){
var d_no=i+1;
sldArr[i]="d" + d_no;
}
setReps=window.setInterval("showSlides()",2000);
}
function showSlides(){
if(rep_ct==num_slds){
rep_ct=0;
}
var sw1=document.getElementById(sldArr[rep_ct]);
if(rep_ct<num_slds-1){
var sw2=document.getElementById(sldArr[++rep_ct]);
}else{
sw2=document.getElementById(sldArr[0]);
++rep_ct;
}
sw1.style.visibility="hidden";
sw2.style.visibility="visible";
}
//-->
</script>
</head>
<body onload="setSlides(4);" onunload="window.clearInterval(setReps);">
<div id="main">
<div id="placer">
<div id="d1" class="ss v"><img src="yourImage1.jpg" alt="" /></div>
<div id="d2" class="ss"><img src="yourImage2.jpg" alt="" /></div>
<div id="d3" class="ss"><img src="yourImage3.jpg" alt="" /></div>
<div id="d4" class="ss"><img src="yourImage4.jpg" alt="" /></div>
</div>
</div>
</body>
</html>
Notice that you have to pass the number of slide divs to the function setSlides() in the onload handler value in the body tag. Also to use the code as is and expand the number of divs, you need to keep the id=d1, id=d2, ~etc. convention.
