943,875 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > Loop Through div's
Ad:
Permalink
Apr 21st, 2009
0

Loop Through div's

Expand Post »
I mostly work with PHP. I am not really a JavaScript guy at all, but in this day and age we all end up working with it a bit.
I'm trying to do something that seems like it should be fairly simple. Unfortunately, I am not having any success getting it to work.

I have several links on a page. I have a corresponding number of div's.

css Syntax (Toggle Plain Text)
  1. .topdiv {
  2.     display:none;
  3.     }
xhtml Syntax (Toggle Plain Text)
  1. <a href="#" onclick="topdivOpen('topdiv1');return FALSE;">1st Div</a><br />
  2. <a href="#" onclick="topdivOpen('topdiv2');return FALSE;">2nd Div</a><br />
  3. <a href="#" onclick="topdivOpen('topdiv3');return FALSE;">3rd Div</a><br />
  4.  
  5. <div id="topdiv1" class="topdiv">1st Div</div>
  6. <div id="topdiv2" class="topdiv">2nd Div</div>
  7. <div id="topdiv3" class="topdiv">3rd Div</div>

The div's display in css are all set to "none". When I click a link, I want the corresponding div to display (set css display to "block".)

My script for a single div works perfectly:

javascript Syntax (Toggle Plain Text)
  1. function topdivOpen(div)
  2. {
  3.   setDisplay(div);
  4. }
  5.  
  6. function setDisplay(div)
  7. {
  8.   var obj=document.getElementById(div);
  9.   obj.style.display = (obj.style.display == 'block') ? 'none' : 'block';
  10. }

My problem arises when I try to loop through the div's so that when I click on one, the others (if displayed) get their display set to "none".

This was my most recent attempt:
javascript Syntax (Toggle Plain Text)
  1. function topdivOpen(div)
  2. {
  3.   for(var x=0;x<=10;x++)
  4.   {
  5.     var otherDiv = "topdiv"+x;
  6.     if (otherDiv == div)
  7.     {
  8.       setDisplay(div);
  9.     }
  10.     else
  11.     {
  12.       hideDiv(otherDiv);
  13.     }
  14.   }
  15. }
  16.  
  17. function setDisplay(div)
  18. {
  19.   var obj=document.getElementById(div);
  20.   obj.style.display = (obj.style.display == 'block') ? 'none' : 'block';
  21. }
  22.  
  23. function hideDive(otherDiv)
  24. {
  25.   var otherobj = document.getElementById(otherDiv);
  26.   if (otherobj)
  27.   {
  28.     otherobj.style.display == 'none';
  29.   }
  30. }

Any thoughts would be welcome!
Thank you.
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
bigtalk is offline Offline
16 posts
since Aug 2007
Permalink
Apr 21st, 2009
0

Re: Loop Through div's

firstly if you are going to do lots of js, use a library (i use jquery)
next
i normally use stylesheets to help me out
i have given you a start here
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  3.    "http://www.w3.org/TR/html4/strict.dtd">
  4.  
  5. <html lang="en">
  6. <head>
  7. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  8. 	<title>tabs</title>
  9. 	<meta name="generator" content="TextMate http://macromates.com/">
  10. 	<meta name="author" content="no password">
  11. 	<!-- Date: 2009-04-21 -->
  12. 	<style type="text/css" media="screen">
  13. 		.show {
  14. 		    display:block;
  15. 		    }
  16. 		.hide{
  17. 			display:none;
  18. 		}
  19. 	</style>
  20.  
  21. </head>
  22. <body>
  23. 	<a href="#" onclick="testme();return false;">1st Div</a><br />
  24. 	<a href="#">2nd Div</a><br />
  25. 	<a href="#">3rd Div</a><br />
  26.  
  27. 	<div id="topdiv1" class="hide">1st Div</div>
  28. 	<div id="topdiv2" class="hide">2nd Div</div>
  29. 	<div id="topdiv3" class="hide">3rd Div</div>
  30.  
  31. <script type="text/javascript" charset="utf-8">
  32.  
  33.  
  34. 	var mydivs = document.getElementsByTagName('div');
  35. 	var divlen = mydivs.length;
  36. 	alert(divlen);
  37. 	function testme(){
  38. 	  	for (var i=0;i<divlen;i++) {
  39. 		    mydivs[i].className ='show';
  40. 		}
  41. 	}
  42.  
  43. </script>	
  44.  
  45. </body>
  46. </html>

by the way in my example above script goes at bottom of page
Last edited by johnnyN; Apr 21st, 2009 at 2:36 pm.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
johnnyN is offline Offline
4 posts
since Apr 2009
Permalink
Apr 21st, 2009
0

Re: Loop Through div's

