|
|||||||||
|
|||||||||
|
|||||||||
| |
|||
 |
|
|
|
|
|||||||||
|
|||||||||
|
|||||||||
| |
|||
|
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Display Modes |
Dev Articles Community Forums Sponsor:
|
|
Free Web 2.0 Code Generator! Generate data entry and reporting .NET Web apps in minutes. Quickly create visually stunning, feature-rich apps that are easy to customize and ready to deploy. Download Now!
|
|
#1
July 23rd, 2002, 01:59 AM
|
|||
|
|||
|
Javascript: Style{z-index}
How do you manipulate the z-index style property of objects via javascript?? The following dosen't work!
Code:
<html>
<head>
<title>Test z-index</title>
<script language="JavaScript">
function changeZunder() {
layer1.style.z-index = 1;
layer2.style.z-index = 2;
}
function changeZover() {
layer1.style.z-index = 2;
layer2.style.z-index = 1;
}
</script>
</head>
<body>
<div id="layer1" style="position: absolute; left: 50px; top: 50px; padding: 50 50 50 50; width: 300px; font-size: 14pt; color: #0000FF; background-color: #00FF00; z-index: 1">This is blue text with a green background.</div>
<div id="layer2" style="position: absolute; left: 150px; top: 150px; padding: 50 50 50 50; width: 300px; font-size: 14pt; color: #FF0000; background-color: #000000; z-index: 1">This is red text with a black background.</div>
<div id="layer3" style="position: absolute; left: 150px; top: 300px; padding: 50 50 50 50; width: 100px; z-index: 1">
<button onClick="changeZunder()">changeZunder()</button> <button onClick="changeZover()">changeZover()</button>
</div>
</body>
</html>
|
|
#2
July 23rd, 2002, 08:21 AM
|
|||
|
|||
|
I just found this link on webreference. It should explain a thing or two to you: http://www.webreference.com/js/column28/zindex.html
|
|
#4
February 11th, 2008, 11:59 PM
|
|||
|
|||
Correct code is below, copy-past-check now. There was problem with z-index, which is not supported with JavaScript, use zIndex.
<html> <head> <title>Test z-index</title> <script language="JavaScript"> function changeZunder() { layer1.style.zIndex = 1; layer2.style.zIndex = 2; } function changeZover() { layer1.style.zIndex = 2; layer2.style.zIndex = 1; } </script> </head> <body> <div id="layer1" style="position: absolute; left: 50px; top: 50px; padding: 50 50 50 50; width: 300px; font-size: 14pt; color: #0000FF; background-color: #00FF00; z-index: 1">This is blue text with a green background.</div> <div id="layer2" style="position: absolute; left: 150px; top: 150px; padding: 50 50 50 50; width: 300px; font-size: 14pt; color: #FF0000; background-color: #000000; z-index: 1">This is red text with a black background.</div> <div id="layer3" style="position: absolute; left: 150px; top: 300px; padding: 50 50 50 50; width: 100px; z-index: 1"> <button onClick="changeZunder()">changeZunder()</button> <button onClick="changeZover()">changeZover()</button> </div> </body> </html>
|
|
| Viewing: Dev Articles Community Forums > Programming > Programming Tools > Javascript: Style{z-index} |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
