Changing class according to Z-index that a div has

JavaScript
1

Hi, it’s been awhile since I’ve done much coding in javascript or jquery, and even then was far from a pro at it.

I’m working on a feature where I change the z-index value of items with javascript, that part has already been done, and it works, but only on the first selection.
Now my the task is to change the value of my class using the freshly changed z-index value to place these divs in the correct order so I can repeat the process. I think that I need to use an array and possibly a case/switch to do this, but I’m unsure

This is a portion of the code I currently have:


$(function()
  {
   function changePos(){
									
									var l1Index = $("#layer1").css('zIndex');
									var l2Index = $("#layer2").css('zIndex');
									var l3Index = $("#layer3").css('zIndex');
									var l4Index = $("#layer4").css('zIndex');
									
									
									var indexes = [l1Index, l2Index, l3Index, l4Index];
									indexes.sort();
									
								//Testing	
									alert("Div 1 zIndex: " + $("#layer1").css('z-index'));
									alert("Div 2 zIndex: " + $("#layer2").css('z-index'));
									alert("Div 3 zIndex: " + $("#layer3").css('z-index'));
									alert("Div 4 zIndex: " + $("#layer4").css('z-index'));
								
									}
			$(".layer1").click(function(){
				$(".layer1").animate({opacity:"0.6", left:"-120px", top:"-90px", zIndex: "40"}, 850);
				$(".layer2").animate({opacity:"1", left:"40px", top:"30px", zIndex: "100"}, 550);
				$(".layer3").animate({opacity:"0.6", left:"40px", top:"30px", zIndex: "80"}, 700);
				$(".layer4").animate({opacity:"0.6", left:"40px", top:"30px", zIndex: "60"}, 850);
				$("#siteDesc1").animate({opacity:"0"}, 600);
				$("#siteDesc2").animate({opacity:"1"}, 600);
				
				setTimeout(changePos, 850);
			});
//In here are 3 more functions like layer1 for the other boxes, pretty much the same
		  });

<div id="sites">
    <div id="layer1" class="layer1 zindex1">
    </div>
    <div id="layer2" class="layer2 zindex2">
    </div>    	
    <div id="layer3" class="layer3 zindex3">
    </div>    	
    <div id="layer4" class="layer4 zindex4">
    </div>
</div>

In the css, the #layer id currently drives the color, the layer class drives the size, opacity and positioning type(absolute), and the zindex class drives the position.

It seems like this should be simple, but I can’t seem to find any specific method of comparing multiple variables to a number. The z-index values are 100, 80, 60 and 40, so I’m thinking I’m most likely have to have a case statement for each value matching it to the variable value. Then using variable name to bring back to the id and value to match the correct class.

2

I’ve since changed the changePos() function to this, still not working though

function changePos(){
									
									var l1Index = $("#layer1").css('zIndex');
									var l2Index = $("#layer2").css('zIndex');
									var l3Index = $("#layer3").css('zIndex');
									var l4Index = $("#layer4").css('zIndex');
									
									var i;
									var layerZindex = new Array();
									layerZindex[1] = l1Index;
									layerZindex[2] = l2Index;
									layerZindex[3] = l3Index;
									layerZindex[4] = l4Index;

									
									for (i=1;i<5;i++)
										{
										if(layerZindex[i] == 40){
											$("#layer4").removeClass();
											$("#layer4").addClass("layer" + [i] + " zindex" + [i]);
										}
										else if(layerZindex[i] == 60){
											$("#layer3").removeClass();
											$("#layer3").addClass("layer" + [i] + " zindex" + [i]);
											}
										else if(layerZindex[i] == 80){
											$("#layer2").removeClass();
											$("#layer2").addClass("layer" + [i] + " zindex" + [i]);
											}
										
										else if(layerZindex[i] == 100){
											$("#layer1").removeClass();
											$("#layer1").addClass("layer" + [i] + " zindex" + [i]);
											}
										}
									}
3

Currently your code is way to complicated for something so simple but I do understand you’re still new so lets go through this, jQuery offers us a lot of freebies as far as simple element selections, loops, attribute selections and much more. We can make what you want possible with less than 20 lines of code compared to around the 40 lines above. See the below example:

function changePos() {
    // References to the z-index levels, this makes our code shorter and more efficient
    var levels = {40 : 4, 60 : 3, 80 : 2, 100 : 1};
    
    $('[id^=layer]').each(function() {
        // Get the element z-index level
        var zIndexLevel = $(this).css('zIndex');
        
        // Set the respective element class
        if (levels[zIndexLevel]) {
            $('#layer' + levels[zIndexLevel]).attr('class', 'layer-zindex-' + zIndexLevel);
        }
    });
}

So i’ll explain what is going on above, first we can an object that has references to the z-index levels we want to target, this makes targeting specific elements easier as we can the z-index level to find the layer ID then use that ID to target the layer. Next we select all elements that begin with the word layer in the ID attribute, this is kind of like a hidden easter egg more than anything as no one documents it from my searches around the net but I like teaching it to the next person I meet because I find it to be one of the most unique features to any JavaScript library.

Once we are in the loop which is created by jQuery’s each method we find the zIndex level of that element which I’ll skip over since you already know how to obtain that, next we check our references object from earlier to see if the current elements z-index level exists as an index in the object and if it does when then proceed to set the class attribute based on the layer ID from the reference object and the z-index level we obtained earlier.

In the above example I have used a generic class name so you will need to change that but the concept and idea is there.

Hope that helps bud.

4

Thank you so much chris for your help! I had to add an i variable to match up the class with the new id, but besides that this part works perfectly.

I’ve found though that the rest of my code is causing most of the problem here. First off, I’m sure it could be condensed quite a bit as well, but with the different behavior (especially on the .layer1 function) I’m not sure how to do it. I’m actually considering dropping the action that I do for the top box, which might make things that much simpler, not sure.

As this code works, it works perfectly on the first click, but goes haywire after that. For example, just based off of the repeated clicks on .layer1, which I’ve confirmed through firebug does change as it should, each function is called consecutively. Looks like the names are changing for each box and are being carried out within the functions but for some reason the javascript that I have still recognizes the original class name when it activates the function.

$(function()
  {
									
	function changePos() {
			var levels = {40 : 4, 60 : 3, 80 : 2, 100 : 1};
		 	var i = 1;
			$('[id^=layer]').each(function() {
				var zIndexLevel = $(this).css('zIndex');
				if (levels[zIndexLevel]) {
					$('#layer' + i).attr('class', 'layer' + levels[zIndexLevel]);
				i++;
				}
			});
		}						
			
      $(".layer1").click(function(){
				$(".layer1").animate({opacity:"0.6", marginLeft:"0px", marginTop:"0px", zIndex: "40"}, 850);
				$(".layer2").animate({opacity:"1", marginLeft:"120px", marginTop:"90px", zIndex: "100"}, 550);
				$(".layer3").animate({opacity:"0.6", marginLeft:"80px", marginTop:"60px", zIndex: "80"}, 700);
				$(".layer4").animate({opacity:"0.6", marginLeft:"40px", marginTop:"30px", zIndex: "60"}, 850);
				$("#layer1 div.Description").animate({opacity:"0"}, 600);
				$("#layer2 div.Description").animate({opacity:"1"}, 600);
				$("#layer3 div.Description").animate({opacity:"0"}, 600);
				$("#layer4 div.Description").animate({opacity:"0"}, 600);
				
				setTimeout(changePos, 850);
			});
		
		
	$(".layer2").click(function(){
				$(".layer2").animate({opacity:"1", marginLeft:"120px", marginTop:"90px", zIndex:"100"}, 400);
				$(".layer1").animate({opacity:"0.6", marginLeft:"80px", marginTop:"60px", zIndex: "80"}, 550);
				$(".layer3").animate({opacity:"0.6", marginLeft:"40px", marginTop:"30px", zIndex: "60"}, 700);
				$(".layer4").animate({opacity:"0.6", marginLeft:"0px", marginTop:"0px", zIndex: "40"}, 850);
				$("#layer1 div.Description").animate({opacity:"0"}, 600);
				$("#layer2 div.Description").animate({opacity:"1"}, 600);
				$("#layer3 div.Description").animate({opacity:"0"}, 600);
				$("#layer4 div.Description").animate({opacity:"0"}, 600);
				
				setTimeout(changePos, 850);
				});
		
	$(".layer3").click(function(){
				$(".layer3").animate({opacity:"1", marginLeft:"120px", marginTop:"90px", zIndex:"100"}, 400);
				$(".layer1").animate({opacity:"0.6", marginLeft:"80px", marginTop:"60px", zIndex: "80"}, 400);
				$(".layer2").animate({opacity:"0.6", marginLeft:"40px", marginTop:"30px", zIndex: "60"}, 550);
				$(".layer4").animate({opacity:"0.6", marginLeft:"0px", marginTop:"0px", zIndex: "40"},700);
				$("#layer1 div.Description").animate({opacity:"0"}, 600);
				$("#layer2 div.Description").animate({opacity:"0"}, 600);
				$("#layer3 div.Description").animate({opacity:"1"}, 600);
				$("#layer4 div.Description").animate({opacity:"0"}, 600);
				
				setTimeout(changePos, 700);
			});
		
	$(".layer4").click(function(){
				$(".layer4").animate({opacity:"1", marginLeft:"120px", marginTop:"90px", zIndex:"100"}, 400);
				$(".layer1").animate({opacity:"0.6", marginLeft:"80px", marginTop:"60px", zIndex: "80"}, 400);
				$(".layer2").animate({opacity:"0.6", marginLeft:"40px", marginTop:"30px", zIndex: "60"}, 550);
				$(".layer3").animate({opacity:"0.6", marginLeft:"0px", marginTop:"0px", zIndex: "40"}, 700);
				$("#layer1 div.Description").animate({opacity:"0"}, 600);
				$("#layer2 div.Description").animate({opacity:"0"}, 600);
				$("#layer3 div.Description").animate({opacity:"0"}, 600);
				$("#layer4 div.Description").animate({opacity:"1"}, 600);
				
				setTimeout(changePos, 700);
		 	});
	

});
5

I’ve since incorporated the live() function to handle this. It misbehaves a bit if I click too quickly but for the most part is good.