Question

I have some code in a website that re-sizes a few horizontally aligned divs in a webpage, but they both re-size at the same time in such a way that the divs get displaced and the webpage looks ugly. how can I make the javascript code wait until it finishes shrinking the divs before expanding the other div?

CSS:

#leftpanel,#middlepanel,#rightpanel
{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}

Javascript:

function resizebutton(div)
{
    if (div == 'leftpanel'){
        #this code shrinks the other divs, it should run first, without any other divs being enlarged
        document.getElementById('middlepanel').style.width = '20%';
        document.getElementById('rightpanel').style.width = '20%';
    }
    if (div == 'middlepanel'){
        document.getElementById('leftpanel').style.width = '20%';
        document.getElementById('rightpanel').style.width = '20%';
    }
    if (div == 'rightpanel'){
        document.getElementById('leftpanel').style.width = '20%';
        document.getElementById('middlepanel').style.width = '20%';
    }

    #this code should be run second AFTER the other divs are shrunk, right now it enlarges at the same time that the other divs are shrinking
    document.getElementById(div).style.width = '50%';
}

Answer 1

Sounds like maybe a callback function would work?

Something like:

function resizebutton(div)
{
    if (div == 'leftpanel'){
        #this code shrinks the other divs, it should run first, without any other divs being enlarged
        document.getElementById('middlepanel').style.width = '20%';
        document.getElementById('rightpanel').style.width = '20%';
    }
    if (div == 'middlepanel'){
        document.getElementById('leftpanel').style.width = '20%';
        document.getElementById('rightpanel').style.width = '20%';
    }
    if (div == 'rightpanel'){
        document.getElementById('leftpanel').style.width = '20%';
        document.getElementById('middlepanel').style.width = '20%';
    }


}

function resizeMeFirst(div, callback) {
    document.getElementById(div).style.width = '50%';
    //ok, now that that is done, run the callback function.
    callback(div)    
}

resizeMeFirst(div, resizebutton);