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.