z-index swap on click

**ggalan** · 01-23-2011, 08:19 PM

i have 3 cubes on stage and when i click the cube, would like this cube's z-index to be on top and send the others back. can anyone help?

Code:

<html>
<head>
<style>div.squares{display:block; width:125px; height:125px; }</style>		
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
    $("div.squares").draggable();
	
	$("div.squares").click(function() {
		$(this).css({'z-index' : '10'});
	} , function() {
		$(this).css({'z-index' : '0'});
	});
	
});
</script>
</head>
<body>
	<div class="squares" style="background-color:#fcc;"></div>
	<div class="squares" style="background-color:#ccc;"></div>
	<div class="squares" style="background-color:#ffc;"></div>
</body>
</html>

EDIT: when i change click to hover it seems to work but why does click have problems?

**jscheuer1** · 01-24-2011, 02:10 AM

The hover event is a (mouseover/out) toggle. The equivalent for click is toggle. But that won't achieve the desired result here. At least I don't think so. This would be closer:

Code:

<html>
<head>
<style>div.squares{display:block; width:125px; height:125px; }</style>		
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
	var sqs = $("div.squares").draggable().mousedown(function(){
		sqs.css({zIndex: 0});
		$(this).css({zIndex: 10});
	});	
});
</script>
</head>
<body>
	<div class="squares" style="background-color:#fcc;"></div>
	<div class="squares" style="background-color:#ccc;"></div>
	<div class="squares" style="background-color:#ffc;"></div>
</body>
</html>

But it doesn't revert on mouseout or mouseup, but either or both could be arranged.

**ggalan** · 01-24-2011, 04:08 AM

i see,
i cant seem to control the z-index well like this tho.
for instance if the pink is over the yellow and i click the grey, it forces the pink and yellow to switch z-index for no reason. is there a way to retain each position and just have the draggable item get the higher z-index?

**jscheuer1** · 01-24-2011, 08:07 AM

I think I was thinking that. I came up with:

Code:

<!DOCTYPE html>
<html>
<head>
<title>Drag w/zIndex II</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>div.squares{display:block; width:125px; height:125px; }</style>		
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
jQuery(function($){
	var sqs = $("div.squares").draggable().mousedown(function(){
		sqs.css({zIndex: function(){
				return Math.max(--this.style.zIndex, 0);
			}
		});
		$(this).css({zIndex: 10000});
	});	
});
</script>
</head>
<body>
	<div class="squares" style="background-color:#fcc;"></div>
	<div class="squares" style="background-color:#ccc;"></div>
	<div class="squares" style="background-color:#ffc;"></div>
</body>
</html>

I used 10000 because if it's less - say 10, it only takes 10 drags of the first one to lower the stack of the second one if it were already on top of the third one. But you know, draggable() has it's own events. So you could do the same with this monstrous one liner (doesn't have to be all one line):

Code:

<!DOCTYPE html>
<html>
<head>
<title>Drag w/zIndex III</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>div.squares{display:block; width:125px; height:125px; }</style>		
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
jQuery(function($){
	var sqs = $("div.squares").draggable({start: function(){sqs.not($(this).css({zIndex: 10000})).css({zIndex: function(){return Math.max(--this.style.zIndex, 0);}});}});
});
</script>
</head>
<body>
	<div class="squares" style="background-color:#fcc;"></div>
	<div class="squares" style="background-color:#ccc;"></div>
	<div class="squares" style="background-color:#ffc;"></div>
</body>
</html>

But I think that might be less efficient.

See also:

http://jqueryui.com/demos/draggable/

particularly:

http://jqueryui.com/demos/draggable/#events

**ggalan** · 01-25-2011, 12:05 AM

interesting!
very informative jscheuer1!!

**ggalan** · 01-25-2011, 12:13 AM

could you explain this part of your code a little please

Code:

return Math.max(--this.style.zIndex, 0);

the "--" part

**jscheuer1** · 01-25-2011, 04:48 AM

In that context, -- is the prefix decrement operator. It applies only to numbers or to strings that can be type converted to numbers, example:

Code:

x = 25;
alert(--x); // alerts 24, and in the future x = 24

There are three similar operators, the suffix decrement:

Code:

x = 25;
alert(x--); // alerts 25, but in the future x = 24

and the prefix increment (++x) and the suffix increment (x++), which each work the same as their decrement counterpart, except that the value is increased by one, rather than decreased by one.

The z-index value is a string, but contains only numeric value. So it easily type converts.

So - say the z-index was 10000, it now becomes 9999.

If it was 0 though, because of the Math.max method there, it doesn't become negative. That could make the element disappear below the body. That's also why I start with 10000. It would take 10002 drag operations, and some rather specific ones at that, to get any of the elements to pop up or down in the stack inappropriately as regards the intent of this script.

As a side note, unless your code requires the suffix type of either of these operators (++ or --), using the prefix type is more efficient because it requires less memory and possibly less calculation, certainly less operations.

**ggalan** · 01-25-2011, 04:43 PM

ive used the operator ++ or -- for counting numbers in a variable but ive never seen anything like this before, and to use the counting operator on it!

Code:

this.style.zIndex

**jscheuer1** · 01-25-2011, 05:32 PM

It does look like it's a bit of a stretch. Perhaps it is. But since element.style.zIndex is both a getter and a setter, it can behave just like a variable in this case. This will also work:

Code:

jQuery(function($){
	var sqs = $("div.squares").draggable().mousedown(function(){
		sqs.each(function(){
			if(this.style.zIndex > 0){--this.style.zIndex;}
		});
		this.style.zIndex = 10000;
	});	
});

And is perhaps even more efficient. Let me emphasize again that it also depends upon the fact that the zIndex is a string that can be type converted to a number and visa versa, on the fly by javascript as required. Additionally, browsers see the initial z-index as undefined, an Object, which easily type converts to 0, a number. Some browser might return the string "undefined" there. If so both the above code, and the other examples I gave would need to be updated for that possibility. But I doubt it. Even IE 6 gets it right, as well as Chrome 8.

Thread: z-index swap on click

Thread Tools

Search Thread

z-index swap on click

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions