Basically my problem is the site I am working on has a horizontal drop down menu and I am implementing a flash chart on the page.
When you hover over the menu the items drop down behind the flash chart and are unclickable. Can I get around this somehow?
Make sure you set the wmode to transparent for your flash content.
bgiframe is a jquery plugin that will allow you to do what you are asking; You can do this without jquery (obviously), but the plugin makes it really simple. Technique is basically to add an IFrame around the content you want to show over top of the flash (this also works for hovering content over dropdown lists).
#Fábio Antunes - Who is still wondering here is an example:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/s...rsion=6,0,29,0" width="192" height="298">
<param name="movie" value="flash/template2.swf">
<param name="quality" value="high">
<embed wmode="transparent"> <!--THIS IS NECESSARY TOO-->
<param name="wmode" value="transparent">
<embed src="flash/template2.swf" width="192" height="298" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>
Setting the wmode to transparent/opaque however, won't work if you are implementing an accessible site (which is now a government law). Setting the wmode to transparent/opque will fix the issue of overlay, but will create more issues with regards to accessibility as you can't tab into the flash content, sometimes you can tab into it once, but as you cycle, you won't be able to tab into it again...
Related
Being a relatively new user of flash, I might not use the right "terms" and thus end up confusing you. For that, I apologize in advance. Anyway, I am trying to use this:
http://abowman.com/google-modules/stingray/?edit=true
Widget, as its maker calls it. What I am trying to do is make the background an unspecific amount of blank space - so the the stingray would float over my webpage without obstructing its content. I thought of 2 methods, both of which didn't work;
Change the background image to a large empty .png, and
Simply remove everything that looked background related in the code.
Despite my best, and rather pitiful, efforts, I can get nothing but a big ugly square of white. Any ideas? Oh, here's my code by the way:
<object type="application/x-shockwave-flash" style="outline:none;" data="http://stingraygadget.googlecode.com/svn/trunk/stingray.swf?up_stingrayColor=000000&up_backgroundImage=&up_backgroundColor=FFFFFF&up_stingrayName=Stingray&up_speed=.2&" width="300" height="200">
<param name="movie" value="http://stingraygadget.googlecode.com/svn/ trunk/stingray.swf?up_stingrayColor=000000&up_backgroundImage=http://i.imgur.com/0Id3HHg.png&up_backgroundColor=FFFFFF&up_stingrayName=Stingray&up_speed=.2&"></param>
<param name="AllowScriptAccess" value="always"></param>
<param name="wmode" value="opaque"></param>
<param name="scale" value="noscale"/>
<param name="salign" value="tl"/>
</object>
Thank you!
You can set the background of a flash to tranparent if you wish.
<param name="wmode" value="transparent" />
However this is not supported in all browsers AND I'm not sure if you can do this without saving the .swf-file as a file with transparent background (you should have made it yourself to do this (?))
FYI: isflashdeadyet.com
I used Chrome & Safari browser to view live streaming.
<div style="position:relative; z-index:0;">
<object>
<param name="wmode" value="opaque"></param>
<embed id="SIPCtrl" type="application/xxxxx-plugin" wmode="opaque"></embed>
</object>
</div>
I also try to set like:
<div style="position:relative; z-index:0;">
<object>
<param name="wmode" value="transparent"></param>
<embed type="application/xxxxx-plugin" wmode="transparent"></embed>
</object>
</div>
I have another div to show pop up message. I already set Z-index:1000 but it still doesn't show above the live streaming video (embed plugin). None of those two html could works.
HTML code: http://jsfiddle.net/8C2py/3/
Screenshot:
[Result]: Now is working in Chrome (add iframe), but no luck in Safari browser.
Can anyone tell me my mistake?
Thanks a lot.
Add wmode="opaque" to the object / embed tag parameters and see if it helps.
pretty hard without seeing the entire code....try this
<div style="position:relative; z-index:0;">
on your container div. note: if you set z-index to negative on your container flash won't show up. doesn't look like you are using flash, but i'd avoid it anyways, just in case.
I am using this code to link an embedded .swf file to another page inside an iframe :
<div onmousedown="window.location.href='http://www.pagewhichopens.com'" height=26 width=100>
<object height=26 width=100>
<param name="movie" value="http://www.bcd.com/embeddedfile.swf">
<param name="wmode" value="transparent" />
<embed wmode=transparent allowfullscreen="true" allowscriptaccess="always" src="http://www.bcd.com/embeddedfile.swf" height=26 width=100></embed>
</object>
</div>
But when I cick on the swf the another page opens inside that iframe only which I don't want, I want it to open in the whole browser... which can be done by inserting target="_parent", but where should I put it?
Use top.location to set the location of the top frame or parent.location for the immediate parent. window refers to the current context (inside the frame).
To open some link in a new tab use target="_blank" to achieve this
Here's the problem:
My sister has a website (www.marycookma.com) and it was created using DreamWeaver with layers. I've recently added an swf using Dreamweaver. It will play in Chrome and IE but the layer for the swf is in a different position in Chrome than it is in IE. The spacing is correct in IE.
It is the only page that has this problem. I have tried different code suggestions for adding the swf however the code I am currently using allows the movie to appear and run correctly.
My problem is the spacing around the layer. I don't know why it's any different than other layers except that it has swf code inside it.
Can anyone please point me to the problem? I inherited the website and I am trying to help keep it going but I'm not up to speed on a lot of things.
I tried to post the two images (viewed through Chrome and viewed through IE) but I'm a newbie so it wouldn't let me. :-(
Here is the code I'm using for the swf video:
<div id="Layer22">
<param name="movie" value="FLVPlayer_Progressive.swf" />
<param name="salign" value="lt" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Clear_Skin_3&streamName=TV2012&autoPlay=false&autoRewind=false" />
<embed src="FLVPlayer_Progressive.swf" flashvars="&MM_ComponentVersion=1&skinName=Clear_Skin_3&streamName=TV2012&autoPlay=false&autoRewind=false" quality="high" scale="noscale" width="390" height="400" name="FLVPlayer" salign="LT" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/>
I hope I have included everything that you need. Please let me know if you can tell what the issue it. I very much appreciate the help.
Thank you,
Nancy
I've looked at the page, as for the positioning of your divs/layers they are controlled by the styles for example:
div id="Layer22"
(your player) positioning is controlled by this style:
#Layer22 {
position:absolute;
width:397px;
height:312px;
z-index:26;
left: 289px;
top: 263px;
}
More specifically the top attribute (263px), adjusting top you move the divs/layers up or down. This is true for all Layers in your page.
As for Layer22 with the player if you compare it to the next player in Layer17 there is an iframe in the Layer17 div, if Layer17 behaves maybe you should copy that iframe and use in Layer22.
Hope this helps you some.
I have flash like a background on my page and all content on page is in the html tags witch is over that flash, and that works very nice. A cover div for that flash have a fixed position (position:fixed;) in style, that is important for scrolling feature.
My problem is in following when I try to include additional page, in iframe on the center of current page, and that new page containing some flash object, that object is not not visible in iframe, its here but its above the fixed flash object, if I remove (position:fixed;) from style, it is visible, but my scrolling feature not work as before. What css style could solve the problem?
Have you tried adding
<param name="wmode" value="opaque">
to the <object> tag of the flash element you can't see? That may help.
If you are writing HTML 5 scrolling is not supported for Iframe
as stated before use object the object tag, and set paramaters.
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1000" height="600"><param name="movie" value="mainswf/f_cbt.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="11.0.0.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />