none
Html Div overlay that has a transparent background

    Question

  • What I am trying to achieve an html div floating over a silverlight application but I want the background of the div to show the SL app that is below it. The div contains html text that I want to have appear like it is on the SL app.

    What is happening is the background of the div/iframe/document is appearing white. I tried to set the background-color to transparent for both the div that contains the iframe as well as the html document that is being displayed in the iframe but that didn't have any effect. I tried to add the allowtransparency = true on the iframe but that just made the iframe invisible for some reason.

    Here is some of the code

    <div id="LeftHtmlContainer" style="position:absolute; z-index:1; background-color:transparent;>
       <iframe id="LeftHtmlFrame" scrolling="auto" frameborder="0" src="left.html" width="100%" height="100%"></iframe>
    </div>

    and in the html document that is displayed in the iframe

    <body style="background-color:transparent">

    Not sure what is going on or if there is a better way to do this. The app needs to incorporate legacy html that contains tables and images so parsing/translating to xaml is not an option.
    Michael

     

    Friday, August 01, 2008 5:28 PM

Answers

  • I think the only way to achieve what you want is to use a floating Div to display your HTML content instead of a floating IFrame. Using a Div can make your Silverlight control show through HTML content as the background.

    If you use a floating IFrame,  then any HTML content on your page will be blocked no matter if you set Iframe.background = transparent or not. This is not Silverlight specific.

    Just do this simple test you can see what I mean:

    <body style="background-color:red">              
         <iframe id="Iframe1" style="position:absolute;" src="left.htm" frameborder="0" width="10%" height="10%"></iframe>      

       <div style="position:absolute; width:10%; height:10%; top:100px; left:100px">
            <B>transparent div</B>
       </div>
    </body>

    left.htm:

    <body style="background-color=transparent">
    <B>left page</B>
    </body>

    Saturday, August 02, 2008 1:59 PM
  • Your example still has the "windowless" name attribute wrong. It says "windowsless" ; should be "windowless".

    Saturday, August 02, 2008 4:10 PM

All replies

  • I think your issue is with the iFrame. Have you tried performing the same effect without using an iframe at all? I know they make things a lot easier, but if your application support multiple browsers an iframe is not the best option.

    Friday, August 01, 2008 7:59 PM
  • Here is the code i use and it works fine as far as tranparency is concern, but my real issue is that, my mouse scrolling event inside div does not fire, it only fires when my mouse is on some html text, how can i make sure that my mouse scroll events fires inside whole div, by the way i am using Beta 1.

    Thanks in advance for any suggessions.   

    <body style="height: 100%; margin: 0;">

    <div id="SilverlightControlHost" class="silverlightHost" >

    <form id="form1" runat="server" style="height: 100%;">

    <asp:ScriptManager ID="ScriptManager1" runat="server">

    </asp:ScriptManager>

    <asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/ClassRoom.xap" Version="2.0"

    PluginBackground="Transparent" Width="142%" Height="138%"

    Windowless="true" EnableHtmlAccess="true" />

    <iframe style='visibility:hidden;height:0;width:0;border:0px' ></iframe>

     

     

    <div style="position:absolute; background-color:transparent; overflow :scroll; overflow-x :hidden; width: 764px; height: 327px; z-index: 1; left: 95px; top: 194px"

    id="divAllSection" >

     

    </div>

     

    </form>

    </div>

     

    </body>

    Friday, August 01, 2008 11:21 PM
  • I removed the iframe and placed the content directly in a div but now it does not appear at all - I noticed in one of the replies they used a transparent background property on the silverlight asp.net tag  - is there an equivilent in the object tag? Do I have to set that property?

    thanks
    MIchael

    Saturday, August 02, 2008 9:33 AM
  • Have you tried setting the parameter "isWindowless" to true in the object?

    <param name="isWindowless" value="true" />

     

    Saturday, August 02, 2008 11:18 AM
  • yes - I have it set to true

     

    Saturday, August 02, 2008 11:57 AM
  • Should be:

     <param name="windowless" value="true" />

    Not 

     <param name="isWindowless" value="true" />

    Saturday, August 02, 2008 12:43 PM
  • I knew that, just wanted to keep you guys sharp ;)

    Saturday, August 02, 2008 1:07 PM
  • for completeness - this is what my hosting page has:

       <div id="LeftHtmlContainer" style="position:absolute; z-index:99; background-color:Transparent">
      <iframe id="LeftHtmlFrame" scrolling="auto" src="left.html" frameborder="0" width="100%" height="100%"></iframe>
        </div>

        <div id="RightHtmlContainer" style="position:absolute; z-index:99; background-color:Transparent">
      <iframe id="RightHtmlFrame" src="right.html" scrolling="auto" frameborder="0"  width="100%" height="100%"></iframe>
        </div>

        <div id="silverlightControlHost" style="z-index:0">
     
      <object data="data:application/x-silverlight," type="application/x-silverlight-2-b2" width="100%" height="100%">
       <param name="source" value="ClientBin/IHIBook.xap"/>
       <param name="onerror" value="onSilverlightError" />
       <param name="background" value="black" />
       <param name="windowsless" value="true" />
       <param name="enablehtmlaccess" value="true" />
       
       <a href="http://go.microsoft.com/fwlink/?LinkID=115261" style="text-decoration: none;">
            <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
       </a>
      </object>
      <iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>
        </div>

    Saturday, August 02, 2008 1:13 PM
  • I think the only way to achieve what you want is to use a floating Div to display your HTML content instead of a floating IFrame. Using a Div can make your Silverlight control show through HTML content as the background.

    If you use a floating IFrame,  then any HTML content on your page will be blocked no matter if you set Iframe.background = transparent or not. This is not Silverlight specific.

    Just do this simple test you can see what I mean:

    <body style="background-color:red">              
         <iframe id="Iframe1" style="position:absolute;" src="left.htm" frameborder="0" width="10%" height="10%"></iframe>      

       <div style="position:absolute; width:10%; height:10%; top:100px; left:100px">
            <B>transparent div</B>
       </div>
    </body>

    left.htm:

    <body style="background-color=transparent">
    <B>left page</B>
    </body>

    Saturday, August 02, 2008 1:59 PM
  • Does your LayoutRoot element (first grid or canvas in your xaml) have a backgroundcolor set? Try removing that.

    And for iframe transparency, check out this forum:
    http://www.webmasterworld.com/forum21/12272.htm

    Saturday, August 02, 2008 2:02 PM
  • Your example still has the "windowless" name attribute wrong. It says "windowsless" ; should be "windowless".

    Saturday, August 02, 2008 4:10 PM
  • I feel stupid - the typo was causing the content when I swithced it to a div from an iframe to not display - all seems good in div land now - thanks for all of your help

    - Michael

    Saturday, August 02, 2008 6:23 PM