SitePoint Sponsor |
|
User Tag List
Results 1 to 7 of 7
-
Sep 11, 2007, 13:35 #1
- Join Date
- Apr 2004
- Location
- NC
- Posts
- 689
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Using Javascript to hide and show divs
I think my code should pretty much speak for itself. I'm sure it's a bit over kill, but I'm unfamiliar with javascript.
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script language="javascript"> <!-- function WriteText(county) { switch (county) { case "county1": document.getElementById(county).style.visibility="visible"; document.getElementById("county2").style.visibility="hidden"; document.getElementById("county3").style.visibility="hidden"; document.getElementById("county4").style.visibility="hidden"; document.getElementById("county5").style.visibility="hidden"; break case "county2": document.getElementById(county).style.visibility="visible"; document.getElementById("county1").style.visibility="hidden"; document.getElementById("county3").style.visibility="hidden"; document.getElementById("county4").style.visibility="hidden"; document.getElementById("county5").style.visibility="hidden"; break case "county3": document.getElementById(county).style.visibility="visible"; document.getElementById("county2").style.visibility="hidden"; document.getElementById("county1").style.visibility="hidden"; document.getElementById("county4").style.visibility="hidden"; document.getElementById("county5").style.visibility="hidden"; break case "county4": document.getElementById(county).style.visibility="visible"; document.getElementById("county2").style.visibility="hidden"; document.getElementById("county3").style.visibility="hidden"; document.getElementById("county1").style.visibility="hidden"; document.getElementById("county5").style.visibility="hidden"; break case "county5": document.getElementById(county).style.visibility="visible"; document.getElementById("county2").style.visibility="hidden"; document.getElementById("county3").style.visibility="hidden"; document.getElementById("county4").style.visibility="hidden"; document.getElementById("county1").style.visibility="hidden"; break } } // --> </script> <script type="text/css"> </script> </head> <body> <img src="map.gif" alt="map" border="0" usemap="#map"><br> <br><br><br> <map name="map"> <AREA SHAPE="poly" style="cursor:pointer;" onclick="WriteText('county1')" ALT="" COORDS="73,236, 73,271, 70,275, 79,288, 321,291, 371,287, 381,308, 389,309, 395,308, 392,293, 408,284, 423,245, 395,244, 389,234"> <AREA SHAPE="poly" style="cursor:pointer;" onclick="WriteText('county2')" ALT="" COORDS="257,237, 390,235, 392,243, 422,242, 410,228, 416,211, 466,192, 464,179, 477,155, 470,137, 452,119, 439,119, 439,129, 294,130, 293,138, 293,174, 253,171"> <AREA SHAPE="poly" style="cursor:pointer;" onclick="WriteText('county3')" ALT="" COORDS="60,173, 56,186, 57,201, 64,199, 70,215, 71,234, 255,237, 251,171, 293,172, 291,138, 164,139, 161,171"> <AREA SHAPE="poly" style="cursor:pointer;" onclick="WriteText('county4')" ALT="" COORDS="211,17, 396,15, 398,28, 409,36, 400,53, 422,93, 433,93, 440,108, 448,116, 453,118, 438,119, 438,128, 296,130, 291,136, 216,139, 214,139, 212,113, 209,113"> <AREA SHAPE="poly" style="cursor:pointer;" onclick="WriteText('county5')" ALT="" COORDS="76,15, 30,14, 29,17, 30,19, 33,28, 30,32, 29,35, 36,41, 23,86, 57,171, 161,171, 163,138, 213,138, 211,113, 207,113, 207,17"> </MAP> <div style="height:200px; width:300px; border:1px solid #666;"> <div id="county1" style="visibility:hidden;position:relative; left:1px; display:inline; border:1px solid black;">county 1 info</div> <div id="county2" style="visibility:hidden;position:relative; left:-75px; display:inline">county 2 info</div> <div id="county3" style="visibility:hidden;position:relative; left:-120px; display:inline ">county 3 info</div> <div id="county4" style="visibility:hidden;position:relative; left:-150px; display:inline">county 4 info</div> <div id="county5" style="visibility:hidden;position:relative; left:-180px; display:inline">county 5 info</div> </div> </body> </html>
Thanks
-
Sep 11, 2007, 14:28 #2
- Join Date
- Sep 2005
- Location
- Sydney, NSW, Australia
- Posts
- 16,875
- Mentioned
- 25 Post(s)
- Tagged
- 1 Thread(s)
Instead of changing the visibility (which shows or hides but still leaves space for the elements) set the display property to block and none instead.
Stephen J Chapman
javascriptexample.net, Book Reviews, follow me on Twitter
HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
<input name="html5" type="text" required pattern="^$">
-
Sep 11, 2007, 14:41 #3
- Join Date
- Apr 2004
- Location
- NC
- Posts
- 689
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Wow, that was considerably easier . Thank you very much
-
Sep 11, 2007, 14:46 #4
Probably could streamline the function too:
Code:function WriteText(county) { var t = 5; for (i = 1; i <= t; i++) { if (county == ("county"+1) ) { document.getElementById(county).style.visibility="block"; } else { document.getElementById("county" + i).style.visibility="none"; } } }
-
Sep 11, 2007, 16:01 #5
- Join Date
- Jun 2007
- Location
- San Diego, CA
- Posts
- 784
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
If you're concerned about the overkill, Stephen and Tommy just help me work out several bugs out of my modified script. I was able to use several loops to more efficiently construct the javascript event handlers.
http://www.sitepoint.com/forums/showthread.php?t=500051
Oh, and I wouldn't recommend doing it with pure javascript, because that would cause accessibility problems (and that means SEO too). Keeping the content and links in XHTML is best practices, so you're right on.Whatever you can do or dream you can, begin it.
Boldness has genius, power and magic in it. Begin it now.
Chroniclemaster1, Founder of Earth Chronicle
A Growing History of our Planet, by our Planet, for our Planet.
-
Sep 11, 2007, 20:34 #6
- Join Date
- May 2007
- Location
- Houston, Texas USA
- Posts
- 28
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I have something similar set up on a testbed photoblog here:
http://pixelpost.mytestbed.com
It's the show/hide image info and show/hide comments.
Feel freel to peek at the source code and copy and paste to your heart's content.Visit our web design site at http://www.pixelita.com
Visit Serbia's biggest and best internet forum at
http://www.burek.co.yu
-
Sep 13, 2007, 12:48 #7
- Join Date
- Apr 2004
- Location
- NC
- Posts
- 689
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
thanks for that for loop, it works great.
Bookmarks