Expand one div while collapsing ALL others, MY code SHOULD work.

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved

•
•
Join Date: Mar 2008
Posts: 78
Reputation: rickya100 is an unknown quantity at this point 
Solved Threads: 1
rickya100 rickya100 is offline Offline
Junior Poster in Training

Expand one div while collapsing ALL others, MY code SHOULD work.

 
0
  #1
Aug 22nd, 2008
Hi thanks for looking.

It's quite straight forward really. As opposed to allowing all possible divs to be displayed I would like to make them all collapse and then only expand the one that the user clicked on. Simple right?

OK so here is my code right now, which allows them all to be displayed.

javascript Syntax (Toggle Plain Text) 
  1.  
  2. function ShowHide(div){
  3.  
  4. 	if (document.getElementById(div).style.display == 'none' ){
  5. 		document.getElementById(div).style.display = 'block';	
  6. 	}
  7. 	else if ( document.getElementById(div).style.display == 'inline-block' ){
  8. 		document.getElementById(div).style.display = 'none';
  9. 	}
  10. 	else
  11. 	{
  12. 		document.getElementById(div).style.display = 'none';
  13. 	}
  14. }

However when I add the following function below the above one and call it instead it doesn't even expand the div tag.

javascript Syntax (Toggle Plain Text) 
  1.  
  2. function toggleSlide(objname) {
  3. var f=2005;
  4. for (f=2005;f<=2025;f++)
  5. {
  6. 	document.getElementById(f).style.display = 'none';
  7. }
  8. 	ShowHide(objname);
  9. }

The f var is to cycle through all the id's. The id is generated by PHP on the server side. Then I simple call the first function that I know works by itself.

Any help at all is greatly appreciated.
Last edited by rickya100; Aug 22nd, 2008 at 10:10 am. Reason: Mistyped code
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2006
Posts: 7,651
Reputation: ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of 
Solved Threads: 474
Super Moderator
Featured Poster
~s.o.s~'s Avatar
~s.o.s~ ~s.o.s~ is offline Offline
Failure as a human

Re: Expand one div while collapsing ALL others, MY code SHOULD work.

 
0
  #2
Aug 24th, 2008
What does the Firefox Error Console say? Post a complete snippet which doesn't work so that we can try it in our browsers rather than posting chunks.
Last edited by ~s.o.s~; Aug 24th, 2008 at 1:37 am.
I don't accept change; I don't deserve to live.

Jo Tujhe Jagaaye, Nindein Teri Udaaye Khwaab Hai Sachcha Wahi.
Nindon Mein Jo Aaye Jise To Bhul Jaaye Khawab Woh Sachcha Nahi.
Khwaab Ko Raag De, Nind Ko Aag De
Reply With Quote Quick reply to this message  
•
•
Join Date: Mar 2008
Posts: 78
Reputation: rickya100 is an unknown quantity at this point 
Solved Threads: 1
rickya100 rickya100 is offline Offline
Junior Poster in Training

Re: Expand one div while collapsing ALL others, MY code SHOULD work.

 
0
  #3
Aug 24th, 2008
Hi s.o.s,

My internet went down so has taken me a while to post back.

OK so here is the line of php that echos out the html with the javascript call.

php Syntax (Toggle Plain Text) 
  1. echo '<h2><a href="javascript:;" onclick="toggleSlide(\''.$row['year'].'\');" title="See articles from '.$row['year'].' ">'.$row['year']."</a></h2>\n";

which outputs this

html Syntax (Toggle Plain Text) 
  1. <h2><a href="javascript:;" onclick="toggleSlide('2007');" title="See articles from 2007 ">2007</a></h2>

And here is the javascript file that the call is made to

javascript Syntax (Toggle Plain Text) 
  1. function ShowHide(div){
  2.  
  3. 	if (document.getElementById(div).style.display == 'none' ){
  4. 		document.getElementById(div).style.display = 'block';	
  5. 	}
  6. 	else if ( document.getElementById(div).style.display == 'inline-block' ){
  7. 		document.getElementById(div).style.display = 'none';
  8. 	}
  9. 	else
  10. 	{
  11. 		document.getElementById(div).style.display = 'none';
  12. 	}
  13. }
  14.  
  15.  
  16. function toggleSlide(objname) {
  17. var f=2005;
  18. for (f=2005;f<=2020;f++)
  19. {
  20. 	document.getElementById(f).style.display = 'none';
  21. }
  22. 	ShowHide(objname);
  23. }

The error that FireFox error console returns when I click on the link is

'Error: document.getElementById(f) is null
Source File: http://localhost/ATS/js_includes/show_hide.js
Line: 20'

I don't know why it's null as it is a simple for loop. Although I'm still getting used to javascript.


Again, thanks for any help.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2006
Posts: 7,651
Reputation: ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of 
Solved Threads: 474
Super Moderator
Featured Poster
~s.o.s~'s Avatar
~s.o.s~ ~s.o.s~ is offline Offline
Failure as a human

Re: Expand one div while collapsing ALL others, MY code SHOULD work.

 
0
  #4
Aug 24th, 2008
It simply means that an element with an ID having the value contained in the variable 'f' at that point in time doesn't exist. Try alerting the value of 'f' inside the loop and search for an element with that ID in your markup. Like I said in my previous post, the way you are generating your markup holds the key to the problem.
I don't accept change; I don't deserve to live.

Jo Tujhe Jagaaye, Nindein Teri Udaaye Khwaab Hai Sachcha Wahi.
Nindon Mein Jo Aaye Jise To Bhul Jaaye Khawab Woh Sachcha Nahi.
Khwaab Ko Raag De, Nind Ko Aag De
Reply With Quote Quick reply to this message  
•
•
Join Date: Mar 2008
Posts: 78
Reputation: rickya100 is an unknown quantity at this point 
Solved Threads: 1
rickya100 rickya100 is offline Offline
Junior Poster in Training

Re: Expand one div while collapsing ALL others, MY code SHOULD work.

 
0
  #5
Aug 25th, 2008
Hi,

I have tried to catch the point that var f is being assigned null and drop out of the loop then but i can't get it to drop out and then expand the div I want.

Here is my revised code

javascript Syntax (Toggle Plain Text) 
  1. function toggleSlide(objname) {
  2. var f=2007;
  3. while (f != null)
  4. {
  5. 	document.getElementById(f).style.display = 'none';
  6. 	alert(f);
  7. 	f++;
  8. }
  9. 	ShowHide(objname);
  10. }

It is alerting out the value of each div - 2007 and 2008 - but then doesn't expand the div clicked on.

The html output is fine. So im not sure what is wrong.
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 381
Reputation: langsor is an unknown quantity at this point 
Solved Threads: 33
langsor langsor is offline Offline
Posting Whiz

Re: Expand one div while collapsing ALL others, MY code SHOULD work.

 
0
  #6
Aug 25th, 2008
Are you trying to do this?
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. div {
  5.   display: none;
  6.   width: 200px;
  7.   height: 200px;
  8.   border: 1px solid indigo;
  9. }
  10. </style>
  11. <script type="text/javascript">
  12. window.onload = function () {
  13.   toggleSlide('2007');
  14. }
  15.  
  16. function toggleSlide ( id ) {
  17.   for ( var f = 2005; f <= 2020; f ++ ) {
  18.     if ( node = document.getElementById(f) ) {
  19.       if ( f == id ) {
  20.         node.style.display = 'block'; 
  21.       } else {
  22.         node.style.display = 'none';
  23.       }
  24.     }
  25.   }
  26. } 
  27. </script>
  28. </head>
  29. <body>
  30. <h2><a href="javascript:" onclick="toggleSlide('2007')" title="See articles from 2007">2007</a></h2>
  31. <h2><a href="javascript:" onclick="toggleSlide('2008')" title="See articles from 2008">2008</a></h2>
  32. <h2><a href="javascript:" onclick="toggleSlide('2009')" title="See articles from 2009">2009</a></h2>
  33. <div id="2007">2007</div>
  34. <div id="2008">2008</div>
  35. <div id="2009">2009</div>
  36. </body>
  37. </html>
Hope it helps
Last edited by langsor; Aug 25th, 2008 at 1:51 pm.
Google is the answer to all of your questions -- the trick is knowing what question to ask in your specific predicament.
Reply With Quote Quick reply to this message  
•
•
Join Date: Mar 2008
Posts: 78
Reputation: rickya100 is an unknown quantity at this point 
Solved Threads: 1
rickya100 rickya100 is offline Offline
Junior Poster in Training

Re: Expand one div while collapsing ALL others, MY code SHOULD work.

 
0
  #7
Aug 25th, 2008
Many thanks langsor.

That is what I needed. I understand all of it apart form the need for the first if statement in the toggleSlide function.

If you have the time can you explain what what assigning a value to the node variable is for?


Richard
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 381
Reputation: langsor is an unknown quantity at this point 
Solved Threads: 33
langsor langsor is offline Offline
Posting Whiz

