I bind a mouseover and mouseleave events to the #container div and the html is as follows:
<div id="container">
test
<div class="zclip" id="zclip-ZeroClipboardMovie_2" style="width: 110px; height: 31px; left: 75px; top: 85px;"><embed width="110" height="31" align="middle" wmode="transparent" flashvars="id=2&width=110&height=31" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowfullscreen="false" allowscriptaccess="always" name="ZeroClipboardMovie_2" bgcolor="#ffffff" quality="best" menu="false" loop="false" src="/static/js/zclip/ZeroClipboard.swf" id="ZeroClipboardMovie_2">
</div>
</div>
The problem is, everytime my mouse enters the .zclip div and then leave, it will also trigger the mouseleave event of the #container div even if my mouse is still in the container. There is no such problem for the anchor tag inside the #container. I don't know if it has something to do with the embed element inside the .zclip div. Can someone give me some idea on this?
Just use event.stopPropagation() in your mouseleave event handler
.stopPropagation()
For my website I have an image showing a screen. Inside that screen I have moved an embeded youtube video inside that screen. So the embed is on top of the image. I can get the embeded video into the correct place using this:
<div style="position:relative">
<img src="screen.png" />
<div style="position:absolute; left:0px;top:0px;">
<embed src="http://www.youtube.com/embed/qoSEzTpbxP4" width="310" height="210" allowfullscreen=true"></embed>
</div>
</div>
I want the entire thing to be centered, however if I surround this with tags then obviously nothing centers because of the position; the embed stays 544 from the left of the window, not from the left of the image. Is there a way of making the embed move to match the images centered postion?
(NB: I'm aware that I should be using a seperate CSS doc for all styles, but I'm not interested in that right now, I just want to get it working then I might encapsulate styles into a seperate place later)
try this
<div style="margin: 0px auto; text-align: center; width: 500px; position: relative;">
<img src="screen.png">
<div style="position: absolute; z-index: 1; margin: 0px auto; text-align: center;">
<embed width="425" height="349" allowfullscreen="true"" src="http://www.youtube.com/embed/qoSEzTpbxP4">
</div>
</div>
try this... good looking video frame !!!
<object height="360" width="580" id="video_MT6UDIruUkU" type="application/x-shockwave-flash"
data="http://www.youtube.com/apiplayer?enablejsapi=1&version=3">
<param value="always" name="allowScriptAccess">
<param value="transparent" name="wmode">
<param value="video_id=MT6UDIruUkU&playerapiid=MT6UDIruUkU"
name="flashvars">
<param value="http://www.youtube.com/apiplayer?enablejsapi=1&version=3"
name="movie">
</object>
<div class="controlDiv play"></div>
Updated this as I found it is not necessarily nested IFRAMEs, but merely the presence of Flash within the IFRAMEd document that will break position:fixed (also within the IFRAME).
This is unreal. On Safari (Mac):
Flash
...within an IFRAME (e.g., a modal window, Fancybox, etc.)
...will "break" any "position:fixed" elements also within that IFRAME.
Here's a perfect example: http://jsfiddle.net/6GP2A/ Note that we have:
An IFRAME that contains Flash (YouTube video).
within another IFRAMEd doc (jsfiddle IFRAMEs the result)
Please note that the fact that the video is itself IFRAMEd is a red herring. If the Flash were merely an OBJECT tag sans IFRAME you would run into the same issue.
If you open this in Chrome, it will work as expected. The grey "hello I am fixed" DIV (which is postion:fixed) will stay fixed to the bottom.
In Safari, the grey DIV will slide as you scroll the page.
Arrrrgh! Any advice? Countless searches have been fruitless. Thank you!
I encountered the same problem, but we cannot refuse to frames.
So I investigate this problem and I found some solution (I guess):
When there is a div with nested flash in necessary frame and the style of the div with "position: relative; z-index: -1;" then elements with "position: fixed" in the frame looks fine.
For example
<html>
<head>
<style>
.menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 40px;
}
.footer {
width: 100%;
height: 40px;
position: fixed;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<frameset rows="20,*">
<frame>...</frame>
<frame>
<div class="menu">Header</div>
<!-- Some content here -->
<object width="440px" height="220px">
<param value="opaque" name="wmode">
<param value="http://youdomain.com/you_flash.swf" name="movie">
<embed width="440px" height="220px" type="application/x-shockwave-flash" src="http://youdomain.com/you_flash.swf">
</object>
<!-- Some content here -->
<div style="position: relative; z-index:-1;">
<object width="10px" height="10px">
<param value="opaque" name="wmode">
<param value="http://youdomain.com/fake_flash.swf" name="movie">
<embed width="10px" height="10px" type="application/x-shockwave-flash" src="http://youdomain.com/fake_flash.swf">
</object>
</div>
<div class="menu">Footer</div>
</frame>
</frameset>
</body>
</html>
One div with a flash is enough. All the other may be as is.
One remark - you wouldn't be able to click on the flash in this div. I wrote a script which will dynamically add the div with empty flash to Safari on Mac.
Hope this is helpful.
May the Force be with you.
I don't know if this exact question has been asked, if so I am sorry. I can say in my defense that i've checked up about 10 question with a familiar title.
The problem is this:
<div id= "">
<object>
<embed>
<img src="" />
</embed>
</object>
</div>
One of the containers object or embed are positioned absolutely in the body tag. Depending on which browser. For IE 6 7 8 embed is potioned absolutely. For others the object.
Trial and error brought me to this solution and it works very good in all browsers thank god.
Now i am adding a button, which is represented by IMG tag, and i also want to position it absolutely (that is relativly of my movie). In all browsers (except IE 6 7 8 ) this works with the following CSS:
#closeButton
{
position:absolute;
right: 10px;
top: 10px;
z-index:400;
/*background: none;*/
/*display:none;*/
}
Since my object is hidden until some point, the button is also hidden in it/ with it.
Not in IE as you may guess. There, not only the button is visible, but relative of the WINDOW!
Meaning miles away from the movie.
I added a sort of a hack an use JS to hide/show the button the CSS now is:
#closeButton
{
position:absolute;
right: 10px;
bottom:55px;
z-index:400;
background: none;
display:none;
}
And it took the right place and hides and shows with the movie. Guess what BUT, it gets tricky to click it=) Because whenever i put the mouse over the button, movie triggers an event onRollOut and they both dissapear =) hilarious
QUESTION: Why does my button position relative of the window? Or maybe the problem is hiding some place else?
PS I am using relative/absolute positioning to emulate crossbrowser fixed positioning so i can't give it up. But the button's behabiour is unacceptable=) And it will be tricky to place it directly inside the movie, i hope it could be done without it. Although it's an easier way. but more work for every movie.
I'll repeat the problem is IE-only, in all other browser the button behaves.
The whole code
http://pastebin.com/fZvWyVsF
http://pastebin.com/zJBhNeVB
Update:
I tried following advice about positioning the wrapper, with some modification. Now I have this code
<div id="bigBanner">
<OBJECT width="100%" height="90">
<PARAM NAME="quality" VALUE="high">
<PARAM NAME="wmode" VALUE="opaque" >
<PARAM name="AllowScriptAccess" VALUE="always" >
<EMBED src="big.swf" width="100%" height="90" wmode="opaque" quality="high" AllowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED>
<noembed></noembed>
</OBJECT>
<div id="closeButton"><img src="close-box.jpg" onClick = "HideAll();" title="Закрыть"/></div>
</div>
Having those styles:
http://pastebin.com/dCULjHva
It shows the button really well. But again it (button) keeps "running away in IE".
Instead of absolutely positioning the object/embed, place it in a wrapper and absolutely position said wrapper. I'd also place the button in the wrapper so you can position it relatively, but still benefit from the absolute positioning of the outer container.
<div id= "wrapper">
<object>
<embed>
<img src="" />
</embed>
</object>
<div id="button">foo</a>
</div>
#wrapper{position: absolute;}
I believe you have to wrap your movie and button (that are being absolutly positioned) in a div that has position:relative; and a width and height (just to be sure)
<div id= "wrap">
<object>
<embed id="movie">
</embed>
</object>
<img src="" id="closeButton" />
</div>
So the CSS then would be
#wrap
{
position:relative;
width:640px;
height:360px;
}
#movie
{
position:absolute;
width:640px;
height:360px;
z-index:100;
top:0;
left:0;
}
#closeButton
{
position:absolute;
right: 10px;
bottom:55px;
z-index:400;
background: none;
}
Most positioning problems I find to be because I didn't wrap it in something that is positioned:relative. I hope this helps.
DEMO: http://jsfiddle.net/derno/C8FHR/
I want to make it so that when I click anywhere on the embedded Flash element, it takes me to a destination URL.
Here is my current code, which does not produce the desired effect:
<div class="contentdiv" style="margin:-72px 0 10px 0px; cursor:pointer;" onclick="location.href='http://example.com/';">
<object height="410" width="720">
<param name="movie" value="images/tri.swf">
<embed src="images/tri.swf" height="400" width="700">
</embed>
</object>
</div>
Right now it is making the space behind the .swf file clickable for the link, but the Flash element is not clickable.
If the right thing to do is to edit the .swf file somehow, please let me know that. I don't consider myself a Flash developer, but are there any resources on where to get started or how to do something this basic with an existing .swf file?
Any suggestions are much appreciated!
I had the same problem, found this thread, but ended up creating my own solution.
I added transparent element to the link, then made it overlap the embeded swf
<a href="http://example.com/" target="_blank">
<object height="410" width="720"><param name="movie" value="http://www.theslap.com/swf/slap_logo.swf">
<embed src="http://www.theslap.com/swf/slap_logo.swf" height="400" width="700"></embed>
</object>
<i style="display:block; height: 410px; width: 720px; position: relative; z-index: 9; margin-top: -410px;"></i>
</a>
Note - you should probably include the css in a separate file for production code.
Update after more research:
This question has been asked before, and the best answer is that you have to create the link within flash.
Usually this is done dynamically by passing a parameter (conventionally named clickTAG) to the .swf to tell it where to link to.
In your case (since someone else provided your swf files) I can see 2 options:
Your .swf author may have already implemented the clickTAG method (you can ask them, or just try it out on the .swf to see if it works.)
You could make a flash wrapper file that implements clickTag, and have it load and display your .swf file. I know this seems like a hack, but I can't see any other alternatives.
Hope this helps!
I've also seen something like this used [edit: but I can't get it to work! Googling suggests that it's not possible]
<a href="http://example.com/" target="_blank">
<object height="410" width="720"><param name="movie" value="images/tri.swf">
<embed src="images/tri.swf" height="400" width="700"></embed>
</object>
</a>
(For example here)
Put a transparent .gif or .png file over the flash using z-index and just anchor that transparent image with your URL.
You could create your own swf (or have someone do it for you) that has a button editable with FlashVars over the stage and that loads in your subject swf underneath that button.
I've created one for you: Download.
You just need to add two FlashVars when you embed it:
url - The URL that will be visited if the swf is clicked.
swf - The swf file to load.
I got mad to solve the issue.... I tried several tricks including jquery and javascript.
Definitely the SOLUTION that works and works in ALL browser is the one above my reply.
Thanks user user2628529
<div class="containe">
<div style="position:absolute;"> </div>
<div >
<object type='application/x-shockwave-flash' data='http://www.sample.it/banner/banner-one.swf' width='190' height='505'>
<param name='flashvars' value='clickTag=&clickTarget=_self' />
<param name='allowScriptAccess' value='always' />
<param name='movie' value='banner-one.swf' />
<param name='wmode' value='transparent' >
</object>
</div>
</div>
There is a best way i've got found
<div class="flash-wrap">
<a class="flash-link" href="#"></a>
<object type="application/x-shockwave-flash" data="flash.swf" width="180" height="220">
<param name="wmode" value="opaque">
<param name="movie" value="flash.swf" />
<param name="quality" value="high" />
</object>
</div>
.flash-wrap{
position: relative;
}
.flash-link{
position: absolute; top:0px; left:0px;
width:180px; /*Flash Size*/
height:220px;
/*background: url('images/0.gif') no-repeat;*/ /*You should uncommented this line for support old IE version.*/
}
https://gist.github.com/m-pokrovskii/6558817
<div id="logo" >
<div id="linklogo" style="position:absolute;"><img src="transparent.png"></div>
<div id="flashlogo" >
<object type='application/x-shockwave-flash' data='1.swf' width='200' height='86'> <param name='flashvars' value='clickTag=&clickTarget=_self' /><param name='allowScriptAccess' value='always' /><param name='movie' value='1.swf' /><param name="wmode" value="transparent"></object>
</div>
certainly
eliminates the problem in all cases
This worked for me:
<a target="_blank" href="{{ entity.link }}">
<object type="application/x-shockwave-flash" data="{{ entity.file.path }}?clickTAG={{ entity.link }}" width="120" height="600" style="visibility: visible;">
<param name="quality" value="high">
<param name="play" value="true">
<param name="LOOP" value="false">
<param name="wmode" value="transparent">
<param name="allowScriptAccess" value="true">
</object>
</a>
Thank You!
now. It worked
<div style="width: 400px; height: 100px;">
<a href="http://www.sample.com" target="_blank">
<object height="100" width="400"><param name="movie" value="1.swf">
<embed src="1.swf" quality="high" type="application/x-shockwave-flash" wmode="transparent" width="400" height="100" pluginspage="http://www.macromedia.com/go/getflashplayer" allowScriptAccess="always"></embed>
</object>
<i style="display: block; height: 100px; width: 400px; position: relative;z-index: 9;margin-top: -102px;"></i>
</a>
</div>
You can't add a link to a flash object, but you can overlap a transparent image with a link, over the flash object.
This is my example:
<div style="position: relative;">
<div style="position: absolute;
left: 250px;
top: 0px;
z-index: 9999;">
<a href="http://terrazasmedicina.com.ar/hometerrazas.html">
<img src="logoLinkTR.png" width="504" height="103"></a>
</div>
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','1024','height','106','src','banner','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','banner' ); //end AC code
</script></div>
In my case the object is embeded by a script, but it should work the same.
You have to wrap in a relative div the object and a div with the image, and then position as absolute the div with the image aligning it by left, top, right and bottom properties, and asigning z-index property to overlap the image.