Prevent reloading of the object tag when changing its display (style display property)

Question

I have a built-in silverlight control on my html page using an object tag. I have to show and hide the parent of the object tag by changing the display property of the parent tag. I need to do this because the page layout has a tab, i.e. the user can switch between tabs. To display a tab, you must hide the contents of the previous tab and show the new content. The following is an object tag code:

<div id="slControlDiv" style="width:0px; height:0px;">
    <object id="slobj" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100" height="25" style="display: block;">
      <param name="source" value="ILCFileUploader.xap"/>
      <param name="onError" value="onSilverlightError" />
      <param name="background" value="white" />
      <param name="minRuntimeVersion" value="4.0.50826.0" />
      <param name="autoUpgrade" value="true" />
    </object>

When I hide the parent object of an object tag, that is, change the display to none, and then show it back, changing the display to lock or empty, the silverlight control reloads.

Is there a way to prevent it from rebooting? I tried changing the visibility to minimize and then to visible, but this only works in IE8 and Firefox. In other browsers, the item still continues to occupy space, although it is hidden. I want the control to also free up space when it's hidden.

Thank you and welcome, Nadim Ullah

Answer 1

I found that setting "visibility = hidden | show" of the containing element (such as a div) allows you to hide | showing the contained element of the object without rebooting when re-showing. Using the "offset" method also works (absolutely positioning it from the visible area of ​​the document).