#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2007
    Posts
    234
    Rep Power
    15

    Javascript show/hide


    Hi

    I have been writing a page to show/hide content using javascript.

    I have it working properly with no problem, but my only problem is if there is a physical element below the expanded div tag, it will just mix in with it and make the tag unreadable.

    Is it possible to force the expandable div tag to come to the front, or is there away to redraw the page, so that the elements below the expanded div tag are moved down, and aren't overwritten?

    i have the following javascript code

    Code:
    <script language="javascript">
    
    
    
    
    var state = 'none';
    
    function showhide(layer_ref)
    {
    	if (state == 'block')
    	{
    		state = 'none';
    	}
    	else
    	{
    		state = 'block';
    	}
    
    		hza = document.getElementById(layer_ref);
    		hza.style.display = state;
    
    }
    
    
    
    </script>
    Last edited by boyindie; May 23rd, 2008 at 06:47 AM. Reason: typo
  2. #2
  3. Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Location
    London, UK
    Posts
    4,004
    Rep Power
    2794
    That code is.. wierd. Why do you have a fixed value for the state? The language attribute is depreciated, just use the TYPE attribute. Try this:
    Javascript Code:
    <script type="text/javascript">
      function showHide(layer_ref) {
        var hza = document.getElementById(layer_ref);
        hza.style.display == 'block' ? hza.style.display = 'none' : hza.style.display = 'block';
      }
    </script>


    Anyway, post the CSS and HTML, please.
    [PHP] | [Perl] | [Python] | [Java] != [JavaScript] | [XML] | [C] | [C++] | [LUA] | [MySQL] | [FirebirdSQL] | [PostgreSQL] | [HTML] | [XHTML] | [CSS]
  4. #3
  5. c0der
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2005
    Location
    Vancouver
    Posts
    664
    Rep Power
    158
    Calling obsolete attributes "depreciated" is highly deprecated.

    Comments on this post

    • Winters agrees : lol
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2007
    Posts
    234
    Rep Power
    15
    Originally Posted by PHP-Newb
    Anyway, post the CSS and HTML, please.
    Here is the HTML for the section

    Code:
    <div id="Slider2" >
    
    	<div id="custTable">
    		<h3><u>Customer:</h3></u>
    		<i><b>BT-Broadband</b></i><br><br>
    	</div>
    	<div id="custImage">
    		<img src="/web/images/customer_images/bt_image.jpg" border="1" height="50" width="90"/>
    	</div>
    	<div id="button">
    		<Input Type = Button  value="Expand" onClick = showhide('1');>
    	</div>
    
    	<div id="custQuote">
    		"Best product I ever bought!"
    	</div>
    
    <div id="1" style="display:none; zindex:1;">
    <div id="exampleSlider">
    			<div id="custInfo">
        			<h2>Services Provided:</h2>
        			<ul>
    	    			<li>Noise Simulator</li>
    	    			<li>ADSL Tester</li>
        			</ul>
    				<strong>Customer Position:</strong>Engineer
    				<br><i>"Dear Aims<br>Your product is great!"</i>
        		</div>
      		</div>
    </div>
    
    
    
    <div id="Slider2" style="left:300px; bottom:0px; " >
    
    	<div id="custTable" >
    		<h3><u>Customer:</u></h3>
    		<i><b>Deutche Telekom</b></i><br><br>
    	</div>
    	<div id="custImage">
    		<img src="/web/images/customer_images/d_telecom.png" border="1" height="50" width="90" />
    	</div>
    	<div id="button">
    		<Input Type = Button  value="Expand" onClick = showhide('2');>
    	</div>
    
    	<div id="custQuote">
    		"Best product I ever bought!"
    	</div>
    
    <div id="2" style="display:none;">
    <div id="exampleSlider">
    			<div id="custInfo">
        			<h2>Services Provided:</h2>
        			<ul>
    	    			<li>Noise Simulator</li>
    	    			<li>ADSL Tester</li>
        			</ul>
    				<strong>Customer Position:</strong>Engineer
    				<br><i>"Dear Aims<br>Your product is great!"</i>
        		</div>
      		</div>
    </div>
    
    <div id="Slider2" style="left:-304px; top:210px; " >
    
    	<div id="custTable" >
    		<h3><u>Customer:</u></h3>
    		<i><b>Deutche Telekom</b></i><br><br>
    	</div>
    	<div id="custImage">
    		<img src="/web/images/customer_images/d_telecom.png" border="1" height="50" width="90" />
    	</div>
    	<div id="button">
    		<Input Type = Button  value="Expand" onClick = showhide(3);>
    	</div>
    
    	<div id="custQuote">
    		"Best product I ever bought!"
    	</div>
    
    <div id="3" style="display:none; ">
    <div id="exampleSlider">
    			<div id="custInfo">
        			<h2>Services Provided:</h2>
        			<ul>
    	    			<li>Noise Simulator</li>
    	    			<li>ADSL Tester</li>
        			</ul>
    				<strong>Customer Position:</strong>Engineer
    				<br><i>"Dear Aims<br>Your product is great!"</i>
        		</div>
      		</div>
    </div>

    and the CSS which applys to this section

    Code:
    #Slider1
    {
    	     position:absolute;
    	     width:100px;
               height:18px;
               right:5px;
               top:180px;
               background-color:#66FF66;
               text-align:center;
               color:#000000;
               cursor:pointer;
    
    }
    
    #Slider2
    {
    		position:absolute;
            width:240px;
            height:200px;
            border:2px solid ;
    	left:300px;
    
    }
    
    #cust_title {
    text-align: left;
    
    }
    
    #custTable{
    text-align: left;
    
    }
    
    #custInfo
    {
    text-align:left;
    font-family: Tahoma;
    font-size: 16px;
    }
    
    #custQuote
    {
    text-align:right;
    position:relative;
    right:0px;
    
    top:30px;
    text-align:left;
    bottom: 80px;
    font-family: Tahoma;
    font-size: 16px;
    font-style: italic;
    width:220px;
    }
    
    #exampleSlider
    {
            position:absolute;
            top:202px;
            width:240px;
            height:232px;
            background-color:#993333;
            border:1px solid ;
            color:#000000;
            overflow:hidden;
    	  left:0px;
    	  _top:196px;
    }
    
    #button
    {
    position:absolute;
    right:0px;
    bottom:0px;
    }
    
    #custimage
    {
    position:absolute;
    top:0px;
    right:0px;
    }
    Last edited by Kravvitz; May 23rd, 2008 at 04:20 PM. Reason: fixed the quote
  8. #5
  9. Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Location
    London, UK
    Posts
    4,004
    Rep Power
    2794
    I need Kravvitz! He's got links and.. stuff.

    Ok, several points:
    1. Identifier values cannot start with a numerical value. Link.
    2. You must enclose all your attribute values within quotes, double or single. onClick = showhide(3); --> onclick="showhide(3);".
    3. Capitalizing event handlers is optional but there are several reasons not to do it, which I am too lazy to go into. onClick --> onclick.
    4. Unobtrusive Javascript. What if someone does not have Javascript enabled? Try to code your webpage so that it works with or without. In this case have all of your elements showing when the page loads, then hide the ones you want hidden. As so:-
    Javascript Code:
    <script type="text/javascript">
      function init() {
        document.getElementById('three').style.display = 'none';
      }
      window.onload = init;
    </script>


    The reason that your DIV is ignoring the flow of your layout is because it has been positioned absolutely, so it has been taken out of the flow. I'm not going to go into CSS design structures but absolutely positioning all of your elements is a recipe for disaster. Why are you doing it this way?

    Comments on this post

    • b3n agrees
    • Kravvitz agrees
    [PHP] | [Perl] | [Python] | [Java] != [JavaScript] | [XML] | [C] | [C++] | [LUA] | [MySQL] | [FirebirdSQL] | [PostgreSQL] | [HTML] | [XHTML] | [CSS]
  10. #6
  11. Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Location
    London, UK
    Posts
    4,004
    Rep Power
    2794
    @JT: Telescopes!
    [PHP] | [Perl] | [Python] | [Java] != [JavaScript] | [XML] | [C] | [C++] | [LUA] | [MySQL] | [FirebirdSQL] | [PostgreSQL] | [HTML] | [XHTML] | [CSS]
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2007
    Posts
    234
    Rep Power
    15
    Thanks for the feedback to be honest I have not clue why I set it to absolute just a retarded moment when typing that for some reason! I have applied all they changes and its sitting to perfection if firefox and resizes the elements when I expand them!

    But internet explorer is giving me grief now! The div tag slider 2 appears to be completly strectched and jus looks stupid in general!

    Is there any thoughts or ideas on how to fix this?

    I have tried doing the _ hack in the css for applying changes specific to IE but it doesn't appear to be working the code i Know have looks like the following:

    CSS:
    Code:
    #Slider1
    {
    position:relative;;
    width:50px;
    height:18px;
    background-color:#66FF66;
    text-align:center;
    color:#000000;
    cursor:pointer;
    }
    
    #Slider2
    {
    position:relative;
    width:240px;
    height:200px;
    _height:10px;
    border:2px solid ;
    }
    
    #cust_title {
    position:relative;
    text-align: left;
    
    }
    
    #custTable{
    position:relative;
    text-align: left;
    }
    
    #custInfo
    {
    position:relative;
    text-align:left;
    font-family: Tahoma;
    font-size: 16px;
    }
    
    #custQuote
    {
    text-align:right;
    position:relative;
    right:0px;
    text-align:left;
    bottom: 80px;
    font-family: Tahoma;
    font-size: 16px;
    font-style: italic;
    width:220px;
    }
    
    #exampleSlider
    {
    position:relative;
    top:10px;
    width:240px;
    height:232px;
    background-color:#993333;
    border:1px solid ;
    color:#000000;
    overflow:hidden;
    left:0px;
    }
    
    #button
    {
    position:relative;
    left:85px;
    top:28px;
    }
    
    #custimage
    {
    width:90px;
    height:50px;
    position:relative;
    bottom:90px;
    left:60px;
    }

    HTML
    Code:
    <div id="Slider2" style="right:300px; bottom:0px; " >
    	<div id="custTable">
    		<h3><u>Customer:</h3></u>
    		<i><b>BT-Broadband</b></i><br><br>
    	</div>
    	<div id="custImage">
    		<img src="/web/images/customer_images/bt_image.jpg" border="1" height="50" width="90"/>
    	</div>
    	<div id="button">
    		<Input Type = Button  value="Expand" onclick = "showhide('one');">
    	</div>
    
    	<div id="custQuote">
    		"Best product I ever bought!"
    	</div>
    
    <div id="one" style="display:none; ">
    <div id="exampleSlider">
    			<div id="custInfo">
        			<h2>Services Provided:</h2>
        			<ul>
    	    			<li>Noise Simulator</li>
    	    			<li>ADSL Tester</li>
        			</ul>
    				<strong>Customer Position:</strong>Engineer
    				<br><i>"Dear Aims<br>Your product is great!"</i>
        		</div>
      		</div>
    </div>
    
    
    
    <div id="Slider2" style="left:300px; bottom:193px; " >
    
    	<div id="custTable" >
    		<h3><u>Customer:</u></h3>
    		<i><b>Deutche Telekom</b></i><br><br>
    	</div>
    	<div id="custImage">
    		<img src="/web/images/customer_images/d_telecom.png" border="1" height="50" width="90" />
    	</div>
    	<div id="button">
    		<Input Type = Button  value="Expand" onclick = "showhide('two');">
    	</div>
    
    	<div id="custQuote">
    		"Best product I ever bought!"
    	</div>
    
    <div id="two" style="display:none;">
    <div id="exampleSlider">
    			<div id="custInfo">
        			<h2>Services Provided:</h2>
        			<ul>
    	    			<li>Noise Simulator</li>
    	    			<li>ADSL Tester</li>
        			</ul>
    				<strong>Customer Position:</strong>Engineer
    				<br><i>"Dear Aims<br>Your product is great!"</i>
        		</div>
      		</div>
    </div>
    
    <div id="Slider2" style="right:304px; top:20px; "  >
    
    	<div id="custTable" >
    		<h3><u>Customer:</u></h3>
    		<i><b>Deutche Telekom</b></i><br><br>
    	</div>
    	<div id="custImage">
    		<img src="/web/images/customer_images/d_telecom.png" border="1" height="50" width="90" />
    	</div>
    	<div id="button">
    		<Input Type = Button  value="Expand" onclick = "showhide('three');">
    	</div>
    
    	<div id="custQuote">
    		"Best product I ever bought!"
    	</div>
    
    <div id="three" style="display:none; ">
    <div id="exampleSlider">
    			<div id="custInfo">
        			<h2>Services Provided:</h2>
        			<ul>
    	    			<li>Noise Simulator</li>
    	    			<li>ADSL Tester</li>
        			</ul>
    				<strong>Customer Position:</strong>Engineer
    				<br><i>"Dear Aims<br>Your product is great!"</i>
        		</div>
      		</div>
    </div>
  14. #8
  15. Banned

    Join Date
    Jul 2004
    Location
    The Mews At Windsor Heights
    Posts
    5,326
    Rep Power
    0
    You can write a ternary statement with less markup, like this:
    javascript Code:
     
    hza.style.display =  (hza.style.display == 'block') ? 'none' : 'block' ;

  16. #9
  17. Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Location
    London, UK
    Posts
    4,004
    Rep Power
    2794
    Javascript Code:
    hza.style.display = (hza.style.display == '') ? 'none' : '';




    Can you post all of the code together so I can test properly please?
    [PHP] | [Perl] | [Python] | [Java] != [JavaScript] | [XML] | [C] | [C++] | [LUA] | [MySQL] | [FirebirdSQL] | [PostgreSQL] | [HTML] | [XHTML] | [CSS]
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2007
    Posts
    234
    Rep Power
    15
    Originally Posted by PHP-Newb
    Javascript Code:
    hza.style.display = (hza.style.display == '') ? 'none' : '';




    Can you post all of the code together so I can test properly please?
    I am actually modifying someone elses very unique way of writing a web page!

    This actually uses php tags to insert stuff different scripts into the tags, it would take a while to strip all of these out of the source code!

    If you navigate to this link you will see the page!

    http://www.ftpimage.com/test.php
  20. #11
  21. Application is what Divides Us
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Dec 2002
    Location
    Titusville, FL
    Posts
    2,177
    Rep Power
    62
    Why don't you use a doctype? It could very well help you
    understand what's going on...
    Download [ Fx | Op ] Validate [ Markup | Css ]

IMN logo majestic logo threadwatch logo seochat tools logo