DIV made visible onclick

Forum Moderators: open

Message Too Old, No Replies

DIV made visible onclick

I have a script that does the exact opposite

CIAimages

2:48 pm on Feb 21, 2004 (gmt 0)

I need a scritp that does the exact opposite

I call my script w/ onClick="hideshowHelp(document.getElementById('help1'),'help'); return false"

and my div is

<div align="right" id="help1" style="visibility: visible;">
some stuff here
</div>

My problem is that it woks great BUT when the page is loaded the div is visible and it is hidded on click well I want the opposit to be when the page load no div on click here it is.

any idea what to do?

birdbrain

3:31 pm on Feb 21, 2004 (gmt 0)

Hi there : CIAimages,

Here is the revised script...

<script type="text/javascript">
var HelpStatus = 0;
function hideshowHelp(which,act)
{
if (which.style.display == "none")
{
which.style.display = "block";
if(act == 'help')
{
HelpStatus = 1;
}
}
else
{
which.style.display = "none";
if(act == 'help')
{
HelpStatus = 0;
}
}
}
</script>

and here the revised div...

<div align="right" id="help1" style="display:none;">

I have tested this in I.E. 6.0, firefox 0.8 and Opera 7.0.

birdbrain

CIAimages

6:16 am on Feb 22, 2004 (gmt 0)

You are the man...

Thanks

CIAimages

4:57 pm on Feb 22, 2004 (gmt 0)

Got another question related to this script I 'm trying now to include more then one DIV in the same page and it work but it put the div one under the other
I was woundering if it is possible to make that when I have one div Open and I try to open another one it close the firstone and open the second.

Hope it make sence...

I have 4 or 5 div like this on each page I am building..

Thanks

birdbrain

5:18 pm on Feb 22, 2004 (gmt 0)

Hi there CIAimages,

