Javascript/CSS resize div synchronization

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%';
}

Answers


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);

Need Your Help

RestKit many-to-many with Core Data: it works, but am I doing it right?

cocoa restkit

I'm new to RestKit. I'm trying to map a many-to-many relationship, between entities Space and User. For the purposes of this question, assume all the Space objects are in the Core Data store correc...

GWT Clone a widget using DOM.clone

java gwt widget

I wish to programatically clone a widget. I am able to clone the Element inside the Widget with Dom.clone but I don't seem to be able to create a Widget from this cloned element. Is this possible...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.