Resizing a div on button click, should this be done with AJAX?

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!

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

Answer 3

you can use the .height() function from jquery (based on javascript), it's quick and easy

http://api.jquery.com/height/ (for width it's http://api.jquery.com/width/ )

if you scroll down you will see an example of what you are asking.

edit: update my information to height and not width :)

this is all you need to add to make it work:

<script>
$("#button").click(function () {
      $("#myDiv").height(700)
    });
</script>