When Object tag is display:none, method fails, but when visibility:hidden works

I have a span tag as parent to an object tag that loads a Java class. The span tag has style display:none. When a reference to the object tag is retrieved in Javascript and a method of this object tag is called, it fails.

But, if the span tag does not have display:none set OR visibility:hidden, then it works.

Why is this?

<span style='display:none'>
  <object type="application/x-java-applet" width="100" height="100" name="my_class" id="my_class">
    <param name="codebase" value="http://www.whatever.com/class">
    <param name="code" value="myclass.class">
    <param name="mayscript" value="yes">
    <param name="scriptable" val开发者_如何学Goue="true">
 </object>
</span>

This is basic styles (CSS), a hidden object is still included in the page, while an element with display:none is not even included.

Solution:

• Make the applet around 10x10 pixels in size
• Put it in some innocuous part of the web page (e.g. at the end)
• Use visibility:hidden to hide it from view. Note that is visibility, not display!

Larry.

The reason is that when using 'display:none' browser renders the page as though the element was not there at all. Although you can get the referrence to the 'object' element in DOM, but object itself hasn't been created yet. On the other hand 'visibility:hidden' only hides the element, but it still takes up space and layout.

The best solution to not break page layout is to make your element absolutely positioned and take it in some place outside the user sight (e.g. left:-1000px)