<table>
<tr>
<td>
<div id="dropdownmenu">
Red
Orange
</div>
<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script></td>
</tr>
<tr style="background-color:#FFFFFF; vertical-align:top;">
<td>
<object height="251" width="504">
<param value="Flash.swf" name="movie">
<param value="Transparent" name="wmode">
<embed width="504" height="251" src="Flash.swf"/> //here flash is hiding drop
</object>
</td>
</tr>
</table>
Here flash.swf is hiding the dropdownmenu .I want the dropdown outside the flash but it displaying inside the flash
You don't have the wmode parameter in the embed tag:
<embed width="504" height="251" src="Flash.swf" wmode="transparent" />
The <param based wmode only targets Internet Explorer
Related
I am aware that Flash Player is actualy browser plugin finaly rendered on top of html page, however I hope there is a way to somehow send flash player to background or place div on top of flash.
In this sample code I would like "divPanel" to be displayed over the "flashHeader".
<object id="flashHeader" style="position: relative; top: 0px; left: 0px; z-index:3;" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
width="820" height="255" id="Untitled-1" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="my.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent">
<embed src="my.swf"
quality="high" bgcolor="#ffffff" width="820" height="255" name="Untitled-1" align="middle"
allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
<div id="divPanel" style="width: 100px; height: 100px; background-color: red; position: relative;
top: -50; z-index:4;">
</div>
Change de param wmode to "Opaque". More info
Basically I just want to put new.gif in the top left corner of the row on my table but I want to sit over my flash object (loaditem.swf).
Here is the code I currently have:
<td>
<img src="new.gif">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
height="100" width="100">
<param name="quality" value="high" />
<param name="wmode"/><param name="movie" value="loadItem.swf" />
<embed height="100" pluginspage="http://www.macromedia.com/go/getflashplayer"
quality="high" src="loadItem.swf" type="application/x-shockwave-flash"
menu="false" FlashVars="id=50000" wmode="transparent" width="100"></embed></object>
</td>
<td>Polar Teddy Bear</td>
Also a few images to help see what I need help with:
What I want to achieve:
td {
position: relative;
}
img {
position: absolute;
top: 0; left: 0;
}
I used the following code:
<DIV style="WIDTH: 100%; HEIGHT: 24px" id="_sizing__c_TarPro">
<DIV style="Z-INDEX: 0; POSITION: relative; BACKGROUND: none transparent scroll repeat 0% 0%; HEIGHT: 24px" id="_slot__c_TarPro">
<object id="sl__c_TarPro" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="xxxxxx.xap&xxxxIgnoreNotFound=true"></param>
<param name="onload" value="onSilverlightLoad" />
<param name="onError" value="onSilverlightError" />
<param name="background" value="transparent" />
<param name="windowless" value="true" />
<param name="minRuntimeVersion" value="4.0.50401.0" />
<param name="autoUpgrade" value="true" />
<param name="Culture" value="EN" />
<param name="UICulture" value="EN" />
<param name="initParams" value="xxxxxxxxxxxxxxxxxxxxxxx,
dimension=DIMENSION4,
defaultValue=,
dimensionDescription=,
allowMultipleSelection=TRUE,
allowLeafSelection=TRUE,
allowParentSelection=TRUE,
allowReadAccessSelection=TRUE,
attributeFilter=,
symbolSpec=DIM4SET,
targetVariable=_c_TarPro"/>
width=200,
height=24,
<a href="http://go.microsoft.com/fwlink/?LinkID=149156" style="text-decoration: none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style: none"></img>
</a>
</object>
<input id="_c_TarPro" name="_c_TarPro" style="display:none" value=""/>
</DIV>
</DIV>
Repeat this code for several objects, sometimes these objects are displayed. But sometimes few objects are displayed and others are not displayed after refresh. It is random the number of objects are displayed.
This only happens on IE8 and IE9. (Sorry before I said on IE9 it works well because QA reports that, but I tested on IE9 and see the same issue.)
Anybody has idea?
Thanks,
I doubt this is the cause of your issue, but the width and height that you apply to <param name="initParams"> are declared outside the tag, which might prevent those attributes from being interpreted.
You've got:
<param name="initParams" value="xxxxxxxxxxxxxxxxxxxxxxx,
dimension=DIMENSION4,
defaultValue=,
dimensionDescription=,
allowMultipleSelection=TRUE,
allowLeafSelection=TRUE,
allowParentSelection=TRUE,
allowReadAccessSelection=TRUE,
attributeFilter=,
symbolSpec=DIM4SET,
targetVariable=_c_TarPro"/>
<!-- what are these guys doing outside the tag? -->
width=200,
height=24,
I've got a header where I'm adding a little gradient spacer image, and it's not moving where it needs to be (see red arrow for desired location):
I've tried several different versions of the img tag, and adding an enclosing div either with or without the float:left style, but so far no dice. What am I doing wrong/how do I fix it? Note the gradient spacer image name is header_gradient_spacer.png.
Thanks.
P.S. If you want to see the issue on the site instead, please go to www.momentumnow.biz
<div class="container">
<!-- RK: add a div and width to the top, so elements can't fold on top of each other -->
<div class="header">
<!-- RK: changed class from header to headerLeft, as added a headerRight -->
<div class="headerLeft">
<div style="float:left">
<div id="iPhoneIPad1" style="display:none">
<img src="/mn/images/a-350x120.png" width="350" height="120" alt="Momentum Now">
</div>
<div id="notIphoneIPad1" style="display:inline">
<object class="flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="350" height="120" id="flashHeader">
<param name="movie" value="/mn/images/a-350x120.swf">
<param name="play" value="true">
<param name="loop" value="true">
<!--[if !IE]>-->
<object class="flash" type="application/x-shockwave-flash" data="/mn/images/a-350x120.swf" width="350" height="120">
<param name="play" value="true">
<param name="loop" value="true">
<!--<![endif]-->
<img src="/mn/images/a-350x120.png" alt="Get Adobe Flash player version 9.0.28 or later">
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<!-- RSK added type attribute to script tag -->
<script type="text/javascript">
if ((navigator.userAgent.match(/iPad/i) != null) || (navigator.userAgent.match(/iPhone/i) != null) || (navigator.userAgent.match(/iPod/i) != null)) {
document.getElementById("iPhoneIPad1").style.display = "inline";
document.getElementById("notIphoneIPad1").style.display = "none";
}
</script>
</div>
<div style="float:left">
<img src="/mn/images/header_gradient_spacer.png" width="25" height="120" alt="na" />
</div>
</div>
<!-- RK: Added second Flash Header for the right side of top -->
<div class="headerRight" >
<div id="iPhoneIPad2" style="display:none">
<img src="/mn/images/HeaderRightFlash.png" width="370" height="100" alt="Momentum Now">
</div>
<div id="notIphoneIPad2" style="display:inline">
<object class="flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="370" height="100" id="flashHeader2">
<param name="movie" value="/mn/images/HeaderRightFlash.swf">
<param name="play" value="true">
<param name="loop" value="true">
<!--[if !IE]>-->
<object class="flash" type="application/x-shockwave-flash" data="/mn/images/HeaderRightFlash.swf" width="370" height="100">
<param name="play" value="true">
<param name="loop" value="true">
<!--<![endif]-->
<img src="/mn/images/HeaderRightFlash.png" alt="Get Adobe Flash player version 9.0.28 or later">
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<script type="text/javascript">
if ((navigator.userAgent.match(/iPad/i) != null) || (navigator.userAgent.match(/iPhone/i) != null) || (navigator.userAgent.match(/iPod/i) != null)) {
document.getElementById("iPhoneIPad2").style.display = "inline";
document.getElementById("notIphoneIPad2").style.display = "none";
}
</script>
<p class="affiliate" align="right">Affiliate Care Members Only</p>
</div>
<!-- RK: moved this after the headerRight, as that's what's needed to make it span the difference of the left and right header.
Also, moved 'Affiliate Care Members' to next div section -->
<div class="headerCenter">
<p class="headerCenter">Inspiring Movement. <br /><br /> Revealed by outstanding results.</p>
</div>
<br style="clear:both; line-height: 0" />
</div>
<div class="mainnav">
Because the div that contains the flash and image has fixed width which is not enough to have both in row, it puts the gradient image below. To fix the problem just remove the width from div.headerLeft in style.css
I am having a problem in positioning the div on the flash object... the css for the div is:
background-color: red;
border: 1px solid;
height: 100px;
left: 200px;
opacity: 0.5;
position: absolute;
top: 234px;
width: 100px;
z-index: 1000;
The position is OK when the opacity is 1... BUT it creates the problem when the opacity is less than 1 then it shows itself on the back of the flash object...
Remember the WMODE of the flash object
is set to TRANSPARENT...
Any solution...?
The problem is solved... Following is the solution... BUT first i want to mention the code which produced the problem...
<object align="" width="100%" height="200" id="charts" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param value="transparent" name="wmode">
<embed align="" width="100%" height="200" salign="TL" scale="noscale" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" swliveconnect="true" name="charts" style="background-color: rgb(230, 230, 230);" bgcolor="#E6E6E6" quality="high" src="/charts.swf?library_path=/charts_library&xml_source=/chart&license=">
</object>
AND now the code which removed the problem... Just add the wmode to the emebed tag also...
<object align="" width="100%" height="200" id="charts" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param value="transparent" name="wmode">
<embed align="" width="100%" height="200" salign="TL" scale="noscale" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" swliveconnect="true" name="charts" style="background-color: rgb(230, 230, 230);" bgcolor="#E6E6E6" quality="high" src="/charts.swf?library_path=/charts_library&xml_source=/chart&license=" wmode="transparent">
</object>