Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

CSS & HTML: Display div on top of flash object

Bottom of Page

1 to 13 of 13

  1.  
    • CommentAuthorskisigner
    • CommentTimeNov 28th 2006 edited
     permalink
    hello,
    I need to display a div that may overlap or float on top of a flash object and Im having some real problems with this. The floating div displays beneath the flash object. Its like the old problem with displaying an iframe over a select element.

    I know one way is setting the flash object param to transparent, but I have no control over the flash object code. Its a floating div in an iframe and the src of the iframe might be any site out there. It needs to be done completely with js or css. or a combination of the two.

    I really hope this is possible. The outlook I have found searching with google is very grim.
    • CommentAuthorPettyRider
    • CommentTimeNov 28th 2006 edited
     permalink
    position the flash absolutely and set its z-index to -1
    •  
      CommentAuthorJan Meeus
    • CommentTimeNov 29th 2006 edited
     permalink
    Hmm, since you cant change the wmode 'cause of the external flash objects I'd try PettyRider's idea.
    Good luck.
    • CommentAuthorPettyRider
    • CommentTimeNov 29th 2006
     permalink
    My idea is no guarantee, but I've seen this method in the past and it appeared to be done with only those two CSS rules. I never really dug through the JS though, so I could be missing a few tricks.
    •  
      CommentAuthorJohnRiv
    • CommentTimeNov 29th 2006 edited
     permalink
    taken directly from the SWFObject Homepage:

    SWFObject makes it very easy to add any extra parameter you may need:

    var so = new SWFObject("movie.swf", "mymovie", "200", "100%", "7", "#336699");
    so.addParam("wmode", "transparent");
    so.write("flashcontent");
    • CommentAuthorskisigner
    • CommentTimeNov 29th 2006 edited
     permalink
    I think we got it figured out - thanks for the help
    • CommentAuthorcpalenshus
    • CommentTimeJan 11th 2007
     permalink
    skisigner, what was your solution?

    I'm having the exact same problem that you were facing and using a z-index of -1 on the iframe or the div containing the iframe doesn't help.
    • CommentAuthornavdeep
    • CommentTimeJan 17th 2007
     permalink
    Good
    • CommentAuthortimo
    • CommentTimeJul 2nd 2007
     permalink
    Can anybody tell me the solution to this. I'm having the same problem and I just can't figure it out
  10.  permalink
    The solution is that the Flash wmode paramater must be set to either "opaque" or "transparent". The actual method of doing this would depend on how the SWF is embedded in your page (i.e., SWFObject-style JS injection, object tag, etc.). Screwing around with z-levels won't make any difference without this parameter being set correctly.
  11.  permalink
    #divid {position:relative; z-index:1;}

    #flashContent {position:absolute; z-index:0;}
    • CommentAuthorunata
    • CommentTimeOct 15th 2009
     permalink
    yes, Z-index thing does work, just put the div with links HIGHER IN Z-INDEX of div with transparent Flash and not below it.
  13.  permalink
    To confirm the solution,

    Yes you need to set your position on the div to relative, absolute or fixed and then set the z-index greater to the z-index of the flash content. That's the easy part and the part that we already know.

    The last thing to do is set the wmode of the flash content to transparent. In my case, I found the wmode variable in the HTML generated by Flash CS3. It was set to 'window'. I changed it to 'transparent' and bam.

    You might be able to change this in Flash publish settings so that you never have to worry about it again. In this case, knowing javascript, css and html aren't enough. You need to know something about how flash is implemented.

1 to 13 of 13

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page