SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2004
    Location
    chicago
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with <div> hiding in IE

    Hi folks,

    I'm trying to show/hide divs using javascript but it doesn't work right in IE... it makes the first div invisible but doesn't close up the space so when the button for the second div is pressed it doesn't start for several lines. Here is the example, click on the "Summary" or "Details" buttons.

    http://66.246.100.85/index.php?main_...products_id=60

    Any suggestions would be greatly appreciated!

    Thanks,

    Andrew

    PS Here's my javascript:
    Code:
      var maxElements = 4;
      function toggle( toggleElement )
      {
        for( i = 1; i <= maxElements; i++ )
        {
          element = document.getElementById( 'summary' + i );
          if( i == toggleElement )
          {
            if( element.style.visibility == 'hidden' )
            {
              element.style.visibility = 'visible';
    	  element.style.height = 'auto';
            }
            else
            {
              element.style.visibility = 'hidden';
    	  element.style.height = 0;
            }
          }
          else
          {
            element.style.visibility = 'hidden';
    	element.style.height = 0;
          }
        }
      }

  2. #2
    SitePoint Zealot codescribbler's Avatar
    Join Date
    Nov 2004
    Location
    New York, NY
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To close the space, use style.display = 'none' instead of style.visibility='hidden'. Visibility settings retain the space on the page, while display actually takes it out of the flow.

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2004
    Location
    chicago
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Guess I should have also posted my html...
    Code:
    <script language="JavaScript" src="description_nav.js"></script>
    <div id="description_nav">
    	<ul>
    		<li><a href="javascript:toggle('1');">Summary</a></li>
    		<li><a href="javascript:toggle('2');">Details</a></li>
    		<li><a href="javascript:toggle('3');">Taste</a></li>
    	</ul>
    </div>
    <div style="visibility: hidden; height: 0px; " id="summary1">
    	<p>Content blah blah blah</p>
    </div>
    <div style="visibility: hidden; height: 0px; " id="summary2">
    	<p>Content blah blah blah</p>
    </div>
    <div style="visibility: hidden; height: 0px; " id="summary3">
    	<p>Content blah blah blah</p>
    </div>
    I tried changing element.style.visibility = 'hidden to element.style.display = "none" throughout the javascript but it didn't seem to work. What changes do I need to make in the html? Also, what should I change element.style.visibility = 'visible';

    to?

    Thanks, (Sorry, never done javascript before...)
    Andrew

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Sorry but:

    your link needs a login name + password

    you have to collaps the div width:0; height:0; overflow:hidden;

  5. #5
    SitePoint Zealot codescribbler's Avatar
    Join Date
    Nov 2004
    Location
    New York, NY
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why collapse div?

    Here's my revision of the code, using display none/block. Also, your last else has been changed to an else if(element), as it was throwing an error if element was not getting defined....

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <script language='javascript'>
    var maxElements = 4;
      function toggle( toggleElement )
      {
        for( i = 1; i <= maxElements; i++ )
        {
          element = document.getElementById( 'summary' + i );
          if( i == toggleElement )
          {
            if( element.style.display == 'none' )
            {
              element.style.display = 'block';
    	  
            }
            else
            {
              element.style.display = 'none';
    	  
            }
          }
          else if(element)
          {
            element.style.display = 'none';
    	
          }
        }
      }
      </script>
    </head>
    
    <div id="description_nav">
    	<ul>
    		<li><a href="javascript:toggle('1');">Summary</a></li>
    		<li><a href="javascript:toggle('2');">Details</a></li>
    		<li><a href="javascript:toggle('3');">Taste</a></li>
    	</ul>
    </div>
    <div style="display: none; " id="summary1">
    	<p>Content blah blah blah 1</p>
    </div>
    <div style="display: none; " id="summary2">
    	<p>Content blah blah blah 2</p>
    </div>
    <div style="display: none; " id="summary3">
    	<p>Content blah blah blah 3</p>
    </div>
    I threw everything in one file for simplicity's sake in posting.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •