User Name Password Register
DaniWeb IT Discussion Community
Home
Forums
Tutorials
Code Snippets
Blogs
Link Directory
All
•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 373,466 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,959 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Join our community!
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 1888 | Replies: 1
Reply
•
•
Join Date: Feb 2008
Location: Colorado
Posts: 2
Reputation: nova706 is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
nova706 nova706 is offline Offline
Newbie Poster

Help Expandable Javascript Text Block Problem

  #1  
Feb 27th, 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...
Help with Code Tags 
  function expand(ID,name)
  {  
    document.getElementById('item'+ID).style.display = 'block';
    document.getElementById('expander'+ID).innerHTML =
'<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>';
  }
  function collapse(ID,name)
  {
    document.getElementById('item'+ID).style.display = 'none';
    document.getElementById('expander'+ID).innerHTML =
'<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>';
  }

Here is the HTML code...
Help with Code Tags 
<div id="expander1" class="expander" style="display: inline">
   <a href="javascript:expand(1, 'TITLE')" title="Expand">
   <img alt="more" src="images/arrow.gif" width="20" height="10" class="no_border" />
   <span class="style_heading3">TITLE</span><br />
   </a>
</div>
<div id="item1" style="display: none">
   Expanded text goes here
</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 27th, 2008 at 11:30 pm.
AddThis Social Bookmark Button
Reply With Quote  
•
•
Join Date: Dec 2004
Location: London or Slovakia
Posts: 1,899
Reputation: peter_budo has a spectacular aura about peter_budo has a spectacular aura about peter_budo has a spectacular aura about 
Rep Power: 9
Solved Threads: 216
Moderator
Featured Poster
peter_budo's Avatar
peter_budo peter_budo is online now Online
Posting Virtuoso

Re: Expandable Javascript Text Block Problem

  #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
Help with Code Tags
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
Help with Code Tags
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)
If we helped you to solve your problem, answered your question please mark your post as SOLVED.
Reply With Quote  
Reply

•
•
•
•

Only community members can participate in forum threads. You must register or log in to contribute.

Register
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
•
•
•
•
Thread Tools Display Modes
Linear Mode Linear Mode

•
•
•
•
ads adsense cross-browser javascript menu with few lines of code firefox firefox background-position problem solved google html javascript javascript delete all rows from table in javascript show overflow of text by "..." javascript smooth scrolling scroll smoothly window document position javascript tab menu with rounded corners generator link prevent javascript menu from getting hidden under flash movies preventing the delay when src attribute of the images set via javascript revenue split text into substrings seperated more than one character text unit update panel scroll problem
Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum

Advertising Opportunities on DaniWeb
Contact Us - Newsletter Archive - Sitemap - Privacy Statement
All times are GMT -4. The time now is 5:15 am.
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC