jquery/javascript: setting z-index after event

Question

I'm displaying a stack of images and what I need to do is fade the top one out and then move it to the bottom of the stack and bring it's opacity back to 1.0. Everything is working fine except for changing the z-index on the object (div) that contains the image. I've positioned the div absolutely, though I am creating it dynamically, not sure if that'll make a difference. Here's my code [Note: The fade in and out are commented in for debugging purposes right now]:

// JavaScript Document

var Summary = {};

Summary.hasTemplate = true;
Summary.template = {

    summaryID : 'pageName',
    itemCount : 5,
    speed : 2000,
    pause : 2000,
    imgDirectoryPath : 'css/images/summaryImages/',
    imgPrefix : '26_01_010_###',
    imgExtension : '.png',
    imgCountStart : 1,
    imgCountEnd : 5,
    imgStep : 1,
    imgSize : {width : 400, height : 400},
    imgFiles : {},
    containerPos : {x : 0, y : 0}
}


function buildSummary() { 

var summaryCode = "<div id='summaryWrapper'>"; 

//check to see if the summary is running off a template or unique files
if (Summary.hasTemplate == true) { 

    //set a number to start our img count from (one less than the start number in the object)
    var imgNum = Summary.template.imgCountStart-1;

    //build an array of the img prefix components
    var imgPrefixComponents = Summary.template.imgPrefix.split("_");

    //check to see if there is more than one underscore, then build out the image prefix
    var imgPrefix = "";
    if (imgPrefixComponents.length < 2) { 
        imgPrefix = imgPrefixComponents[0] + "_";
    } else {
        for(var p=0; p<imgPrefixComponents.length; p++) {
            if (p != imgPrefixComponents.length-1) {  
                imgPrefix += imgPrefixComponents[p] + "_";
            }
        }
    }

    var imgExtension = Summary.template.imgExtension;

    //get the count of the leading zeroes (use length-1 in case the image name contains other underscores)
    var zeroCount = imgPrefixComponents[imgPrefixComponents.length-1].match(/#/g).length;

    //build out the image prefix
    for(z=0; z<zeroCount; z++) { 
        imgPrefix += "0"
    }

    //loop through the image count
    for (i=0; i<Summary.template.itemCount; i++) { 

        //increment the image number
        imgNum++;

        //start building the image wrapper
        var imgWrapperCode = "<div class'summaryImg' pageID='" + Summary.template.summaryID + "' thisImg='summaryImg_" + imgNum + "'  style='z-index:" + (100+imgNum) + "; position: absolute; top: 100; left: 100; width:" + Summary.template.imgSize.width +"; height: " + Summary.template.imgSize.width + ";'>"; 

        //get the img directory path
        var imgDirectoryPath = Summary.template.imgDirectoryPath;

        //build the imgFilePath
        var imgFilePath = imgDirectoryPath + imgPrefix + imgNum + imgExtension

        imgWrapperCode += "<img src='" + imgFilePath + "'></div>";

        summaryCode += imgWrapperCode;

        Summary.template.imgFiles[i] = imgFilePath;

    }

}

Summary.summaryCode = summaryCode;
}

function setUpSummaryFade() { 

//check to see if we are working with a template or not
if (Summary.hasTemplate == true) { 

    //get an array of the image divs, the summaryID let's us target a page so we're not ligthing them all up at once
    var imgDivs = $('div[pageID="' + Summary.template.summaryID + '"]');

    //build an array of z-indexes
    var zIndexes = new Array();
    for (i=0; i<imgDivs.length; i++) { 

        var thisImgDiv = imgDivs[i];
        var thisZIndex = $(thisImgDiv).css('z-index');
        zIndexes.push(thisZIndex);
    }

    i = imgDivs.length;
    setInterval(function() { 
        i--; 
        if (i > -1) { 
            fadeDivs(imgDivs[i], zIndexes, imgDivs); 
        } else { 
            i = imgDivs.length;
        }

    }, Summary.template.pause);
}
}

function fadeDivs(thisDiv, zIndexes, imgDivs)  {

//$(thisDiv).fadeOut('slow');

//change it's z-index
var maxZIndex = zIndexes[zIndexes.length-1];
var minZIndex = zIndexes[0];

for(z=0; z<imgDivs.length; z++) { 

    var thisDiv = imgDivs[z];
    var thisZIndex = $(thisDiv).css('z-index');

            //EDITS: Works on the first element, but not on the others
    console.log("Start z: " + $(thisDiv).css('z-index'));
    if (thisZIndex == maxZIndex) { 
        $(thisDiv).css('z-index', minZIndex);
    } else { 
        $(thisDiv).css('z-index', thisZIndex+1);
    }
    console.log("End z: " + $(thisDiv).css('z-index'));
}

//bring it back to life
//$(thisDiv).fadeIn('fast');

}

You should put the example on something like jsfiddle with the HTML. — chadpeppers
– chadpeppers, Commented Aug 24, 2012 at 13:29

Asciiom · Accepted Answer · 2012-08-24 13:32:18Z

1

this line is wrong:

if (thisZIndex = maxZIndex) {

returns true always, you should change it to

if (thisZIndex == maxZIndex) {

answered Aug 24, 2012 at 13:32

Asciiom

9,9757 gold badges42 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

PruitIgoe Over a year ago

damn it...doh, I'm still f'in half asleep...thanks for the extra set of eyes... : D

Asciiom Over a year ago

I know how that feels :) You're welcome, please mark the answer as accepted if this answers your question

PruitIgoe Over a year ago

Here's a related issue - the stack order is working fine now, however, if I have the code to change the stack order in, it fires too quickly and you don't see the fade.

Asciiom Over a year ago

You should create a new question for that I think, I'll take a look

Collectives™ on Stack Overflow

jquery/javascript: setting z-index after event

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related