Stella Lee Stella Lee - 7 months ago 33
Javascript Question

how to change z-index on javascript?

I've searched everywhere but couldn't find an answer. Okay, so- I made a popup kinda thing with an onclick event and it is on top of my posts wrapper - but because it's on top, I can't scroll down, which is why I changed the z-index. I could scroll again, but when I clicked on the link, the popup appeared behind my posts wrapper and no matter what I do and change the z-index to, it stays behind the wrapper or is on top and makes it unable to scroll. I want the popup to have a lower z-index than my wrapper when not clicked, and a higher z-index when clicked. How do I do this? I got the codes from my friend- so.. yeah, here ya go!

#wrapper{
{block:IndexPage}
width:270px;
{/block:IndexPage}
{block:PermalinkPage}
width:270px;
{/block:PermalinkPage}
margin-top:100px;
margin-right: 250px;
margin-left: auto;
height: 400px;
overflow:scroll;
overflow-x:hidden;
background-color: transparent;
background-repeat: repeat;
margin-bottom:100px;
padding:15px;
border: 3px solid #f3f2f2;
z-index: 300;

}
#gee {
position: fixed;
top:100px;
width:297px;
height:490px;
right: 250px;
font:10px;
opacity: 0.0;
padding: 5px;
background-color: #f8f6f6;
color: #cccbcb;
z-index:400;
}


And the Javascript is this:

<script language="javascript">
$(document).ready(function() {
$('a#clickbutton').click(function() {
$('.t',this).toggle();
});

$("#gee").css({"opacity": "0.0", "z-index": "-10"})
$("#clickbutton").toggle(
function () {
$("#gee").animate({"opacity": "1.0", "z-index": "400"}, "fast");
},
function () {
$("#gee").animate({"opacity": "0.0", "z-index": "-30"}, "fast");
});
});
</script>

Answer

jQuery animate doesn't work with z-index.

So, do it separately:

$("#gee").animate({"opacity": "1.0"}, "fast").css("z-index", "400");

and

$("#gee").animate({"opacity": "0.0"}, "fast").css("z-index", "-30");

That works because you can chain functions because everything returns the element(s) that was changed.