SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: display:none

  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    display:none

    When firing an onclick event I am making one div block visible and hiding another (all without making a trip to the server).

    In IE 6.0 the select element inside of the div tag that I am hiding will not go away (the rest of the div with all of it's elements is gone). The select element itself even has an id and I am setting that to "display:none" also.

    This works as one would expect in Firefox. I would be curious to know if there is some kind of hack that I need to perform in order to hide the select element in IE 6.0.

    As usual, any help would be greatly appreciated.

    Rob

  2. #2
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could you show your script for this? It may be that there is a minor error in it that we can spot.

    Dave

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the function . . .

    Code:
    function showDirectionCard()
     {
       document.getElementById("hotspots").style.cssText = "display:none;";
       document.getElementById("pageSizeSelector").style.cssText = "display:none;";
       document.getElementById("directions").style.cssText = "display:block;";
       var hotspot = g_SearchResults.Hotspots.DTOs[g_CurrentInfoCard]
       document.getElementById("endAddress").innerHTML = hotspot.AddrStreet + ', ' + hotspot.City + ',  ' + hotspot.Region + ' ' + hotspot.PostalCode + ', ' + hotspot.Country;
       document.getElementById("showEndAddress").innerHTML = hotspot.AddrStreet + '<br /> ' + hotspot.City + ', ' + hotspot.Region + ' ' + hotspot.PostalCode + '<br />' + hotspot.Country;
     }

  4. #4
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem is only in IE6 and under- IE7 corrects the always on top behavior for selects.

    You have to set the select visibility to hidden to keep it from showing through, and then back to visible when needed.
    The easiest way is to switch the class or style of the document.getElementsByTagName('select') collection at the time you show or hide
    the div. Or, try to keep them where they won't get covered. Or, live with it and hope IE7 becomes more popular...

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought that was the answer, and it may still be, but now both div tags (hotspots, directions) that are being referenced in the function have disappeared while the select element remains (mocking me) . . .

    Code:
    document.getElementById("hotspots").style.cssText = "display:none;";
    document.getElementsByTagName("select").style.cssText = "visibility:hidden;";
    document.getElementById("directions").style.cssText = "display:block;";

  6. #6
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    document.getElementsByTagName("select").style.cssText = "visibility:hidden;";
    This is an collection, not an element.
    If you have more than one select you will have to loop through it;
    but if you have just one:
    document.getElementsByTagName("select")[0].style.visibility='hidden';

    Also, setting cssText doesn't work in all browsers, plus it removes any style you may set somewhere else.
    better to write
    element.style.display='none'

  7. #7
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This worked perfectly. Just when I think I have an understanding of javascript I get schooled like this. Man, the more I learn, the less I know.

    Thanks you very much for all the help on this.

    mrhoo, you should write a book. I'd buy it in an instant.

  8. #8
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In IE 6.0 the select element inside of the div tag that I am hiding will not go away (the rest of the div with all of it's elements is gone).
    The problem is only in IE6 and under- IE7 corrects the always on top behavior for selects.
    This hides the select for me in IE6:
    Code:
    <html>
    <head><title></title>
    <style type="text/css">
    
    </style>
    <script type="text/javascript">
    //<![CDATA[
    
    window.onload=function()
    {
    	document.getElementById("parent").style.display = "none";
    	
    	
    };
    
    //]]>
    </script>
    </head>
    <body>
    
    <form name="f" method="post" action="">
    
    <div id="parent">
    	<select id="s0" name="s0">
    	<option value="0">0</option>
    	<option value="1">1</option>
    	<option value="2">2</option>
    	</select>
    </div>
    
    
    <input type="submit" value="Submit" />
    </form>
    
    </body>
    </html>


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
  •