why z-index doesnt work on top of javascript?

SM · Jun 18, 2009

hello
I'm using z-index so an image falls on top of a javascript. But it
doesn't. Is there a limitation for using z-index with javascript?

here's my code:
<body >
<img style="position:absolute;left:0px;top:0px;z-index:1;"src="/images/
vBulletin/mods/tv.jpg" />
<div>
<script src="http://static.livestream.com/scripts/pla..."
type="text/javascript"></script>
</div>
</body>

Is there a work around?

Hamish Campbell · Jun 18, 2009

hello
I'm using z-index so an image falls on top of a javascript. But it
doesn't. Is there a limitation for using z-index with javascript?
here's my code:
<body >
<img style="position:absolute;left:0px;top:0px;z-index:1;"src="/images/
vBulletin/mods/tv.jpg" />
<div>
<script src="http://static.livestream.com/scripts/pla..."
type="text/javascript"></script>
</div>
</body>

Is there a work around?

You probably need a new flux capacitor.

Thomas 'PointedEars' Lahn · Jun 18, 2009

SM said:
I'm using z-index so an image falls on top of a javascript.

Since an image is graphical and a script is not, that is not possible.

But it doesn't. Is there a limitation for using z-index with javascript?

The `z-index' CSS property does not apply to `script' elements, if you mean
that.

here's my code:
<body >
<img style="position:absolute;left:0px;top:0px;z-index:1;"src="/images/
vBulletin/mods/tv.jpg" />
<div>
<script src="http://static.livestream.com/scripts/pla..."
type="text/javascript"></script>
</div>
</body>

Is there a work around?

Perhaps Valid markup?

<http://validator.w3.org/>

PointedEars

SM · Jun 18, 2009

Since an image is graphical and a script is not, that is not possible.

The `z-index' CSS property does not apply to `script' elements, if you mean
that.

Perhaps Valid markup?

<http://validator.w3.org/>

PointedEars

i'm using the code, provide it by mogulus (livestream), to embed a
player on my website. I validate it the code and it gives me 129
Errors, 129 warning(s) .... So the embed code is wrong i guess...
From my problem above, instead of the script tag, i switch it to a p
tag for testing purposes and the z-index works , but when it a script
tag, it doesn't. I was wondering if this was a limitiation?

<script src="http://static.livestream.com/scripts/playerv2.js?
channel=rociojuradofanclub&layout=playerEmbedDefault&backgroundColor=0xffffff&backgroundAlpha=1&backgroundGradientStrength=0&chromeColor=0x000000&headerBarGlossEnabled=true&controlBarGlossEnabled=true&chatInputGlossEnabled=false&uiWhite=true&uiAlpha=0.5&uiSelectedAlpha=1&dropShadowEnabled=true&dropShadowHorizontalDistance=10&dropShadowVerticalDistance=10&paddingLeft=10&paddingRight=10&paddingTop=10&paddingBottom=10&cornerRadius=3&backToDirectoryURL=null&bannerURL=null&bannerText=null&bannerWidth=320&bannerHeight=50&showViewers=true&embedEnabled=true&chatEnabled=true&onDemandEnabled=true&programGuideEnabled=false&fullScreenEnabled=true&reportAbuseEnabled=false&gridEnabled=false&initialIsOn=true&initialIsMute=false&initialVolume=10&contentId=null&initThumbUrl=null&playeraspectwidth=4&playeraspectheight=3&mogulusLogoEnabled=true&width=400&height=400&wmode=window"
type="text/javascript"></script>

nickfitz · Jun 18, 2009

i'm using the code, provide it by mogulus (livestream), to embed a
player on my website. I validate it the code and it gives me 129
Errors, 129 warning(s) .... So the embed code is wrong i guess...
From my problem above, instead of the script tag, i switch it to a p
tag for testing purposes and the z-index works , but when it a script
tag, it doesn't. I was wondering if this was a limitiation?

The script will be writing out new content to the window, and the

wmode=window"

strongly suggests that it's writing out code to embed a Flash object,
presumably a media player, in the page.