Re: Expand one div while collapsing ALL others, MY code SHOULD work.

 
0
  #8
Aug 25th, 2008
•
•
•
•
Originally Posted by rickya100 View Post
Many thanks langsor.

That is what I needed. I understand all of it apart form the need for the first if statement in the toggleSlide function.

If you have the time can you explain what what assigning a value to the node variable is for?


Richard
Hi Richard,
This line is shorthand and does two things at the same time
if ( node = document.getElementById(f) ) {

It assigns the value of document.getElementById(f) to the variable node which is then used later in the block (pre-assigning like this saves typing and processor cycles)

It also tests if node has a value of null (or any false value) by passing the value through from the assignment. This is better illustrated by example. So we know if we should attempt to change the style on this node without generating an error.

Example of above concept
javascript Syntax (Toggle Plain Text) 
  1. <script type="text/javascript">
  2. var a = b = 'c';
  3. alert( a );       // produces 'c'
  4.  
  5. alert( b = 'c' ); // produces 'c'
  6. </script>

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. function toggleSlide ( id ) {
  2.   for ( var f = 2005; f <= 2020; f ++ ) {
  3.     if ( node = document.getElementById(f) ) {
  4.       if ( f == id ) {
  5.         node.style.display = 'block'; 
  6.       } else {
  7.         node.style.display = 'none';
  8.       }
  9.     }
  10.   }
  11. }

Does this all make sense?
Last edited by langsor; Aug 25th, 2008 at 5:19 pm.
Google is the answer to all of your questions -- the trick is knowing what question to ask in your specific predicament.
Reply With Quote Quick reply to this message  
•
•
Join Date: Mar 2008
Posts: 78
Reputation: rickya100 is an unknown quantity at this point 
Solved Threads: 1
rickya100 rickya100 is offline Offline
Junior Poster in Training

Re: Expand one div while collapsing ALL others, MY code SHOULD work.

 
0
  #9
Aug 25th, 2008
Thanks for that,

I think I get it. It was really just the fact that the if statement is used to both test node (if it is null or not) and assign to it.

I'll be getting into javascript a lot more in the coming months so I'm sure I will have a true eureka moment at some time.


Again, many thanks.


Richard
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 381
Reputation: langsor is an unknown quantity at this point 
Solved Threads: 33
langsor langsor is offline Offline
Posting Whiz

Re: Expand one div while collapsing ALL others, MY code SHOULD work.

 
1
  #10
Aug 25th, 2008
You're welcome,

For what it's worth, some people discourage this approach stylistically since it can obscure code, but technically it's sound and I prefer it over the following two examples (when used in moderation).
javascript Syntax (Toggle Plain Text) 
  1. function toggleSlide ( id ) {
  2.   for ( var f = 2005; f <= 2020; f ++ ) {
  3.     var node = document.getElementById(f);
  4.     if ( node ) {
  5.       if ( f == id ) {
  6.         node.style.display = 'block'; 
  7.       } else {
  8.         node.style.display = 'none';
  9.       }
  10.     }
  11.   }
  12. }
...or...
javascript Syntax (Toggle Plain Text) 
  1. function toggleSlide ( id ) {
  2.   for ( var f = 2005; f <= 2020; f ++ ) {
  3.     if ( document.getElementById(f) ) {
  4.       if ( f == id ) {
  5.          document.getElementById(f).style.display = 'block'; 
  6.       } else {
  7.          document.getElementById(f).style.display = 'none';
  8.       }
  9.     }
  10.   }
  11. }
...but that's personal preference really
Last edited by langsor; Aug 25th, 2008 at 5:46 pm.
Google is the answer to all of your questions -- the trick is knowing what question to ask in your specific predicament.
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread has been marked solved.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Other Threads in the JavaScript / DHTML / AJAX Forum


Views: 2042 | Replies: 9
Thread Tools Search this Thread



Tag cloud for JavaScript / DHTML / AJAX
ajax ajaxexample ajaxjspservlets array autoplay blackjack browser captchaformproblem checkbox child class close codes date debugger dependent developer disablefirebug dom editor element embed engine events explorer ext file firefox flash form forms game gears getselection google gxt hiddenvalue highlightedword hint html ie7 ie8 iframe internet java javascript javascripthelp2020 jquery jsf jsfile jsp jump libcurl maps margin marquee masterpage math matrixcaptcha media mysql object onerror onmouseoutdivproblem onreadystatechange parent passing paypal pdf php player position post programming rated redirect runtime safari scriptlets scroll search security session shopping size software solutions star stars stretch synchronous tweet unicode variables web webkit webservice window wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC