Loading ...
Sorry, an error occurred while loading the content.

4543Re: [ydn-javascript] Container lies beneath Flash Object, not above

Expand Messages
  • Chadwick Cole
    Sep 3, 2006
      The trick to having an element above your Flash object lies in the <object> and <embed> tags of the html file. Even if your target element has a higher z-index it will always appear below the Flash object UNLESS you specify wmode as transparent in the object and embed tags. For the object tag use a <param> tag to set the wmode to transparent. In the embed tag simply append it as an attribute wmode="transparent". See below:

      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" name="test" width="90%" height="90%" id="test">
      <param name="movie" value="assets/flash/chart1.swf" />
      <param name="quality" value="high" />
      <param name="wmode" value="transparent">
      <embed src="assets/flash/chart1.swf" width="90%" height="90%" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="test" wmode="transparent">

      Remember for it to work in all browsers you must set it in both the <object> and <embed> tags.

      One more thing ... it is also a good idea to place your Flash element inside a <div> container and make sure that <div> has a lower z-index then your overlay.


      On Sep 3, 2006, at 12:30 PM, dl_lists wrote:

      I am just starting to experiment with YUI .. Overlay Component.

      I need to dynamically generate containers which float above Flash
      objects in same page, and which can be positioned dynamically.

      I have followed the instructions here ..


      and I have a first simple container displayed on the same page
      containing Flash in div container.

      But .. the container is positioned underneath the Flash object, not
      above as required.

      (1) How to force container z-index so that container is always
      positioned above Flash?

      (2) Where is it explained how to dynamically change container CSS
      attributes .. x, y, top, left
      I tried this ..(note: two attempts of using "var myModule =
      new ... ", one with attributes added as second argument)

      <!-- Yahoo UI -->
      <div id="myModule">
      <div class="hd"></div>
      <div class="bd"></div>
      <div class="ft"></div>

      <script type="text/javascript">
      // var myModule = new YAHOO.widget.Module("myModule");
      var myModule = new YAHOO.widget.Module("myModule", {visible:true,
      x:50, y:100} );
      myModule.setHeader("This is my header content");
      myModule.setBody("This is my body content");
      myModule.setFooter("This is my footer content");

    • Show all 6 messages in this topic