Resizing A Div On Button Click, Should This Be Done With Ajax?

I want to resize a div from client-side, it's default value is height:500px, clicking my button sets it to height: 700px. It's an asp.net web site. I am asked to do this using AJA

Solution 1:

You can do pure Javascript for this, or you can use jQuery or another client side library. A round trip to the server would be a waste of resources. Ajax (Asynchronous Javascript and XML) seems a waste here when client-side Javascript would do.

Using jQuery your code would be:

$("#button").click(function() {
    $("#myDiv").style('height','700px');
});

Alternately, your styles should really be in an external CSS file. In that file, you would have:

#myDiv {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.myDivStartHeight {
    height: 500px;
}
.myDivNewHeight {
    height: 700px;
}

Your HTML would initially assign a class of myDivStartHeight (using a more semantic name) to myDiv. Then you could do:

$("#button").click(function() {
    $("#myDiv").removeClass("myDivStartHeight").addClass("myDivNewHeight");
});

This can also be done in pure Javascript without jQuery if you have no other need for jQuery.

button.onclick = function() {
    var div = document.getElementById("myDiv");
    if(div) {
        div.style.height = "700px";
    }
};

Without jQuery you open yourself up to managing more browser differences, which won't be terribly fun. However jQuery does add bits to your code and there are times when it can be overkill!

Solution 2:

That what you speak of is all javascript, and yes it should be done by using javascript.

You can write inline javascript directly in your div element, or you can write function to do that for you and call it onclick.