The simplest way to do this, is to fake it by their ids.
In this demo i used the individual id of the anchor element's, making it as my pointer to get specific div's on the page. Code is as follows:
javascript Syntax (Toggle Plain Text)
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <?xml-stylesheet type="text/css href="#internal"?>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  4.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6. <head>
  7. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  8. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  9. <meta http-equiv="Content-Style-Type" content="text/css" />
  10. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  11. <title>JavaScript Demo</title>
  12. <style id="internal" type="text/css" media="screen">
  13. /* <![CDATA[ */
  14. .div-hide {
  15.   display : none; }
  16. .div-show {
  17.   display : block; }
  18. /* ]]> */
  19. </style>
  20. <script type="text/javascript">
  21. // <![CDATA[
  22. var control, display, div, showHide;
  23.  
  24. var control = function() {
  25. showHide = function( div ) {
  26.    div = ( document.getElementById ) ? document.getElementById( div ) : document.all[ div ];
  27.    try {
  28.    div.className = ( div.className === "div-hide" ) ? "div-show" : "div-hide";
  29.    } catch( error ) {
  30.    return div.style.display = ( div.style.display === "none" ) ? "block" : "none";
  31.   }
  32. }; 
  33.  
  34. display = function( e ) {
  35.    e = e ? e : window.event;
  36.    a = e.target ? e.target : e.srcElement;
  37.    if (( a.parentNode.parentNode.nodeName.toLowerCase() === "ol" ) && ( a.nodeName.toLowerCase() === "a" )) {
  38.    num = parseInt( a.id.match(/\d+$/));
  39.    showHide("topdiv" + num); 
  40.    } else { return false; }
  41.  }; 
  42. return { display : display }
  43. }();
  44.  
  45. document.onclick = control.display;
  46.  
  47. // ]]>
  48. </script>
  49. </head>
  50. <body>
  51. <div id="main">
  52. <ol>
  53. <li><a id="d1" href="javascript:void(0)">1st DIV</a></li>
  54. <li><a id="d2" href="javascript:void(0)">2nd DIV</a></li>
  55. <li><a id="d3" href="javascript:void(0)">3rd Div</a></li>
  56. </ol>
  57. <div id="topdiv1" class="div-hide">DIV One</div>
  58. <div id="topdiv2" class="div-hide">DIV Two</div>
  59. <div id="topdiv3" class="div-hide">DIV Three</div>
  60. </div> 
  61. </body>
  62. </html>
Hope it helps you in what you need. Good day...
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Permalink
Apr 22nd, 2009
1

Re: Loop Through div's

Bigtalk,

Your code will compact down nicely, like this:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. function topdivOpen(n){
  2. for(var i=1; i<=3; i++){<blockquote>var divRef = document.getElementById("topdiv"+i);
  3. if(divRef){<blockquote>divRef.style.display = (i==n) ? 'block' : 'none';</blockquote>}
  4. </blockquote>return false;
  5. }
The secret is to pass in simple integer values from the HTML onclick calls, so you can test integer against integer in the loop inside your function:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <a href="" onclick="return topdivOpen(1);">1st Div</a><br />
  2. <a href="" onclick="return topdivOpen(2);">2nd Div</a><br />
  3. <a href="" onclick="return topdivOpen(3);">3rd Div</a><br />
  4. <div id="topdiv1" class="topdiv">1st Div</div>
  5. <div id="topdiv2" class="topdiv">2nd Div</div>
  6. <div id="topdiv3" class="topdiv">3rd Div</div>
As johnyN says above, use a library if you are doing lots of (or really tricky) stuff, but for simple stuff like this avoid bloatware. Libs can be real monsters!

Essential's code is neat if you want to keep your XHTML really clean. The code is still quite compact, but at the cost of being inpenetrable by novice JavaScripters. Essential has invested quite some time acquiring the knowledge to do it his way.

You pays you money and takes your pick. As with everything JavaScript, there are many ways to skin your web page.

Airshow
Sponsor
Reputation Points: 318
Solved Threads: 358
WiFi Lounge Lizard
Airshow is offline Offline
2,526 posts
since Apr 2009
Permalink
Apr 22nd, 2009
0

Re: Loop Through div's

Thank you so much for the responses!

I was able to deduce the errors in my script by analyzing the code you all posted here (before you posted Airshow .)

My else statement was stopping my loop. I was also getting an obj is null error.

This is what I came up with:
javascript Syntax (Toggle Plain Text)
  1. function topdivOpen(div)
  2. {
  3.   var mydivs = document.getElementsByTagName('div');
  4.   var divlen = mydivs.length;
  5.  
  6.   for(var x=1;x<=divlen;x++)
  7.   {
  8.     var otherDiv = "topdiv"+x;
  9.     if (otherDiv == div) { setDisplay(div); continue; }
  10.     setDisplay(otherDiv);
  11.   }
  12. }
  13.  
  14. function setDisplay(div)
  15. {
  16.   var obj = document.getElementById(div);
  17.   if (obj) { obj.style.display = (obj.style.display == 'block') ? 'none' : 'block'; }
  18. }

It's not quite as compact and tidy as the help you have given Airshow, but it remove's the limit on the number of "topdiv"'s I can use in a page. It also allows me to click on a given link a second time to re-hide the div.

Library's - I'm not doing a great deal of JavaScript right now, but I'm sure I will need to get acquainted with them. JQuery? Scriptaculous?

Again, thank you very much, all of you.

If you still think my script needs help, don't hesitate to let me know. I'm always trying to make things better and learn.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
bigtalk is offline Offline
16 posts
since Aug 2007
Permalink
Apr 22nd, 2009
0

Re: Loop Through div's

You can throttle scope of document.getElementsByTagName(); by first wrapping the HTML block in question in a wrapping div:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <div id="topDivWrapper"><blockquote><div id="topdiv1" class="topdiv">1st Div</div>
  2. <div id="topdiv2" class="topdiv">2nd Div</div>
  3. <div id="topdiv3" class="topdiv">3rd Div</div></blockquote></div>
then, in your Javascript, find all the contained divs with document.getElementById('topDivWrapper').getElementsByTagName('div') .

Even better is to use DOM method element.childNodes() to create an array of elements (divs in this case) within the wrapper, then traverse the array with your loop. This is very efficient as it will loop precisely the correct number of times - no overscan. I'll let you read that up for yourself.

Airshow
Last edited by Airshow; Apr 22nd, 2009 at 9:06 pm.
Sponsor
Reputation Points: 318
Solved Threads: 358
WiFi Lounge Lizard
Airshow is offline Offline
2,526 posts
since Apr 2009

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Problem with jumpmenu
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Automatically give input focus not working in IE 6&7





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC