Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Create dynamic draggable windows.

jQuery

Create dynamic draggable windows.

by  Geates  Posted    (Edited  )
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 [tt]div[/tt] element, assign it properties, and add it too the DOM and document (in this case, to DIV [tt]#desktop[/tt].

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
Register to add this FAQ to your archive
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top