That makes this primarily a CSS, rather than a script, problem. Try
changing that "wmode=window" to "wmode=transparent" and it might get
it working as you expect, at least in some browsers. (On the other
hand, it might adversely affect the appearance of the Flash object.)

The validation errors will be (at least in part) due to the unescaped
"&" characters; they should properly be written as "&" in HTML and
XHTML, although they won't break if left as they are in any browser
I've ever come across, and definitely won't have any bearing on your z-
index problem.

Regards,

Nick.

Thomas 'PointedEars' Lahn · Jun 18, 2009

SM said:
Thomas said:

SM said:

I'm using z-index so an image falls on top of a javascript.

Click to expand...

^^^^^^^^^^^^^^^^^^^^^^
Since an image is graphical and a script is not, that is not possible.

But it doesn't. Is there a limitation for using z-index with javascript?

Click to expand...

The `z-index' CSS property does not apply to `script' elements, if you mean
that.

here's my code:
<body >
<img style="position:absolute;left:0px;top:0px;z-index:1;"src="/images/ ^^^^
vBulletin/mods/tv.jpg" />
<div>
<script src="http://static.livestream.com/scripts/pla...."
type="text/javascript"></script>
</div>
</body>
Is there a work around?

Click to expand...

Perhaps Valid markup?

<http://validator.w3.org/>
[...]

Click to expand...

Trim your quotes, don't quote signatures.

i'm using the code, provide it by mogulus (livestream), to embed a
player on my website. I validate it the code and it gives me 129
Errors, 129 warning(s) .... So the embed code is wrong i guess...

Guess again.

From my problem above, instead of the script tag, i switch it to a p
tag for testing purposes

Sigh. [psf 10.1] said:
and the z-index works , but when it a script tag, it doesn't.
I was wondering if this was a limitiation?

It matters what the `script' _element_ generates, of course. As you now say
it generates a media player object, it makes sense that the other element
cannot be positioned on top of it.

<http://www.catb.org/~esr/faqs/smart-questions.html>

PointedEars

SM · Jun 18, 2009

The script will be writing out new content to the window, and the

strongly suggests that it's writing out code to embed a Flash object,
presumably a media player, in the page.

That makes this primarily a CSS, rather than a script, problem. Try
changing that "wmode=window" to "wmode=transparent" and it might get
it working as you expect, at least in some browsers. (On the other
hand, it might adversely affect the appearance of the Flash object.)

The validation errors will be (at least in part) due to the unescaped
"&" characters; they should properly be written as "&" in HTML and
XHTML, although they won't break if left as they are in any browser
I've ever come across, and definitely won't have any bearing on your z-
index problem.

Regards,

Nick.

Thanks Nick the for hint. I'll do more research on the subject of
wmode and z-index.

Thanks again
Marco

The Natural Philosopher · Jun 18, 2009

SM said:
Thanks Nick the for hint. I'll do more research on the subject of
wmode and z-index.

Its possible to get flash under other elements..

Here's a sample that slides under other stuff

<object classid="clsid

27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
width="600" height="180">
<param name="movie" value="Flashelements/Greystone.swf">
<param name="quality" value="high">
<param name="wmode" value="opaque">
<embed src="Flashelements/Greystone.swf" quality="high"
wmode="opaque" pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" width="600" height="180"></embed>

</object>

IIRC the wmode is what sets whether its under, over, and whether you can
see through it..

When draggable=false & draggable=true dont work ?	1	Jan 14, 2023
Help with Visual Lightbox: Scripts	2	May 3, 2023
I am trying to detect Which image id="" was clicked ?	22	Jan 3, 2023
Put image over the top of another image on hover	3	Feb 7, 2020
Final chapter of "Learn PHP, MySQL and JavaScript"	3	Jun 4, 2024
All CRUD operations work except POST. Why?	2	May 28, 2023
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
How to stop an animated image from sticking to top of page?	2	Feb 17, 2022

why z-index doesnt work on top of javascript?

SM

Hamish Campbell

Thomas 'PointedEars' Lahn

SM

nickfitz

Thomas 'PointedEars' Lahn

SM

The Natural Philosopher

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads