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()
Related
I am trying to understand what I am doing wrong. I am using this code
<div style="background-image: url('http://www.ionianradio.gr/radio1/images/tv5.png');"
align="center">
<object id="livestreamPlayer" style="visibility: visible;"
data="http://cdn.livestream.com/chromelessPlayer/v20/playerapi.swf?channel=ionianradio&color=0x000000&autoPlay=false&mute=false&iconColorOver=0xe7e7e7&iconColor=0xcccccc"
type="application/x-shockwave-flash" width="950" height="500">
</object>
<div>
Unfortunatelly I am seeing only the object and not the background. I am not so sure if I can do this, though. Background is a tv monitor and the object is a livestream show.
you need to specify height in div in order to the background show up.
snippet below:
div {
background-image: url('http://www.ionianradio.gr/radio1/images/tv5.png');
height: 600px /*whatever you like*/
}
<div align="center">
<object id="livestreamPlayer" style="visibility: visible;" data="http://cdn.livestream.com/chromelessPlayer/v20/playerapi.swf?channel=ionianradio&color=0x000000&autoPlay=false&mute=false&iconColorOver=0xe7e7e7&iconColor=0xcccccc" type="application/x-shockwave-flash"
width="950" height="500"></object>
</div>
Notes:
Try not to use inline CSS, since it is not a good practice, instead use classes or ID's
You are using align=center, try to avoid that since it is deprecated, instead you can assign a class/ID and with CSS make it aligned center to what you need/want.
Looks like your closing div tag is missing the slash. You may also need to add some additional styles to ensure the div is larger than the video player
<div style="background-image: url('http://www.ionianradio.gr/radio1/images/tv5.png');" align="center"><object id="livestreamPlayer" style="visibility: visible;" data="http://cdn.livestream.com/chromelessPlayer/v20/playerapi.swf?channel=ionianradio&color=0x000000&autoPlay=false&mute=false&iconColorOver=0xe7e7e7&iconColor=0xcccccc" type="application/x-shockwave-flash" width="950" height="500"></object>
</div>
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 have a tag to include add a SWF but I would like around it to control it's size.
I have something like the following:
<div style="left: 852px; top: 596px; width: 30px; height: 20px;">
<embed align="middle" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" allowscriptaccess="always" allowfullscreen="false" wmode="transparent" quality="high" style="overflow: hidden;">
</div>
But unfortunately, the embed tag (SWF) expands from the DIV. I thought overflow:hidden would assure that it does not.
How can I fix this issue please?
Thank you very much,
Rudy
You need to overflow:hidden; on the parent div, the one with dimensions defined.