SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member chrisbell's Avatar
    Join Date
    Oct 2005
    Location
    UK
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript Hide/Show Problem

    I am having a problem getting the javascript hide/show to work properly. They code i am using is from this website:

    Code:
    http://www.netlobo.com/div_hiding.html
    The code works fine when you first load the page as it hides the div that it is meant to, however when i click the submit button on the form, the div is expected to be shown. However instead of staying visible it will show its self for a split second then remain hidden again. Here is my code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    	<head>
    		<title>Chris Bells Test Search Site</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    		<link href="style.css" rel="stylesheet" type="text/css" />
    <script language=javascript type='text/javascript'>
    function toggleLayer( whichLayer )
    {
      var elem, vis;
      if( document.getElementById ) // this is the way the standards work
        elem = document.getElementById( whichLayer );
      else if( document.all ) // this is the way old msie versions work
          elem = document.all[whichLayer];
      else if( document.layers ) // this is the way nn4 works
        elem = document.layers[whichLayer];
      vis = elem.style;
      // if the style.display value is blank we try to figure it out here
      if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
        vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
      vis.display = (vis.display==''||vis.display=='block')?'none':'block';
    }
    </script> 
    	</head>
    	<body onload="javascript:toggleLayer('results');">
    		<div id="search"> 
            	<div id="nav">
                	<ul>
                    	<li><a href="/page1.html">Page 1</a></li>
                        <li><a href="#">Page 2</a></li>
                        <li><a href="#">Page 3</a></li>
                    </ul>
                </div>
                <div style="clear: both;"></div>
        <form method="post" action="New.php">
        <input type="text" name="search" size=25 maxlength=25 style="background-image: url(images/search_back.gif); padding: 10px 10px 0px 10px; float: left; width: 417px; height: 32px; border: 0px;" />
        <input type="submit" name="Submit" value="" id="part1" onclick="javascript:toggleLayer('results');" style="background-image: url(images/button.gif); width: 87px; height: 42px; border: 0px; float: right; margin: 0px 82px 0px 0px;" />
        </form>
    and the css code:

    Code:
    #results {
    	width: 570px;
    	height: auto;
    	margin: 0 auto;
    	background-color: #dedede;
    	display: none;
    }
    is the problem caused by the fact that the results div has the property of display: none?

    Many Thanks

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by chrisbell View Post
    The code works fine when you first load the page as it hides the div that it is meant to, however when i click the submit button on the form, the div is expected to be shown. However instead of staying visible it will show its self for a split second then remain hidden again.
    When a form is submitted, the page is dismissed. Does this form reload the same page? If so then you need
    to prevent your div being hidden on reload.
    Tab-indentation is a crime against humanity.


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
  •