Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

drop down menu shows behind flash banner


Reply


2 Posts   2462 Views

Avatar
bit99

Community Member, 24 Posts

28 September 2010 at 6:45am

Edited: 28/09/2010 8:00am

Hi,

I know this is probably not silverstripe specific, but anyhow,

I am using the superfish dropdown menu with silverstripe , and I have a flash banner-slideshow on the home page,

In firefox everything works great, however in safari (win) and ie the dropdown menu goes behind the flash banner,
I initially had to remove the rounded corners in the css of the dropdown portion to get it going on top in firefox.

I used this great silverstripe tutorial to incorporate flashcontent (including alt content for ipads etc.) http://www.ssbits.com/embed-flash-content-using-swfobject/

and,,, what else, I have a high z-index for the flash as well as a higher z-index for the menu. the menu gets read in before the flash gets read in.
The flash slideshow sits ontop of a slideshow-background-image (which the dropdown goes on top of fine, just the flash portion that is the problem).

I also tried this - setting position relative for the containing divs; : http://webdemar.com/webdesign/superfish-jquery-menu-ie-z-index-bug/

reference:
http://www.livestockgentec.com/

would be great if anyone has had the same problems and knew whats missing, and when I get better at silverstripe hopefully I can pay it back and help someone else out.

thanks,
and thanks for silverstripe!

Avatar
bit99

Community Member, 24 Posts

28 September 2010 at 8:24am

ok,
I found the solution, and I am sure other people will or have run into same problem, so I am posting,

The solution was here:
http://simonbingham.posterous.com/problem-with-superfish-menu-being-hidden-behi
i.e. you have to set window mode to transparent for the flashcontent for the superfish dropdown menu to not be hidden underneath the flash.

so when using the great tutorial from ssbits on how to incorporate flashcontent (and alt content) into silverstripe - it will give you this code:

            /* <![CDATA[ */
            swfobject.embedSWF(
            "/assets/myflashfile.swf",
            "FlashContainer",
            "950", "310",
            "9.0.0",
            "mysite/javascript/lib/expressInstall.swf"
            );
            /* ]]> */

You then have to add a flash variable to make it transparent and it should end up like this:

var flashvars = {};
            var params = {wmode:"transparent"};
            var attributes = {};
            /* <![CDATA[ */
            swfobject.embedSWF(
            "/assets/myflashfile.swf",
            "FlashContainer",
            "950", "310",
            "9.0.0",
            "mysite/javascript/lib/expressInstall.swf",
            flashvars, params, attributes);
            /* ]]> */