CodeSnip: How to Create a Resizable Div Layer
page 1 of 4
Published: 13 Dec 2006
Abstract
In this article Haissam Abdul Malak will show you an example of how to create a resizable Div layer using Javascript.
by Haissam Abdul Malak
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 27294/ 29

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.


View Entire Article

User Comments

Title: Adding new resizable divs?   
Name: Matt
Date: 2010-11-22 5:47:34 AM
Comment:
Hmm... Can i use a method to use multiple resizable divs? The java is currently set to resize "firstdiv" but the handle is using "getdivposition(event)"... What should i do to use as many resizable divs and handles as wanted?
Title: js   
Name: lamine
Date: 2009-08-10 4:24:38 AM
Comment:
thanks for help
Title: Nice Work......   
Name: Akhya
Date: 2008-06-21 1:57:55 PM
Comment:
Good work ... I am also trying to resize the CR Viewer in the run time.. If possible sugg.. me plz..
Title: Good Work!   
Name: Bala
Date: 2008-01-29 4:31:16 AM
Comment:
Hai Good work!
i also need vertical resizing. can you help me?
Title: vertical resize   
Name: JF
Date: 2007-09-19 11:27:57 AM
Comment:
Do you have a way to rezise DIV vertically?
Title: Comment   
Name: Someone
Date: 2007-05-09 7:48:02 PM
Comment:
Hey, great article. I like it for its simplicity. What about dragging horizontally?
Title: Appreciated   
Name: Haissam Abdul Malak
Date: 2006-12-15 11:14:04 AM
Comment:
Thank u for ur comment...
it is really useful

Best Regards
Title: Super Cool Article   
Name: AzamSharp
Date: 2006-12-13 12:40:36 PM
Comment:
Super cool article! Great Work!!!

On a side note it would be great if the article had any screen shots or gif animation which shows the effect.

But anyway great article!

Product Spotlight
Product Spotlight 





Community Advice: ASP | SQL | XML | Regular Expressions | Windows


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