CSS Display Property

[NedreN]

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:

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:

...
	  <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

[mwinter]

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

[NedreN]

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?

[mwinter]

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:

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

[NedreN]

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:

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.

[yhtomitn64]

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

[boogyman]

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