Go Back   CodingForums.com > :: Client side development > JavaScript programming

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Search this Thread Rate Thread
Old 03-20-2006, 02:11 PM   PM User | # 1
many_tentacles
Regular Coder
 
Join Date: Dec 2005
Posts: 101
many_tentacles is an unknown quantity at this point
Div Visible/Hidden

I am trying to create a button which makes a div appear when clicked and disappear when clicked again.... then appear, then disappear.

I'm nearly there, the div appears, but then rather than just that div disappearing when you click again, everything disappears!!!!!! I'm sure its simple to work out for people who are confident using Javascript. Not for me though!

Here's the link

www.standardcraze.co.uk/test.htm

Please help!!!
Thanks
many_tentacles is offline   Reply With Quote
Old 03-20-2006, 02:31 PM   PM User | # 2
Beagle
Senior Coder
 
Join Date: Jul 2005
Posts: 954
Beagle is an unknown quantity at this point
You script hides all divs. So it makes sense that all the divs disappear. The reason you think it works the first time is because the divs' styles don't have a display property at first.

You should stop using the loop for hiding if you want to use the page. Just hide the div you want to hide.
Beagle is offline   Reply With Quote
Old 03-20-2006, 02:35 PM   PM User | # 3
many_tentacles
Regular Coder
 
Join Date: Dec 2005
Posts: 101
many_tentacles is an unknown quantity at this point
So how can I change the code so it only shows and hides Divs with a certain ID??

I'm not too hot when it comes to Javascript
many_tentacles is offline   Reply With Quote
Old 03-20-2006, 02:39 PM   PM User | # 4
SpirtOfGrandeur
Senior Coder
 
Join Date: May 2005
Location: Michigan, USA
Posts: 566
SpirtOfGrandeur is an unknown quantity at this point
document.getElementById
__________________
Note: I do not test code. I just write it off the top of my head. There might be bugs in it! But if any thing I gave you the overall theory of what you need to accomplish. Also there are plenty of other ways to accomplish this same thing. I just gave one example of it. Other ways might be faster and more efficient.
SpirtOfGrandeur is offline   Reply With Quote
Old 03-20-2006, 02:44 PM   PM User | # 5
many_tentacles
Regular Coder
 
Join Date: Dec 2005
Posts: 101
many_tentacles is an unknown quantity at this point
Thats what i'd have thought but nothing happens at all when i change it to that.
many_tentacles is offline   Reply With Quote
Old 03-20-2006, 03:07 PM   PM User | # 6
many_tentacles
Regular Coder
 
Join Date: Dec 2005
Posts: 101
many_tentacles is an unknown quantity at this point
Ok i've adapted the code a bit... well a lot.

Code:
                <html lang="en">
<head>
<title>Test Page</TITLE>

 <style type="text/css">
div.image1 {
	position: absolute;
	width: 398px;
	height: 474px;
	top: 88px;
	left: 88px;
	z-index: 1;
}
div.semitransparent {
	position: absolute;
	width: 398px;
	height: 474px;
	top: 88px;
	left: 88px;
	background-image:url(images/contentfill.gif);
	display: none;
	z-index: 2;
}
a img { border: none ; }
 </style>

<script type="text/javascript">
function toggleDisplay(divId) {
  var div = document.getElementById(divId);
  div.style.display = (div.style.display=="block" ? "none" : "block");
}
</script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>

	<div id="myClickyDiv" onclick="toggleDisplay('myToggledDiv1')"><img src="images/logo/planeicon.gif"></div>
	<div id="myClickyDiv" onclick="toggleDisplay('myToggledDiv2')"><img src="images/logo/planeicon.gif"></div>
	<div id="myClickyDiv" onclick="toggleDisplay('myToggledDiv3')"><img src="images/logo/boaticon.gif"></div>

	<div class="image1"><img src="images/juno/juno1.jpg"></div>
	<div class="semitransparent" id="myToggledDiv1">11111111111111111</div>
	<div class="semitransparent" id="myToggledDiv2"><br>2222222222222222</div>
	<div class="semitransparent" id="myToggledDiv3"><br><br>3333333333333333</div>
</body>
</html>
               
This works pretty much fine, but i want to work so that only 1 div is visible at any one time.

Any ideas???
many_tentacles is offline   Reply With Quote
Old 03-20-2006, 04:40 PM   PM User | # 7
Beagle
Senior Coder
 
Join Date: Jul 2005
Posts: 954
Beagle is an unknown quantity at this point
Well, I would think that you'd first need to choose which divs are going to participate in this hiding and showing. CLearly not all divs in the page should hide/show, just the ones you want. One way could be with classes. One way could get keeping an array of all the participating divs and looping through that. Solve your problem logically, then use javascript to implement your solution.
Beagle is offline   Reply With Quote
Old 03-20-2006, 06:18 PM   PM User | # 8
JeremyH
New Coder
 
