Resize the button at the click of a button if you need to do this using AJAX?

Question

I want to resize the div on the client side, the default is height: 500 pixels, clicking on my button sets it to height: 700 pixels.

This is the asp.net website.

I ask you to do this using AJAX, and I am unclear if this means using client-side javascript from the Microsoft AJAX library or if it means that server-side AJAX is performing a partial postback.

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

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

If this is 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 trip to the server would be a waste of resources. Ajax (asynchronous Javascript and XML) seems unnecessary here when client-side Javascript will do.

Using jQuery, your code will look like this:

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

In addition, your styles should really be in an external CSS file. In this file you will have:

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

Your HTML originally assigned the class myDivStartHeight(using a more semantic name) to myDiv. Then you can do:

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

Javascript jQuery, jQuery.

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

jQuery , . jQuery , , !

Answer 2

, , javascript, , javascript.

javascript div, , , onclick.