INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS
Come Join Us!
Are you a
Computer / IT professional?
Join Tek-Tips now!
- 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.
Partner With Us!
"Best Of Breed" Forums Add Stickiness To Your Site
(Download This Button Today!)
Feedback
"...You have made an incredible site which is truly a great help to me in solving problems. A tip of my hat to you!..."
Geography
Where in the world do Tek-Tips members come from?
|
jQuery
|
Create dynamic draggable windows.
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
|
|
 |
|
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:
Talk To Other Members- Notification Of Responses To Questions
- Favorite Forums One Click Access
- Keyword Search Of All Posts, And More...
Register now while it's still free!
Already a member? Close this window and log in.
Join Us Close
