In a project I was recently working on, one of the WebForms was
composed of two Div layers; the first was used for displaying metadata and the
second for displaying a file viewer component. The problem was raised when the
metadata is large; the users had to scroll down to view the needed information.
So we had to give the users the ability to resize the Div layer.
Using JavaScript, we can add this interaction between the
web application and the users.
Before you continue, you should have a basic understanding
of HTML, XHTML, and JavaScript to keep up with this demonstration.
In this article we will create a WebForm containing a Div
layer and below this layer we will create a horizontal line. Once the user
presses on this line and moves the mouse, the layer’s height will increase or
decrease according to which direction the user moves his mouse (up or down).
To accomplish this project we have to:
1- Create a new web application containing one WebForm; add
the Div layer and the horizontal line by modifying the HTML code, and add
handle some events.
2- Add a JavaScript file (ResizingDiv.js) to the project,
link it to the WebForm, and write two responsible functions for the resizing
operation or write the code directly inside the HTML.
