Login/Register
<div> element is not top layer in Safari Windows
Asked Answered
htmlsafariz-indexalways-on-tophtml-object
N

4

6

I have <div> element to show pop-up message. I already set z-index:1000 and add <iframe> but the div element still doesn't show above the live streaming video (embed plugin) in Safari browser. I used Chrome and Firefox, both of which work, but it doess't work in Safari Windows.

This is my code in a Fiddle.

<BODY style="background:transparent">
<div style="position:relative; z-index:0;">
    <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="240" height="180">
        <param name="wmode" value="transparent"></param>
        <embed height="180" width="240" align="left" src="xxxx.avi" autoplay="false" controller="true" wmode="transparent"></embed> 
    </object>

    <object>
        <param name="wmode" value="transparent"></param>
        <param name="movie" value="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&amp;hl=en_US"></param>
        <param name="allowFullScreen" value="true"></param>
        <param name="allowscriptaccess" value="always"></param>
        <embed src="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="240" height="180"></embed>
    </object>
</div>  

<div id="draggable">
    <div class="drag">
        <p>Drag me around!! Drag me around!!</p>
        <p>Drag me around!! Drag me around!!</p>
        <p>Drag me around!! Drag me around!!</p>
    </div>
    <iframe class="frame"></iframe>
</div>


Can anyone find any issues with this code?

Nikolai answered 22/2, 2013 at 12:32 Comment(5)
You really should move away from inline styles in this case. It makes things much cleaner when you put a single CSS class for all those <div>s. Also, which version of Safari are you testing this in? It seems to work perfectly (<div> on top, and all) for me in Safari 6.0. – Eteocles
I'm getting some very peculiar results in Safari 5 (Win XP). I get theproblem you are talking about but I also get a QuickTime block with nothing loading. Also the whole jsFiddle page seems to freak out positioning stuff weirdly. I can't help but just thought you'd be interested in theresults ina different version. Good luck matey :) – Boucicault
I used safari 5.1.7 in win 7. My point is to make draggable div element on top of all embedded object. Thanks. – Nikolai
I have update the code and put a single CSS. I tried those code is works fine in Chrome & Firefox but not in Safari (OS Wind 7). Any suggestion what is the problem? – Nikolai
See here #5867647 – Chatterton
G
5

You need to change/set your wmode to opaque. 

<embed src="..." wmode="opaque"></embed>

And try setting the appropriate type for the first object.

<embed src="xxxx.avi" ...wmode="opaque" type="application/x-shockwave-flash"></embed>

http://jsfiddle.net/8C2py/7

Genaro answered 25/2, 2013 at 6:41 Comment(9)
it's works but only for the second emebedded, how about the first one? Thanks. – Nikolai
where ever you have the wmode set to transparent, set it to opaque.. I have updated the fiddle. – Genaro
I tried the fidlle but it's not working, you could see my screenshot when running it. The div element still behind the first embedded object. – Nikolai
really weird behavior! setting the mime type for the first object seems to work. type="application/x-shockwave-flash" however you may need to use a different type as I dont have an .avi file to test with here. – Genaro
For the first object I need to used plugin/ActiveX so I can't used type="application/x-shockwave-flash". Actually xxxx.avi just a fake filename, so it really weird. Any other suggestion? – Nikolai
try type="application/x-oleobject" and see if that makes a difference. Otherwise im not too sure as I dont have experience with embedding activex objects. – Genaro
I tried type="application/x-oleobject" but it said missing plugin where can I download it? – Nikolai
Hi luke, if I used type="application/x-oleobject" because no plugin so the div is on the top, but I think if you have plugin it will still behind the embedded object. Thanks. – Nikolai
You could try adding <param name="windowlessVideo" value="true"> which is suggested in this thread: #1602866 – Genaro
A
1

As far as I can remember flash is on top of all HTML elements.

You can try to hide it when the pop up is there. Unfortunately I haven't seen a work around for that yet.

One good method is to have a place holder image that is the same size as the video and toggle them

<div class="video">
    <!-- video here -->
</div>
<div class="placeholder" style="display:none;">
    <img src="path/to/placeholder.jpg"
