Jump to content

div is above swf


rondog

Recommended Posts

Ok I know all about window modes already so I don't think this is the issue here. I have a flash video player that I made embedded in HTML. The flash player has a button to turn the "lights off" which basically does what HULU's player does. Its one div that is 100%x100% and fades out all of the other HTML so the SWF is on focus.

 

In FF and IE, the SWF is above the overlay div. In safari, the overlay div is above my SWF. The SWFs wmode is set to window (default is window).

my css:

html, body {
height:100%;
padding:0px;
margin:0px;
}
.dimm
{
width:100%;
height:100%;
position:fixed;
top:0;
display:block;
background:#000;
}

 

my html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>true_index</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="inc/css/main.css" media="screen" />
<script type="text/javascript" src="inc/js/coursefunctions.js"></script>
<script type="text/javascript" src="inc/js/SCORM_API_wrapper.js"></script>
<script type="text/javascript" src="inc/js/swfobject.js"></script>
<script type="text/javascript" src="inc/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="inc/js/lights.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {};
params.bgcolor = "#39566F";
params.allowfullscreen = "true";
params.wmode = "window";
var attributes = {};
attributes.id = "swfplayer";
swfobject.embedSWF("player.swf", "player", "800", "370", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>
</head>
<body>
<div id="player">
<a href="http://www.adobe.com/go/getflashplayer"> <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /> </a>
</div>
<div class="dimm" style="display: none;" onclick="toggleLights('dimm');"></div>
</body>
</html>

 

any idea why safari is showing the div on top of the SWF?

Link to comment
Share on other sites

I would do one of two things. The first would be to put the player div inside the dimm div. Either that or put the dimm div in the HTML above the player div.

 

But the first option will work better I think.

 

I ended up putting a z index on the swf and the dimm div and fixed it that way

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.