SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Temecula, CA
    Posts
    188
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Making display = block work in IE

    I have this html
    Code:
    <div id="AuctionItem">
       <textarea name="AuctionItemDescription" cols="85" rows="3" onfocus="javascript:if(this.value=='Please describe your auction item here and include its value.')this.value=''" >Please describe your auction item here and include its value.</textarea>	
       </div>
    and this CSS
    Code:
    #AuctionItem	{
        	display:none;
        	}
    and this JS
    Code:
    function ShowDescription()
        {
        	showBlock("AuctionItem");
        }
        
        function showBlock(id){
        	// Netscape 4
        	if(ns4){
        		document.layers[id].display = "block";
        	}
        	// Explorer 4
        	else if(ie4){
        		document.all[id].style.display = "block";
        	}
        	// W3C - Explorer 5+ and Netscape 6+
        	else if(ie5 || ns6){
        		alert(document.getElementById(id).style.display);
        		document.getElementById(id).style.display = "block";
        		alert(document.getElementById(id).style.display);
        	}
        }
    (Although not shown above, due credit is given to Martial Boissonneault at getElementById.com)

    Although I don't believe it should matter, "AuctionItem" is within a table. The initial alert shows nothing, while the second shows 'block'; the div remains hidden. When I change the CSS manually and refresh, it appears as desired. How do I change the div's display property from 'none' to 'block' through JavaScript in IE? It works in FF.

    Thanks for any and all suggestions.

  2. #2
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Temecula, CA
    Posts
    188
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can clearly hear Roseanne Rosannadanna saying: "Never mind!"

    IE was getting confused (poor thing!) because there was another element with the name property set to AuctionItem. When I changed its name to AuctionItemCheckbox, IE was able to understand that when I said getElementById I meant getElementById!

    Has anyone else had this problem and is it a well known bug? Or is there something else that I'm not getting yet?

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,820
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    It is a well known bug that IE maps a lot of named fields to the corresponding variable names.

    Also a simpler version of your Javascfript would be:

    Code:
    function ShowDescription()
        {
        	showBlock("AuctionItem");
        }
        
        function showBlock(id){
        	  document.getElementById(id).style.display = "block";    }
    No one uses IE4 or Netscape 4 any more.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Temecula, CA
    Posts
    188
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for writing back. I will forever be watching my names and id's.

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,820
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    When Javascript runs fine in Firefox and Opera but then screws up in IE the unhelpful field mappings that IE does are usually the cause.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


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
  •