INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

jQuery

Create dynamic draggable windows. by Geates
Posted: 8 Jul 12 (Edited 9 Jul 12)

I recently started using jQuery because of the enhancement prospects it adds to a site. One of enhancements that jQuery offers is the ability to easily create a basic windowing environment. I have recent spent several hours working my way through learning jQuery to produce such an environment and here is, fundamentally, what I came up with.

I'll go through the code briefly so you know what components are at play. I would rate this difficulty at high-intermediate.

Create the HTML document and include jQuery 1.5 stored on Google's severs. We need to also include jQuery-ui 1.8 to use certain UserInterface effect like .draggable().

CODE

<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

Here is the function to dynamically create a div element, assign it properties, and add it too the DOM and document (in this case, to DIV #desktop.

CODE

<script language="javascript">
	function createWindow() {
		//create div element in DOM
		var element = document.createElement('div');

		//use jQuery syntax to set properties
		$(element).html("Hello World");
		$(element).addClass("window");
		$(element).draggable();

		//add to desktop div
		$("#desktop").append(element);
	}
</script> 


Include the CSS for the desktop and a window

CODE

<style type="text/css">
	.desktop { position: absolute; top: 0px; left: 0px; width: 300px; height: 300px; border:1px solid #000; background-color: #BBE; }
	.window { position: absolute; top: 50px; left: 50px; width: 100px; height: 100px; border:1px solid #000; background-color: #EEE; }
</style> 

Create the desktop div and make a link to create a new window
<div id="desktop" class="desktop">
<a href="javascript: createWindow();">Create Window</a>
</div>

And it all put together.

CODE

<html>
	<head>
		<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
		<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
		<script language="javascript">
			function createWindow() {
				var element = document.createElement('div');
				var html = "window";

				$(element).html(html);
				$(element).addClass("window");
				$(element).draggable();
				
				//add to desktop
				$("#desktop").append(element);
			}
		</script>
		
		<style type="text/css">
			.desktop { position: absolute; top: 0px; left: 0px; width: 300px; height: 300px; border:1px solid #000; background-color: #BBE; }
			.window { position: absolute; top: 50px; left: 50px; width: 100px; height: 100px; border:1px solid #000; background-color: #EEE; }
		</style>
	</head>

	<body>
		<div id="desktop" class="desktop">
			<a href="javascript: createWindow();">Create Window</a>
		</div>
	</body>
</html> 

Just copy the code to a new .html file and double-click. Imagine the possibilities when combined with AJAX.

-Geates

Back to Javascript FAQ Index
Back to Javascript Forum

My Archive

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close