PDA

View Full Version : Display <div> on top using zIndex and JavaScript increment



myyoungfamily
07-08-2006, 05:06 PM
I'm trying to figure out how I can call and element based on it's unique id and change the style to display:block and the z-index:+1. I've got the display:block working but I can't get the JavaScript to increment the z-index by one(+1) each time an element gets called. Here's what I've got so far...


<script type="text/javascript">
var z=10;
function ShowHide(id) {
document.getElementById(id).style.display = "block";
document.getElementById(id).style.zIndex = "z";
"z++";

}
</script>

Twey
07-08-2006, 05:18 PM
var z = 10;
function ShowHide(id) {
document.getElementById(id).style.display = "block";
document.getElementById(id).style.zIndex = z++;
}Or, to literally just increase the zIndex by one:
function ShowHide(id) {
var k = document.getElementById(id).style;
k.display = "block";
k.zIndex = parseInt(k.zIndex) + 1;
}

myyoungfamily
07-08-2006, 05:21 PM
Sweet!!! YOU DA MAN Work's great in Firefox, Safari, Mac IE 5.2

Thanks...

myyoungfamily
07-08-2006, 05:29 PM
One other thing...
What is the best way to get that Script to return false so I don't have to put "return false" every time I call the script in my html?

Twey
07-08-2006, 06:48 PM
Add
return false; before the closing brace? :)

myyoungfamily
07-08-2006, 07:18 PM
Ok, this isn't completely working. It shows it but then it dissapears real quick?
When I put the "return false;" in the onClick it works...


<script type="text/javascript">
var z = 10;
function ShowHide(id) {
var k = document.getElementById(id).style;
k.display = "block";
k.zIndex = parseInt(k.zIndex) + 1;
return false;
}
</script>

Twey
07-08-2006, 07:21 PM
Remember that you have to return the function's return value:
onclick="return ShowHide('anID');"

myyoungfamily
07-08-2006, 07:50 PM
So, how do I do that inside the script and not in the onClick? Just putting "return false;}" didn't work?

Twey
07-08-2006, 08:09 PM
You have to explicitly return a value in the event handler, yes.

myyoungfamily
07-08-2006, 08:16 PM
Ok, so I can't use "return false" in the <script> section.

Since I'm pretty new to JavaScript, can you explain the differences / benefits of these two scripts

#1

<script type="text/javascript">
var z = 10;
function ShowHide(id) {
document.getElementById(id).style.display = "block";
document.getElementById(id).style.zIndex = z++;
}
</script>


#2

<script type="text/javascript">
var z = 10;
function ShowHide(id) {
var k = document.getElementById(id).style;
k.display = "block";
k.zIndex = parseInt(k.zIndex) + 1;
return false;
}
</script>

Twey
07-08-2006, 08:23 PM
The first one is what your code said you wanted to do, which was to put the element on top.
The second is what your article said you wanted to do, which was to simply increase the element's zIndex by one.

myyoungfamily
07-08-2006, 08:32 PM
I'm trying to do something similar to the DD Tab Content Script http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm.

Am I on the right track using your script and...


<a href="" onClick="ShowHide('anyid'); return false;">Button</a>
<div id="anyid">content here...</div>

Twey
07-08-2006, 08:35 PM
Should be, yup.

myyoungfamily
07-08-2006, 08:36 PM
Cool, thanks for all your help...