Programming Tools
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
 
User Name:
Password:
Remember me
 



Go Back   Dev Articles Community ForumsProgrammingProgramming Tools

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Display Modes
 
Unread Dev Articles Community Forums Sponsor:
  #1  
Old July 23rd, 2002, 01:59 AM
Nigorr Nigorr is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Apr 2002
Location: Brisbane, Australia
Posts: 78 Nigorr User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 15
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>

Reply With Quote
  #2  
Old July 23rd, 2002, 08:21 AM
mytch mytch is offline
Dev Articles Novice (500 - 999 posts)
 
Join Date: Apr 2002
Location: Sydney, Australia
Posts: 588 mytch User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 15
I just found this link on webreference. It should explain a thing or two to you: http://www.webreference.com/js/column28/zindex.html

Reply With Quote
  #3  
Old July 23rd, 2002, 05:53 PM
Nigorr Nigorr is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Apr 2002
Location: Brisbane, Australia
Posts: 78 Nigorr User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 15
Thanks for that. I have never herd of webreference before, well now I know where to go to for this type of thing now.

Reply With Quote
  #4  
Old February 11th, 2008, 11:59 PM
farhansajid farhansajid is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Feb 2008
Posts: 1 farhansajid User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 4 m 15 sec
Reputation Power: 0
Arrow

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>

Reply With Quote
  #5  
Old May 30th, 2010, 10:51 AM
onlineclick onlineclick is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: May 2010
Location: US
Posts: 13 onlineclick User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 3 m 44 sec
Reputation Power: 0
Here I am again*

Hi allfound this site just randomly..and as i love fashion and all the things that comes with it thought it would b a good idea to join...hope ur all friendly.. Peace out.

Reply With Quote
  #6  
Old November 27th, 2011, 09:57 PM
Debra 785 Debra 785 is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Nov 2011
Posts: 6 Debra 785 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 7 m
Reputation Power: 0
Thanks for that. I have never herd of webreference before, well now I know where to go to for this type of thing now.


Reply With Quote
Reply

Viewing: Dev Articles Community ForumsProgrammingProgramming Tools > Javascript: Style{z-index}


Developer Shed Advertisers and Affiliates


Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 


Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.

© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap