JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

Expandable Javascript Text Block Problem

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

•
•
Join Date: Feb 2008
Posts: 2
Reputation: nova706 is an unknown quantity at this point 
Solved Threads: 0
nova706 nova706 is offline Offline
Newbie Poster

Expandable Javascript Text Block Problem

 
0
  #1
Feb 28th, 2008
I am having trouble with a piece of javascript code that expands blocks of text. For example, when you click the title, the text under it will expand. I am fairly new to javascript but it looks like the code bassically re-writes the link in the html so that when you press the title again, it will collapse the text.

Here is the javascript code...
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1.   function expand(ID,name)
  2.   {  
  3.     document.getElementById('item'+ID).style.display = 'block';
  4.     document.getElementById('expander'+ID).innerHTML =
  5. '<a href="javascript:collapse('+ID+',\''+name+'\')" title="Collapse"><img alt="less" src="images/arrow_back.gif" width="20" height="10" class="no_border" /> <span id="expander1" class="style_heading3">'+name+'</span><br /></a>';
  6.   }
  7.   function collapse(ID,name)
  8.   {
  9.     document.getElementById('item'+ID).style.display = 'none';
  10.     document.getElementById('expander'+ID).innerHTML =
  11. '<a href="javascript:expand('+ID+',\''+name+'\')" title="Expand"><img alt="more" src="images/arrow.gif" width="20" height="10" class="no_border" /> <span id="expander1" class="style_heading3">'+name+'</span><br /></a>';
  12.   }

Here is the HTML code...
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <div id="expander1" class="expander" style="display: inline">
  2.    <a href="javascript:expand(1, 'TITLE')" title="Expand">
  3.    <img alt="more" src="images/arrow.gif" width="20" height="10" class="no_border" />
  4.    <span class="style_heading3">TITLE</span><br />
  5.    </a>
  6. </div>
  7. <div id="item1" style="display: none">
  8.    Expanded text goes here
  9. </div>

The problem that I am having is that when you open the page in Mozilla Firefox or Safari, the boxes do not expand and collapse properly after you have expanded and collapsed it once. The code works perfectly fine in IE7. I am really stuck and cannot figure out why the java code would work fine in IE and not Firefox/Safari.

If anyone has any advice on how to accomplish this or how to tweak my current code to work on other browsers it would be very appreciated.
Last edited by nova706; Feb 28th, 2008 at 12:30 am.
Reply With Quote Quick reply to this message  
•
•
Join Date: Dec 2004
Posts: 4,182
Reputation: peter_budo has much to be proud of peter_budo has much to be proud of peter_budo has much to be proud of peter_budo has much to be proud of peter_budo has much to be proud of peter_budo has much to be proud of peter_budo has much to be proud of peter_budo has much to be proud of peter_budo has much to be proud of peter_budo has much to be proud of 
Solved Threads: 481
Moderator
Featured Poster
peter_budo's Avatar
peter_budo peter_budo is offline Offline
Code tags enforcer

Re: Expandable Javascript Text Block Problem

 
0
  #2
Feb 28th, 2008
I used something like this 2-3 years ago on one of my school assigmnets. Maybe it will help you...

Script in the head of html
html Syntax (Toggle Plain Text) 
  1. <script type="text/javascript"><!--function to hide/show submenu options-->
  2. (document.getElementById ? DOMCapable = true : DOMCapable = false);
  3.  
  4. function show(menuName)
  5. {
  6.  	if (DOMCapable)
  7.  	{
  8.  
  9. if(document.getElementById("menu1choices").style.visibility=="hidden")
  10.  		{
  11.  
  12. document.getElementById("menu1choices").style.display="block";
  13.  
  14. document.getElementById("menu1choices").style.visibility="visible";
  15.  		}
  16.  		else
  17.  		{
  18.  
  19. document.getElementById("menu1choices").style.display="none";
  20.  
  21. document.getElementById("menu1choices").style.visibility="hidden";
  22.  		}
  23.  
  24.  	 }
  25. }
  26. function hide(menuName)<!--Function to hide submenu if any other option from main menu selected-->
  27. {
  28.  	if (DOMCapable)
  29.  	{
  30.  
  31. document.getElementById("menu1choices").style.display="none";
  32.  
  33. document.getElementById("menu1choices").style.visibility="hidden";
  34.  	 }
  35. }
  36. </script>

Inside body of html
html Syntax (Toggle Plain Text) 
  1. <div id="menu1" onClick="show('menu1choices');">
  2. <p class="black_link" style="cursor: pointer;">Quiz</p></div>
  3. <div id="menu1choices" style="display: block; visibility: visible;">
  4. <table border="0">
  5. <tbody><tr>
  6.  	<td><a href="quiz1.html" 
  7. target="main" class="black_smaller">Quiz 1</a></td>
  8. </tr>
  9. <tr>
  10.  	<td><a href="test.html" 
  11. target="main" class="black_smaller">Quiz2</a></td>
  12. </tr>
  13. </tbody>
  14. </table>
  15. </div>
  16.  
  17. <script type="text/javascript">
  18.  	if (DOMCapable)
  19.  	{
  20.  	 show("menu1");
  21.  	}
  22. </script>
Learn to see in another's calamity the ills which you should avoid.
Publilius Syrus
(~100 BC)
LJC - London Java Community, Graduate & Undergraduate Software Development Community, JAVAWUG (Java Web User Group), The London Android Group
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate array automatically browser bug calendar captchaformproblem cart checkbox child close codes createrange() cursor date debugger dependent disablefirebug dom dropdown editor element embed engine enter events explorer ext file firefox form forms frameworks getselection google gxt hiddenvalue highlightedword hint html htmlform ie7 ie8 iframe images internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsf jsfile jsp jump libcurl maps masterpage math media microsoft object onmouseoutdivproblem onreadystatechange parent paypal pdf php player position post programming progressbar prototype redirect regex runtime safari scale scriptlets scroll search security shopping size software sql text textarea unicode web website windowsxp wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC