/    Sign up×
Community /Pin to ProfileBookmark

style.zIndex help?

Copy linkTweet thisAlerts:
Jun 11.2007

I have a row of tabs that have descending zIndex (100, 99, 98) so that they over lap each other a little.

Problem is, I want to have the current (active) tab on the top so it overlaps the ones before and after it.

onchange of a tab I am doing this
var len = tabs.length;
var tab;
for(var j=0;j<len;j++){
tab = tabs[j];
tab.className = “tab”
tab.style.zIndex = (100 – j);
alert(tab.style.zIndex);
}

//el is the Current Tab

el.className = “tab_on”;
el.style.zIndex = 1000;

Css Classes tab and tab_on both have position:relative and margin-left:-8px (the overlap effect). The only difference is colors and fonts.

Why is the zIndex change in javascript not working? Please help?

to post a comment
JavaScript

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@Mr_JJun 11.2007 — Give this example a try

[CODE]<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<script type="text/javascript">
<!--
topLevel=5 // top z-index
lastID=""
function changeZindex(obj){
id=obj.id
document.getElementById(id).style.zIndex=topLevel

if(lastID==""){
lastID=id
}

if(lastID==id){
document.getElementById(id).style.zIndex=topLevel
}
else{
document.getElementById(lastID).style.zIndex=""
}

lastID=id
}
// -->
</script>

<style type="text/css">
<!--
#d1{position:absolute; left:0px; top:0px; width:100px; height:100px; z-index:1; background-color:green}
#d2{position:absolute; left:20px; top:20px; width:100px; height:100px; z-index:2; background-color:yellow}
#d3{position:absolute; left:40px; top:40px; width:100px; height:100px; z-index:3; background-color:red}
#d4{position:absolute; left:60px; top:60px; width:100px; height:100px; z-index:4; background-color:blue}
-->
</style>

</HEAD>
<BODY>

<center>

<div style="position:relative;width:110px">

<div id="d1" onclick="changeZindex(this)">A</div>
<div id="d2" onclick="changeZindex(this)">B</div>
<div id="d3" onclick="changeZindex(this)">C</div>
<div id="d4" onclick="changeZindex(this)">D</div>

</div>

</center>
</BODY>
</HTML>[/CODE]
×

Success!

Help @RobDavid spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...