Ziff-Davis Enterprise 
DevSource: Microsoft Developer Resource
Add OnsArchitectureLanguagesTechniquesUsing VSForums
 
Home arrow Techniques arrow Draggable, Collapsible, Dynamic DIV windows with JavaScript
Draggable, Collapsible, Dynamic DIV windows with JavaScript
By Jeff Cogswell

Rate This Article:
Add This Article To:
Draggable, Collapsible, Dynamic DIV windows with JavaScript
( Page 1 of 3 )

Adding collapsible, draggable windows is easy using JavaScript. All it takes is a little understanding about the browser event model, and how to create DIV elements dynamically. In this article, Jeff Cogswell shows you how.

UPDATE: The source code can now be found here.

ADVERTISEMENT

With just a small knowledge of JavaScript mixed with some browser concepts, you can easily put together a web page that includes dynamic, moveable windows that you can collapse to just a title bar.

Before getting into the details, I'll show you an example, and some plug-and-play HTML that shows how to use it, in case you want to skip the details.

The figure below is the sample dragwins.html file that demonstrates the windows. This sample initially creates one window containing custom content, which is on the left. The sample also includes a link that dynamically creates new windows; I created two of them, shown on the right.

These windows can be dragged around, and they can be moved from back to front (by clicking on one). And they can be collapsed to their title bar, as you can also see in the lower-right of the figure.

Plug and Play

I wrote this code so you can easily use it in your own pages and specify your own content to put inside the draggable windows. The code includes style classes and JavaScript code. The styles are important because the code tests the style class names to know which elements are the draggable elements. You're free, however, to change the look (such as fonts and colors) of the styles.

To use the code in your own page, download the sample code. Copy the style section into the head of your own page (or into a separate stylesheet .css file), and copy the JavaScript code into your own page (or into your own separate .js file). Also save the two attached GIF files.

To add a window to your code, create a DIV tag containing the HTML that you want to place inside the window. Make the DIV tag invisible by setting its display style to none, and include an ID for the tag, like so:

 <div style="display:none" id="FirstContent">
<div style="font-size:12px;font-family:Arial,Helvetica,
sans-serif;background-color:#E0E0E0;padding:5px;height:300px;">

Some html that will appear

</div>
</div>

I used two DIV tags here; the outer one includes the ID and display setting. The inner one is optional, and is where I specify the styles I'm using in the HTML. (Don't combine these into a single DIV tag, as any styles in the outer DIV tag are ignored.)

Next, call the CreateDropdownWindow function to create the window, like so:

<script type="text/javascript">CreateDropdownWindow('My Window', '300px',
true, 'FirstContent');</script>

The first parameter to the function is the title to appear in the draggable window. The second parameter is the width of the window, as a string, including the units. The third parameter is a boolean specifying whether the window can be dragged. The fourth parameter is the ID (as a string) of the DIV tag you created earlier containing the content.

That's it! You can also generate the windows dynamically at runtime by calling the CreateDropdownWindow in response to a user action. For example, you can use an A tag to call the function like so:

<a href="javascript:CreateDropdownWindow('Window', '400px', true,
'FirstContent)">Create another window</a>

The sample code that you can download is an HTML file that demonstrates both adding windows dynamically and statically specifying a window.

Note: The JavaScript code has two .gif filenames hardcoded into it, and I've included them in the download. These are the buttons that appear in the upper-right corner of each window. When the window is expanded, the button has a little white bar at the top, and when the window is collapsed, the button has a little white bar at the bottom. You're free to substitute these with your own images.



 
 
>>> More Techniques Articles          >>> More By Jeff Cogswell
 



DevSource video
Devsource Video Series
Manipulating Society through Technology
Jeremy Bailenson, Director of the Virtual Human Interaction Lab at Stanford University, talks about virtual reality, avatars, Moore's law, how real world behaviors influence online reality, and societal manipulation through technology!
>> Play video
>> Read article
>> See all videos
DevLife Blog

Julia explores the Robotics Studio! (It's for more than you think.)

MSDev Blog

Messages for Bill Gates!

Make it Work
.NET makes runtime type checking a breeze. See what Peter has to say about it in this week's tips!
News
Microsoft Counts on App Support for Vista
Microsoft has taken pains to demonstrate that Windows Vista will have ample application support.
DevSource RSS FEEDS
XML Want an easy way to keep up with breaking tech news? And the Get DevSource headlines delivered to your desktop with RSS.