Results 1 to 7 of 7

Thread: CSS Display Property

  1. #1
    Join Date
    Mar 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default CSS Display Property

    Hello. I'm looking for some help. I'm not really a javascript guy, so I really don't know what I need to do to get this to work. I've searched these forums and google and cannot find the answer to my problems.

    So some background information. I'm working on a WHM hosting account managment system, and I have a few pages where there are rather large lists (HTML select lists) of account names that various things are done with the accounts once selected. Since the lists are so large, I have made a "Find Me" box that when a user types a character/string into the html input it "finds" the closest match in the select list and highlights it. That works find though, so that I'm not worried about.

    The problem is that I have a little image that when clicked it "unhides" two table cells set to "display: none" with CSS. This works fine in Firefox, but I cannot get it to work in IE. I get the error: "Could not get the display property. Invalid Argument." when I click the image in IE. I know the error pretty much tells me what is wrong in most cases, but I don't understand what I need to do to get it working.

    Here is the function I have:

    Code:
    function hider() {
    
       var hidden1 = document.getElementById("hidden1");
       var hidden2 = document.getElementById("hidden2");
    
       if (hidden1.style.display == 'none') {
          hidden1.style.display = 'table-cell';
          hidden2.style.display = 'table-cell';
       }
       else {
          hidden1.style.display = 'none';
          hidden2.style.display = 'none';
       }
    }
    The table row I have is:

    Code:
    ...
    	  <tr>
    	  <td id="hidden1" name="hidden1" style="display: none;"><span class="bold">Find&nbsp;Me:</span></td>
    	  <td id="hidden2" name="hidden2" style="display: none;"><input size="20" type="text" name="findme" onKeyUp="matchZone();"></td>
    	  </tr>
    ...
    I'm very unsure if how I am going about this is even close to the correct way, so yea, don't laugh at me. :-P

    If anyone could give me a few pointers and help me get this sorted out it would be quite nice and I would appreciate it.

    Thank you for your time,
    -Nedren

  2. #2
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by NedreN
    The problem is that I have a little image that when clicked it "unhides" two table cells set to "display: none" with CSS. This works fine in Firefox, but I cannot get it to work in IE.
    IE has very poor CSS support, and does not understand certain display property values; table-row included. Some other browsers also suffer from this problem, but they are more or less out-dated, now.

    When dealing with inline style sheet declarations, this issue is relatively simple to avoid: hide an element by assigning the string, 'none', and reveal it by assigning an empty string (''). This latter value effectively removes the declaration, so the browser will fall back to the value applied via a style sheet.

    It should be noted that when an element is hidden using a document-wide style sheet, this technique cannot be used, and life can become much harder. However, (on the Web, at least) if an element is to be revealed using a client-side script, it should be hidden by one. In that way, functionality will not be lost should the user be unable to show the missing content.

    Mike

  3. #3
    Join Date
    Mar 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you very much for that explanation.

    One quick question though, do you know how I can alter the elements "display" property with javascript in IE?

  4. #4
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by NedreN
    One quick question though, do you know how I can alter the elements "display" property with javascript in IE?
    In the same way as you have above changing the assigned value as I suggested, though I would also add feature detection:

    Code:
    function hider() {
      var label, control;
    
      if(document.getElementById && (label = document.getElementById('hidden1'))
                                 && (control = document.getElementById('hidden2'))
                                 && label.style && control.style)
      {
        label.style.display = control.style.display
                            = ('none' == label.style.display) ? '' : 'none';
      }
    }
    Mike

  5. #5
    Join Date
    Mar 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    Quote Originally Posted by mwinter
    In the same way as you have above changing the assigned value as I suggested, though I would also add feature detection:

    Code:
    function hider() {
      var label, control;
    
      if(document.getElementById && (label = document.getElementById('hidden1'))
                                 && (control = document.getElementById('hidden2'))
                                 && label.style && control.style)
      {
        label.style.display = control.style.display
                            = ('none' == label.style.display) ? '' : 'none';
      }
    }
    Mike
    Wooo

    Thank you a lot man. For both the actual function, and the indepth response answering my question/problem.

  6. #6
    Join Date
    Feb 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default This was very helpful, thank you!

    The explanation as well as examples are very helpful. My boss will be happy. Thank you very much!

  7. #7
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    this thread was from 2005... we appreciate you looking into old threads to solve your problem but please don't revive threads that are old unless you do not understand something

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
  •