I did not use your original script
but looked at it in a slightly
diferrent way...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>div changer</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
body
{
background-color:#aaaaff;
}
#one,#two,#three,#four,#five
{
display:none;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -162px;
width:324px;
height:200px;
border:solid 1px #000000;
padding:10px;
background-color:#ffffff;
text-align:justify;
overflow:auto;
}
#six
{
width:80px;
height:20px;
border:solid 1px #000000;
padding:5px;
background-color:#ffffff;
text-align:center;
}
/*//]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
var d=0;
var id=new Array();
id[0]="one";
id[1]="two";
id[2]="three";
id[3]="four";
id[4]="five";
function displayStuff()
{
if(document.getElementById(id[d]).style.display=="")
{
document.getElementById(id[4]).style.display="";
document.getElementById(id[d]).style.display="block";

if(d>0)
{
document.getElementById(id[d-1]).style.display="";
}
}
else
{
document.getElementById(id[d]).style.display="";
}
d++;
if(d>4)
{
d=0;
}
}
//]]>
</script>
</head>
<body>
<div id="one">this is number one</div>
<div id="two">and this is number two</div>
<div id="three">now we have number three</div>
<div id="four">followed by number four</div>
<div id="five">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Praesent blandit venenatis purus. Integer massa libero, vehicula id,
consequat sed, tincidunt nec, purus. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos hymenaeos. Suspendisse potenti.
Nunc vulputate magna non magna. Aenean lorem eros, adipiscing quis,
semper non, dictum a, nunc. Curabitur ut sem. Pellentesque a est id neque
hendrerit ultrices. Donec vulputate tincidunt turpis. Curabitur dignissim
vestibulum nunc. Aliquam felis lorem, ultrices sit amet, convallis a, accumsan
vel, ante. Proin aliquam turpis sed augue. In pellentesque, magna a pulvinar
adipiscing, est orci adipiscing felis, sed laoreet urna magna quis neque.
Proin facilisis aliquet urna</div>
<div id="six" onclick="displayStuff();">div change</div>
</body>
</html>

I hope that it is close to your requirements.

birdbrain

CIAimages

5:29 am on Feb 23, 2004 (gmt 0)

Thank for your help but I a looking for is more in the lign of Multiple Buttons and each one open a DIV but if one DIV is open then it closed it and open another the second one.

like the one below exept it close the first div before it open another one. I need this because I genereate the div on the fly in an ASP page and I include the Dives based on the record from a DB a long and painful project.

ONE Javascript Multiple DIV and the content is called from the button also the JS need to be a basic not somthing that as to be generated based on how many div etc.. some of my pages have 2 help others have 5 helps but in reality it is the same page with diferent content. I use Loop to generate them.

</body>
</html>

<div align="right" id="help2" style="display:none;">

<table width="210" cellspacing="0" cellpadding="0" style="border:#000000 1px solid; filter:progid:DXImageTransform.Microsoft.Shadow(color='#666666', Direction=135, Strength=4);">
<tr>
<td height="0">
<table width="100%" height="19" border="0" cellspacing="0" cellpadding="8" bgcolor="#FFFFC6">
<tr>
<td>
<font face="verdana" size="1">
<b><i><u>Ya Bada Baduuu!</u></i></b>
<br><br>Haaaaaaaaaaaaaaaaa.
</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>

birdbrain

10:23 am on Feb 23, 2004 (gmt 0)

Hi there CIAimages,

How about like this then...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>div changer two</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
body
{
background-color:#aaaaff;
}
#one,#two,#three,#four,#five
{
display:none;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -162px;
width:324px;
height:200px;
border:solid 1px #000000;
padding:10px;
background-color:#ffffff;
text-align:justify;
overflow:auto;
}
.six
{
width:80px;
height:20px;
border:solid 1px #000000;
padding:5px;
background-color:#ffffff;
text-align:center;
}
/*//]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
var id=new Array('one','two','three','four','five');
function displayStuff(d)
{
if(document.getElementById(id[d]).style.display=="")
{
document.getElementById(id[d]).style.display="block";
if(d=="0")
{
document.getElementById(id[1]).style.display="";
document.getElementById(id[2]).style.display="";
document.getElementById(id[3]).style.display="";
document.getElementById(id[4]).style.display="";
}
if(d=="1")
{
document.getElementById(id[0]).style.display="";
document.getElementById(id[2]).style.display="";
document.getElementById(id[3]).style.display="";
document.getElementById(id[4]).style.display="";
}
if(d=="2")
{
document.getElementById(id[0]).style.display="";
document.getElementById(id[1]).style.display="";
document.getElementById(id[3]).style.display="";
document.getElementById(id[4]).style.display="";
}
if(d=="3")
{
document.getElementById(id[0]).style.display="";
document.getElementById(id[1]).style.display="";
document.getElementById(id[2]).style.display="";
document.getElementById(id[4]).style.display="";
}
if(d=="4")
{
document.getElementById(id[0]).style.display="";
document.getElementById(id[1]).style.display="";
document.getElementById(id[2]).style.display="";
document.getElementById(id[3]).style.display="";
}
}
else
{
document.getElementById(id[d]).style.display="";
}
}
//]]>
</script>
</head>
<body>
<div id="one">this is number one</div>
<div id="two">and this is number two</div>
<div id="three">now we have number three</div>
<div id="four">followed by number four</div>
<div id="five">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Praesent blandit venenatis purus. Integer massa libero, vehicula id,
consequat sed, tincidunt nec, purus. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos hymenaeos. Suspendisse potenti.
Nunc vulputate magna non magna. Aenean lorem eros, adipiscing quis,
semper non, dictum a, nunc. Curabitur ut sem. Pellentesque a est id neque
hendrerit ultrices. Donec vulputate tincidunt turpis. Curabitur dignissim
vestibulum nunc. Aliquam felis lorem, ultrices sit amet, convallis a, accumsan
vel, ante. Proin aliquam turpis sed augue. In pellentesque, magna a pulvinar
adipiscing, est orci adipiscing felis, sed laoreet urna magna quis neque.
Proin facilisis aliquet urna</div>
<div class="six" onclick="displayStuff(0);">one</div>
<div class="six" onclick="displayStuff(1);">two</div>
<div class="six" onclick="displayStuff(2);">three</div>
<div class="six" onclick="displayStuff(3);">four</div>
<div class="six" onclick="displayStuff(4);">five</div>
</body>
</html>

This is a little clumsy..but it works.

birdbrain