AspAlliance.com LogoASPAlliance: Articles, reviews, and samples for .NET Developers
URL:
http://aspalliance.com/articleViewer.aspx?aId=1077&pId=-1
CodeSnip: How to Create a Resizable Div Layer
page
by Haissam Abdul Malak
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 27296/ 27

Introduction

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.

Modifying WebForm’s HTML code

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>
Downloads
Conclusion

After completing this article, you will see how easy it is even for beginner developers to add new features to their web applications.  This feature is important because it enables your users to interact directly with your application.  The most important thing is that we have created this feature using JavaScript, the client side scripting language, without posting back to the server.


Product Spotlight
Product Spotlight 

©Copyright 1998-2024 ASPAlliance.com  |  Page Processed at 2024-03-28 10:06:04 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search