</div>

when you have the pop up opened

$(".video").css('display','none');
$(".placeholder").css('display','block');
Andie answered 10/3, 2013 at 20:10 Comment(1)
But I prefer it above the object because my message div not as big as the video. – Nikolai
C
1

Here are the specs of the z-index property (src: w3.org):

Each box belongs to one stacking context. Each positioned box in a given stacking context has an integer stack level, which is its position on the z-axis relative other stack levels within the same stacking context.

I think that <div class="drag"> is not in the same stacking context as your flash objects.To make sure that the stacking context is correct, make the <div id="draggable"> also relative, and give it a higher z-index than the <div> that contains the flash objects.

Note: I'm not able to test Safari at the moment, so let me know if it works or not:

<div style="position:relative; z-index:1;">
    ... your flash objects...
</div>  

<div id="draggable" style="position: relative; z-index: 2;">
    <div class="drag">
        <p>Drag me around!! Drag me around!!</p>
        <p>Drag me around!! Drag me around!!</p>
        <p>Drag me around!! Drag me around!!</p>
    </div>
    <iframe class="frame"></iframe>
</div>
Choric answered 12/3, 2013 at 8:11 Comment(0)
D
0

works IE FF Chr & Saf

Placing a div over an iframe/video...

to place div over an image just replace the iframe w/ your image ....

trick part is for video ... you must add ... ?wmode=transparent ... to the end of the src url...

<!DOCTYPE HTML > 
<style type="text/css"> 
.Container {position:relative;  float:left;  border: 1px solid #0f0; }
.Vid {position:absolute; top:7px; left:7px; width:90%; height:90%;  }
.Lyr { float:left; width:90%; height:90%; background-color: #a3a3e6;  opacity:0.5; border: 1px solid #f00; }
</style>

<div id="Cntr0" class="Container" style="width:220px; height:140px;">
    <iframe id="frm0" class="Vid" src='http://www.youtube.com/embed/y1VVXrUdO2s?wmode=transparent' frameborder='0'></iframe>
    <div id="div0" draggable="true" class="Lyr" ></div>
</div>

or if you want to use your Object code....

<!DOCTYPE HTML > 
<style type="text/css"> 
.Container {position:relative;  float:left;  border: 1px solid #0f0; }
.Vid {position:absolute; top:7px; left:7px; width:90%; height:90%;  }
.Lyr { float:left; width:90%; height:90%; background-color: #a3a3e6;  opacity:0.5; border: 1px solid #f00; }
</style>

<div id="Cntr0" class="Container" style="width:260px; height:190px;">
     <object class="Vid" >
        <param name="wmode" value="transparent"></param>
        <param name="movie" value="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&amp;hl=en_US"></param>
        <param name="allowFullScreen" value="true"></param>
        <param name="allowscriptaccess" value="always"></param>
        <embed src="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" 
        allowscriptaccess="always" allowfullscreen="true" wmode="transparent" width="240" height="180"></embed>
    </object>
     <div id="div0" draggable="true" class="Lyr" ></div>
</div>

and the avi code....

<!DOCTYPE HTML > 
<style type="text/css"> 
.Container {position:relative;  float:left;  border: 1px solid #0f0; }
.Vid {position:absolute; top:7px; left:7px; width:90%; height:90%;  }
.Lyr { float:left; width:90%; height:90%; background-color: #a3a3e6;  opacity:0.5; border: 1px solid #f00; }
</style>

<div id="Cntr0" class="Container" style="width:260px; height:190px;">
     <object class="Vid" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="240" height="180" >
        <param name="wmode" value="transparent"></param>
        <embed height="180" width="240" align="left" src="xxxx.avi" allowscriptaccess="always" autoplay="false" controller="true" wmode="transparent"></embed> 
    </object>
     <div id="div0" draggable="true" class="Lyr" ></div>
</div>
Drachm answered 12/3, 2013 at 18:8 Comment(1)
It's a draggable div msg, it's show below the video object. I want it on top of the video obj not image. – Nikolai

© 2022 - 2024 — McMap. All rights reserved.