What I'm trying to do is to have 4 expandable divs overlapping each other with transition set in css for 0.6s. Because the expanding lasts for 0.6s I'd like to have the expanded div lose it's higher z-index after it's done collapsing, otherwise it looks silly. However, it doesn't work, the z-index remains unchanged. It's probably somethings stupid, but I just can't find it. Thanks!

<div class="wrapper" style="position: relative;">
<div id="one" style="position: absolute;" onmouseover="
this.style.height='250px';
this.style.zIndex='1';
" onmouseout="
this.style.height='50px';
setTimeout(function() {this.style.zIndex='0';},600);
">blahblahblahblah</div>
<div id="two" style="position: absolute;" onmouseover="
this.style.height='250px';
this.style.zIndex='1';
" onmouseout="
this.style.height='50px';
setTimeout(function() {this.style.zIndex='0';},600);
">blahblahblahblah</div>
</div>

What I'm trying to do is to have 4 expandable divs overlapping each other with transition set in css for 0.6s. Because the expanding lasts for 0.6s I'd like to have the expanded div lose it's higher z-index after it's done collapsing, otherwise it looks silly. However, it doesn't work, the z-index remains unchanged. It's probably somethings stupid, but I just can't find it. Thanks!

<div class="wrapper" style="position: relative;">
<div id="one" style="position: absolute;" onmouseover="
this.style.height='250px';
this.style.zIndex='1';
" onmouseout="
this.style.height='50px';
setTimeout(function() {this.style.zIndex='0';},600);
">blahblahblahblah</div>
<div id="two" style="position: absolute;" onmouseover="
this.style.height='250px';
this.style.zIndex='1';
" onmouseout="
this.style.height='50px';
setTimeout(function() {this.style.zIndex='0';},600);
">blahblahblahblah</div>
</div>

• javascript
• html
• css

1 Answer 1

Rather than finding the bug in your code, perhaps it would be useful to discuss how you could find it yourself. The first step is to open your devtools window (F12) and open the console (press the little icon that looks like a greater than sign with three horizontal bars to the right). When you run your program you are likely to see the following:

TypeError: Cannot set property 'zIndex' of undefined

The debugger will stop at the line

setTimeout(function() {this.style.zIndex='0';},600);

Hmmm. Apparently this.style is undefined. How could that be? Go into the console (which is in the context in which the error occurred, in other words, inside the function you passed to setTimeout) and type

this.style

and indeed you will see that it is undefined. Why is that? Well, what is this?

this

and you will see something like

Window {top: Window, window: Window, location: Location, ...}

Why would this be the window instead of what I think it should be? Well, this in general is set to window for a function called without an explicit this, as in elt.set_style(). That's what's happening here.

How can I set this within a function that is called by the system, such as the one passed to setTimeout? You can do what @Satpal remended, and store the value of this outside the function under another name such as self, and explicitly refer to that. Or, you could bind the function to this, as in

function timeout_func(){
    this.style.zIndex=0;
}
setTimeout(timeout_func.bind(this));

In addition to using the console to see error messages and type in things to be evaluated, you'll find the "scope variables" and "watch expressions" windows very useful.

In general, problems such as this can be solved easily using devtools. If you don't know what it is, Google Chrome devtools (start off by hitting F12). Not using this is literally like programming in the dark.