In this section we will create a WebForm (Test.aspx). Go to
HTML, locate the form tag (<form>) and press Enter. Add the code below to
create the Div layer.
Listing 1
<div id="firstdiv"
style="BORDER-RIGHT:1px;BORDER-TOP:1px;OVERFLOW:auto;BORDER-LEFT:1px;WIDTH:100%;
BORDER-BOTTOM:1px;HEIGHT:300px;BACKGROUND-COLOR:green"></div>
<hr color="blue" width="100%" style="CURSOR:row-resize"
onmousedown="getDivPosition(event)">
“Cursor:row-resize” attribute will change the cursor icon
once the mouse is over the line.
“OVERFLOW:auto” will display scrolls (right & bottom)
when needed.
The code in bold handles the mouse down event; this fires
whenever the mouse button is pressed over an element.
Add the following code to handle specific events in the body
tag.
Listing 2
onmouseup="direction='Released’" onmousemove="SetDivPosition(event)"
Onmouseup (fires after the mouse click is released) sets the
global variable to Released.
Onmousemove (fires when the mouse starts to move on the WebForm)
calls a JavaScript function and sends this event as parameter.
Adding JavaScript
We will create a JavaScript file (ResizingDiv.js) which
separates the HTML code from JavaScript code, containing two main functions.
1- Its purpose is to get the current cursor position and the
Div layer’s height.
2- Its purpose is to modify the Div Layer’s height according
to the new cursor positioning.
It also contains four global variables.
3- Store the current cursor position (var currentPosition)
by default equals to 0.
4- Store the new cursor position (var newPosition) by
default equals to 0.
5- Store the current Div Height (var currentHeight) by
default equals to 0.
6- Store a string indicating the mouse movement (up or down)
by default equals to “Released.”
First of all, right click the solution name in the solution
explorer, click on “Add/Add new Item,” select JavaScript file (rename it to
ResizingDiv) and press OK. Open the JavaScript file and add the below code
which will create the four global variables.
Listing 3
var currentHeight =0;
var currentPosition =0;
var newPosition =0;
var direction='Released’;
The main goal of the below code is to get the Div layer’s
height and the cursor position.
Listing 4
function getDivPosition(mouse)
{
// Assign the global variable to 'Pressed'
Line1 direction='Pressed'
// Save the cursor position to its corresponding global variable
Line2 currentPosition=mouse.clientY;
// Save the Current Div height to a local variable
Line3 divHeight=document.getElementById('firstdiv').style.height
// Remove the px from the value retrieved from above line of code
Line4 heightNoPx=divHeight.split('p');
Line5 currentHeight=parseInt(heightNoPx[0])
}This function will be called whenever the mouse button is clicked.
The code in Line 1 will set the global variable already created to
"Pressed," Line 2 will get the current cursor position on the y axis
and save it into its corresponding global variable, Line 3 will get the current
div height, Line 4 will remove the "px" from the value returned by
Line 3 and put them in an array and finally, Line 5 will set the global
variable currentHeight to the variable located at index 0 in the array and
convert it into an Integer. ParseInt is one of the built-in functions provided
by JavaScript which will extract the integer value from whatever data type is passed
to it.
The code below will change the Div layer height when the
mouse button is released.
Listing 5
function SetDivPosition(mouse)
{
if (direction == 'Pressed')
{
//get new mouse position
newPosition = mouse.clientY;
//calculate movement in pixels
var movePerPixels = parseInt(newPosition - currentPosition)
//determine new height
var divnewLocation = parseInt(currentHeight + movePerPixels)if
(divnewLocation < 10)
{
//set the new height of the div
document.getElementById('firstdiv').style.height = 10+'px'
}
else
{
//set the new height of the div
document.getElementById('firstdiv').style.height = divnewLocation + 'px'
}
}This function will be called whenever the mouse is moving on
your web application. You might have realized that in Line 1 we are checking
when the "direction" global variable is equal to "Pressed"
that means when the getDivPosition function has been called before this
function, so then Line 2 will assign the new cursor position to
"newPosition" global variable, Line 3 will set the variable
"movePerPixels" to the difference between the new cursor position and
the old one and Line 4 will add the movePerPixels value to the old Div height
and store it in a different variable (divnewLocation). In Line 5 and 6 we will
insure that the new div height will not be less than 10 pixels or a invalid
argument error message will be displayed when the new height is equal to null
and that Line 8 will set the div height to the new one. Note that Line
numbering is used only for reference.
This is how the code in the JavaScript file will look at the
end.
Listing 6
var currentHeight = 0;
var currentPosition = 0;
var newPosition = 0;
var direction = 'Released’;function getDivPosition(mouse)
{
// Assign the global variable to 'Pressed'
direction = 'Pressed’
// Save the cursor position to its corresponding global variable
currentPosition = mouse.clientY;
// Save the Current Div height to a local variable
divHeight = document.getElementById('firstdiv').style.height
// Remove the px from the value retrieved from above line of code
heightNoPx = divHeight.split('p');
currentHeight = parseInt(heightNoPx[0])
}
function SetDivPosition(mouse)
{
if (direction == 'Pressed')
{
// Set the new cursor location to newPosition global variable
newPosition = mouse.clientY;
// Calculate The mouse movement in pixels
var movePerPixels = parseInt(newPosition - currentPosition)
// Add the mouse movement to the first div height
var divnewLocation = parseInt(currentHeight + movePerPixels)if
(divnewLocation < 10)
{
// Set the Div Height
document.getElementById('firstdiv').style.height = 10+'px'
}
else
{
// Set the Div Height
document.getElementById('firstdiv').style.height = divnewLocation + 'px'
}
}
}After completing all the stages described before, it is time
to get the JavaScript functions to work in our application. This can be done
by linking the file (ResizingDiv.js) to the WebForm. Go to HTML and inside the
<head> tag write the below code.
Listing 7
<script src="ResizingDiv.js" language="javascript" type="text/javascript"></script>
In the src attribute write the name of your JavaScript file
including the extension name. Note that the file must exist in the root folder
of your application. If you choose to put this file inside a folder under your
web application root element, you have to proceed the file name with the
"/" character. Press F5 to run your application.
If you choose not to include your code in a separated file,
you can copy all the above JavaScript code and place it inside the
<script> tag after removing the src attribute from the linking tag.
Listing 8
<script language="javascript" type="text/javascript">CODE GOES HERE</script>
