Question

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 AJAX and I am unclear if this means to use the client-side javascript from the Microsoft AJAX Library, or if this means to use server-side AJAX doing a partial postback.

The grid can be adjusted fine if I open the IE developer tools and adjust the inline css height:500px attribute of the div element.

<div id="myDiv" style="position: relative; width: 100%; height: 500px; overflow: hidden;">

Should this be done using AJAX, what are the options? JavaScript, JQuery, any advantage of using one or the other?

Edit: thanks

Answer 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!