Join Date: Mar 2006
Posts: 30
JeremyH is an unknown quantity at this point
Here is something I am working on that may help:

---------
<html>
<head>

<style type="text/css">
.shown { display: block; }
.hidden { display: none;}
</style>

<script language="JavaScript">

var numero = 0;

function change(newClass) {
document.getElementById('affectedArea').className = newClass;
}


function clickChg() {
numero++
if (numero%2 > 0) change('hidden');
else change('shown');
}

</script>

</head>

<body>


<p><a href="javascript :" onClick="clickChg();" onMouseover="document.rolls.src='x2.gif'" onMouseout="document.rolls.src='x.gif'"><img name="rolls" src="x.gif" border="0"></a></p>

<div class="shown" id="affectedArea">
<img src="smileyface.gif" border="0">
</div>

</body>
</html>



-----

smileyface.gif will appear and disappear when you click the broken link. The style gets changed when the rollover is clicked from display:none, to display: block.

If this helps and you need more explanation, let me know.

Last edited by JeremyH : 03-20-2006 at 07:41 PM .
JeremyH is offline   Reply With Quote
Old 03-23-2006, 09:39 AM   PM User | # 9
many_tentacles
Regular Coder
 
Join Date: Dec 2005
Posts: 101
many_tentacles is an unknown quantity at this point
Thats great stuff Jeremy. The button works exactly as i need it to except for the fact that I need 3 buttons to bring up 3 different submenus and don't know how to change the Javascript to make this work.

Here's the link to what i have so far.

www.standardcraze.co.uk/menu/juno

Any ideas how i can adapt the javascript??
many_tentacles is offline   Reply With Quote
Old 03-23-2006, 01:45 PM   PM User | # 10
vwphillips
Senior Coder
 
Join Date: Mar 2005
Location: Portsmouth UK
Posts: 2,616
vwphillips is on a distinguished road
Code:
                <html lang="en">
<head>
<title>Test Page</TITLE>

 <style type="text/css">
div.image1 {
	position: absolute;
	width: 398px;
	height: 474px;
	top: 88px;
	left: 88px;
	z-index: 1;
}
div.semitransparent {
	position: absolute;
	width: 398px;
	height: 474px;
	top: 88px;
	left: 88px;
	background-image:url(images/contentfill.gif);
	display: none;
	z-index: 2;
}
a img { border: none ; }
 </style>

<script type="text/javascript">
function toggleDisplay(divId,grp) {
 var div = document.getElementById(divId);
 if (!window[grp]){ window[grp]=[]; }
 if (!div.ary){ div.ary=true; window[grp].push(div); }
 for (var zxc0=0;zxc0<window[grp].length;zxc0++){
  if (window[grp][zxc0]!=div){
   window[grp][zxc0].style.display='none'; 
  }
 } 
 div.style.display = (div.style.display=="block" ? "none" : "block");
}
</script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
http://www.codingforums.com/showthread.php?t=82451
	<div id="myClickyDiv" onclick="toggleDisplay('myToggledDiv1','Grp1')"><img src="images/logo/planeicon.gif"></div>
	<div id="myClickyDiv" onclick="toggleDisplay('myToggledDiv2','Grp1')"><img src="images/logo/planeicon.gif"></div>
	<div id="myClickyDiv" onclick="toggleDisplay('myToggledDiv3','Grp1')"><img src="images/logo/boaticon.gif"></div>

	<div class="image1"><img src="images/juno/juno1.jpg"></div>
	<div class="semitransparent" id="myToggledDiv1">11111111111111111</div>
	<div class="semitransparent" id="myToggledDiv2"><br>2222222222222222</div>
	<div class="semitransparent" id="myToggledDiv3"><br><br>3333333333333333</div>
</body>
</html>
               
__________________
Vic

God Loves You and will never love you less.

http://www.vicsjavascripts.org.uk/
vwphillips is online now   Reply With Quote
Old 03-23-2006, 02:10 PM   PM User | # 11
many_tentacles
Regular Coder
 
Join Date: Dec 2005
Posts: 101
many_tentacles is an unknown quantity at this point
Thats spot on! works in all browsers too which is a huge bonus!thanks
many_tentacles is offline   Reply With Quote
Reply



Thread Tools Search this Thread
Search this Thread :

Advanced Search
Rate This Thread
Rate This Thread :

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump



All times are GMT +1. The time now is 09:50 PM .


Real Poker | Online Bingo | OxyScripts.com | Big Web Links Directory | Alive Web Directory | Cheap Cigarettes Online Casinos

Powered by vBulletin® Version 3.6.4
Copyright ©2000 - 2007, Jelsoft Enterprises Ltd.