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

Container lies beneath Flash Object, not above

Expand Messages
  • dl_lists
    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
    Message 1 of 6 , Sep 3, 2006
    • 0 Attachment
      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 ..

      http://developer.yahoo.com/yui/container/overlay/index.html
      http://developer.yahoo.com/yui/container/module/index.html

      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>
      </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");
      myModule.render();
      </script>
    • Chadwick Cole
      The trick to having an element above your Flash object lies in the and tags of the html file. Even if your target element has a higher z-index
      Message 2 of 6 , Sep 3, 2006
      • 0 Attachment
        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">
        </embed>
        </object>

        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.

        HTH
        Wick

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

        http://developer.yahoo.com/yui/container/overlay/index.html
        http://developer.yahoo.com/yui/container/module/index.html

        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>
        </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");
        myModule.render();
        </script>


      • dl_lists
        Thanks for the tips .. I do not use the Macromedia default method for embedding Flash .. I prefer to use SWFObject.js for all my Flash apps .. SWFObject in
        Message 3 of 6 , Sep 3, 2006
        • 0 Attachment
          Thanks for the tips ..

          I do not use the Macromedia default method for embedding Flash ..

          I prefer to use SWFObject.js for all my Flash apps .. SWFObject in
          fact renders into a div container with its own CSS.

          This 3rd party embed script is also endorsed by Adobe.com.

          http://blog.deconcept.com/swfobject/

          http://www.adobe.com/devnet/flash/articles/swfobject.html


          But, following your tip I did add the optional SWFObject parameter ..

          so.addParam("wmode", "transparent");


          .. this did not yield results.
          Overlay container is still hidden behind Flash object.

          I tried forcing the z-index for the Flash div to z-index = -1:

          This worked in IE browser (the yui container was now above the Flash
          object) , but did not work in Firefox 1.5 (in fact no Flash Object
          was visible).

          I changed the z-index to 0 instead of -1 and this brought back the
          Flash object into view in both browsers but with the yui container
          still behind the flash object in both IE and Firefox 1.5.

          So it appears that Firefox does not accept negative z-index?

          The plus side of this story is that I now have a conventional iframe
          overlaying the Flash object (after your suggested changes in wmode
          and z-index).

          ....

          I tried yui Overlay to achieve this, but having now played with yui
          I would like to get the the bottom of why it does not work in IE and
          Firefox.

          Where is the z-index set in the CSS files? container.css or
          module.css?

          i.e. your point .. "make sure that <div> has a lower z-index then
          your overlay" .. where/how is z-index of overlay container set?

          I tried changing .panel class .. z-index: 2: but that did not
          help.

          ...

          Also back to my second question .. how to dynamically set other
          container properties such as x, y?
        • darklight3d
          i had the same problem, got it to work with so.addParam( wmode , transparent ); and so.addParam( wmode , opadque ); though. weird that you didn t
          Message 4 of 6 , Nov 16, 2006
          • 0 Attachment
            i had the same problem, got it to work with so.addParam("wmode",
            "transparent"); and so.addParam("wmode", "opadque"); though. weird
            that you didn't


            --- In ydn-javascript@yahoogroups.com, "dl_lists" <dl.lists@...> wrote:
            >
            > Thanks for the tips ..
            >
            > I do not use the Macromedia default method for embedding Flash ..
            >
            > I prefer to use SWFObject.js for all my Flash apps .. SWFObject in
            > fact renders into a div container with its own CSS.
            >
            > This 3rd party embed script is also endorsed by Adobe.com.
            >
            > http://blog.deconcept.com/swfobject/
            >
            > http://www.adobe.com/devnet/flash/articles/swfobject.html
            >
            >
            > But, following your tip I did add the optional SWFObject parameter ..
            >
            > so.addParam("wmode", "transparent");
            >
            >
            > .. this did not yield results.
            > Overlay container is still hidden behind Flash object.
            >
            > I tried forcing the z-index for the Flash div to z-index = -1:
            >
            > This worked in IE browser (the yui container was now above the Flash
            > object) , but did not work in Firefox 1.5 (in fact no Flash Object
            > was visible).
            >
            > I changed the z-index to 0 instead of -1 and this brought back the
            > Flash object into view in both browsers but with the yui container
            > still behind the flash object in both IE and Firefox 1.5.
            >
            > So it appears that Firefox does not accept negative z-index?
            >
            > The plus side of this story is that I now have a conventional iframe
            > overlaying the Flash object (after your suggested changes in wmode
            > and z-index).
            >
            > ....
            >
            > I tried yui Overlay to achieve this, but having now played with yui
            > I would like to get the the bottom of why it does not work in IE and
            > Firefox.
            >
            > Where is the z-index set in the CSS files? container.css or
            > module.css?
            >
            > i.e. your point .. "make sure that <div> has a lower z-index then
            > your overlay" .. where/how is z-index of overlay container set?
            >
            > I tried changing .panel class .. z-index: 2: but that did not
            > help.
            >
            > ...
            >
            > Also back to my second question .. how to dynamically set other
            > container properties such as x, y?
            >
          • DL
            ... Thanks, but after posting in frum, I got it to work some time back by adding (as you suggest) ... so.addParam( wmode , transparent ); and also writing the
            Message 5 of 6 , Nov 16, 2006
            • 0 Attachment
              On 16 Nov 2006 at 15:20, darklight3d wrote:

              > i had the same problem, got it to work with so.addParam("wmode",
              > "transparent"); and so.addParam("wmode", "opadque"); though. weird
              > that you didn't

              Thanks, but after posting in frum, I got it to work some time back by adding (as you suggest) ...

              so.addParam("wmode", "transparent");

              and also writing the Flash content into a YUI container (in OverlayManager example), like so (note the id added and a custom css class per container).

              <div class="swfobject_container" id="swfobject_container">
              <div class="swfobject_hd" id="swfobject_hd">SWFObject header here</div>
              <div class="swfobject_bd" id="swfobject_bd">SWFObject body here</div>
              <div class="swfobject_ft" id="swfobject_ft">SWFObject footer here</div>
              </div>

              This allows Flash SWFObjects to be written (optionally) into all hd, bd, and ft containers.

              But usually just the bd container is sufficient for Flash content, with HTML in hd and ft.

              Then all the standard YUI controls (including HTML overlaying Flash) can be applied to the SWFObject container(s).

              On the other hand, Flash toolbars can be rendered in hd, and ft containers, with HTML content in bd (in an embedded iframe).  Useful for "skinning" YUI panels with Flash content instead of *.gif background images.

              DL
            • Ted Drake
              You can fix the issue by defining your flash movie as transparent. However, if your flash movie contains content, it will be invisible to screen readers. Even
              Message 6 of 6 , Nov 16, 2006
              • 0 Attachment

                You can fix the issue by defining your flash movie as transparent. However, if your flash movie contains content, it will be invisible to screen readers. Even if you are using the UFO library to provide plain html to those with js disabled and/or  and the wrong version of flash installed.  Wmode transparent tells the screen reader, this flash movie is fluffy decorations, you don’t need to worry about it.

                 

                We created a workaround for this on Yahoo! Tech (http:tech.yahoo.com)  when we first launched with a flash-based feature. We had to declare wmode:transparent to solve a conflict with a container object.  I wrote a short description of how we solved it here:

                 

                http://www.last-child.com/make-flash-accessible-to-screen-readers-in-transparent-window-mode/

                 

                Ted

                Yahoo! Tech

                www.last-child.com

                 


                From: ydn-javascript@yahoogroups.com [mailto: ydn-javascript@yahoogroups.com ] On Behalf Of DL
                Sent: Thursday, November 16, 2006 8:34 AM
                To: ydn-javascript@yahoogroups.com
                Subject: Re: [ydn-javascript] Re: Container lies beneath Flash Object, not above

                 

                On 16 Nov 2006 at 15:20, darklight3d wrote:

                 

                > i had the same problem, got it to work with so.addParam("wmode",

                > "transparent"); and so.addParam("wmode", "opadque"); though. weird

                > that you didn't

                 

                Thanks, but after posting in frum, I got it to work some time back by adding (as you suggest) ...

                 

                so.addParam("wmode", "transparent");

                 

                and also writing the Flash content into a YUI container (in OverlayManager example), like so (note the id added and a custom css class per container).

                 

                <div class="swfobject_container" id="swfobject_container">

                <div class="swfobject_hd" id="swfobject_hd">SWFObject header here</div>

                <div class="swfobject_bd" id="swfobject_bd">SWFObject body here</div>

                <div class="swfobject_ft" id="swfobject_ft">SWFObject footer here</div>

                </div>

                 

                This allows Flash SWFObjects to be written (optionally) into all hd, bd, and ft containers.

                 

                But usually just the bd container is sufficient for Flash content, with HTML in hd and ft.

                 

                Then all the standard YUI controls (including HTML overlaying Flash) can be applied to the SWFObject container(s) .

                 

                On the other hand, Flash toolbars can be rendered in hd, and ft containers, with HTML content in bd (in an embedded iframe).  Useful for "skinning" YUI panels with Flash content instead of *.gif background images.

                 

                DL

              Your message has been successfully submitted and would be delivered to recipients shortly.