[Solved] Menu Item z-index and Flash Control Issue

[Hardy Wang]

Hi all,

I used MVC Menu control to render my menus, but I also have a Flash control right below the menu. Everytime when I pull the menu item down, they are always behind the Flash control.

I tried to nest Flash control inside a <div> and set CSS of the DIV to have z-index: 100, it does not see to work. I also tried to nest entire menu inside a div and set style to have z-index: 0, it does not work.

Anybody has clue, what shall I do?

Hardy

[Dimo]

Hello Hardy,

You need to set the wmode property of the Flash movie to transparent. For example:

    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
        <param name="movie" value="..." />
        <param name="wmode" value="transparent" />
        <object type="application/x-shockwave-flash" data="...">
            <param name="wmode" value="transparent" />
        </object>
    </object>

If you are using SWFObject or another Javascript library for showing the Flash, you should find the correct way to set the wmode property, e.g.

    swf = new SWFObject(..........);
    swf.addParam("wmode", "transparent");


Generally, there is no need to define specific z-index styles, but if you already use them for other reasons, you must ensure that the Menu component is in a higher stacking context than the Flash movie.

http://blogs.telerik.com/atanaskorchev/posts/09-07-02/z-index_demystified.aspx


Best wishes,
Dimo
the Telerik team

[Hardy Wang]

Thanks, it works!

[Richard]

I'm having the same problem but the flash component is on a YouTube page via an iframe:

<iframe width="270" height="222" src="http://www.youtube.com/embed/1NKi4O-Al20" frameborder="0" allowfullscreen></iframe>

How can I get the menu above to show on top of the YouTube video?

[Dimo]

Hello Richard,

Since you don't have access to the flash movie inside the iframe, the only thing you can do in this case is to hide the iframe when the Menu opens.

Alternatively, you can contact YouTube for additional advice.

.ClientEvents(ev => ev.OnOpen("hideFrame").OnClose("showFrame"))

<iframe id="youtubeFrame"></iframe>

function hideFrame(e) {
    $("#youtubeFrame").css("visibility", "hidden");
}

function showFrame(e) {
    $("#youtubeFrame").css("visibility", "");
}

Greetings,
Dimo
the Telerik team

[Richard]

Thanks Dimo,

I've decided to just move the movie down so it doesn't interact with the video at all.  Having it disappear when dropping the video just didn't seem like a good idea.  I'll contact YouTube and post back here if I find out anything useful.

All the best,

Richard.

[Dimo]

Hi Richard,

OK, let us know if there is an alternative workaround related to the YouTube video itself.

Kind regards,
Dimo
the Telerik team

[Krasimir]

Hello Telerik team,
I have similar problem not with a flash content but with Silverlight content. Can you give me a hint how can I resolve it?

[Dimo]

Hi Krasimir,

Please refer to

http://stackoverflow.com/questions/782415/displaying-html-divs-over-silverlight

http://duncanmackenzie.net/Blog/overlaying-html-over-silverlight


Best wishes,
Dimo
the Telerik team

[Krasimir]

Thanks, it works!

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