Leopard Desktop with jQuery using jqDock
jQuery adds a whole lot of cool functionality to your websites. It can do a range of things, from animation to AJAX. It’s usually frowned upon to rely heavily on jQuery to design your sites, but it’s fun to go wild every now and then. In this tutorial I’ll teach you how to use jQuery to create a completely coded Dashboard, just like Leopard! This can be handy in hiding a whole lot of gadgets or widgets you don’t have space for!
Preface
This tutorial has a number of components riding upon it. A load of images, a 3rd
party Dock plugin, and the UI.draggable jQuery component, along with, of course,
the jQuery core (v1.2.6). Note: many of the images are probably
copyrighted by their owners. A few dock icons have been taken from their packages
and I’ve used the Leopard Default Wallpaper. But they’re [wallpapers] interchangeable!
- Images.zip
- jQuery + components
Place all of these in a directory. A folder called ‘images’ (with the images within),
a folder called ‘js’ with the JavaScript in it.
Plan of Attack
The plan of attack for this tutorial is as follows. On the desktop, there will a
Draggable Window and a Dock. There is another div called #dashboardWrapper that
hides when the jQuery is used. It’ll degrade without JS, but not well. The JS plan
of attack I’ll explain when we get there.
Disclaimer!
Aside from the icons being used, I’d also like to point out that this isn’t so extensive
as to go all out, getting dynamic widgets etc. You can do that yourselves! This
just provides the basic ‘framework’ to work with. In fact, when I started writing
this tutorial it started off as a WordPress theme, with the widgets as the widgets
on dashboard. It’s still possible! I’ll explain how later on.
Step 1 – structure and file includes
Create a file called index.html. This will be the page that looks like Leopard.
You need to rel in all the JavaScript, and the style.css we’ll create later. Just
start off with this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Leopard Dashboard</title> <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script> <script src="js/draggable.jquery.ui.js" type="text/javascript"></script> <script src="js/dashboard.js" type="text/javascript"></script> <script src="js/jquery.jqDock.min.js" type="text/javascript"></script> <style type="text/css"> @import url(style.css); </style> </head> <body> <div id="wrapper"> </div> </body> </html>
The page then has 3 minimum sections. 2 Divs within the #wrapper (a window and the
actual dashboard), and the dock outside the wrapper. Add these sections in:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Leopard Dashboard</title> <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script> <script src="js/draggable.jquery.ui.js" type="text/javascript"></script> <script src="js/dashboard.js" type="text/javascript"></script> <script src="js/jquery.jqDock.min.js" type="text/javascript"></script> <style type="text/css"> @import url(style.css); </style> </head> <body> <div id="wrapper"> <div class="draggableWindow"> </div> <div id="dashboardWrapper"> </div> </div> <div id="dock"> </div> </body> </html>
Step 2 – Filling in the content
Now we have our 3 basic empty divs. We need to fill them up with the respective
content. Because the Draggable Window is just any old window, you can fill it with
what you want. I created a TextEdit sort of thing, that’s just basically a generic
window with text. It’ll be styled later! Place this within the ‘.draggableWindow’.
<h1><span></span>Leopard Dashboard with jQuery</h1> <div class="content"> <h2>jQuery is awesome!</h2> <p>jQuery is pretty cool. I mean, look at all this cool stuff it can do. A dock (<a href="http://www.wizzud.com/jqDock/">Sourced from Wizzud.com! Thanks!</a>), a dashboard, and draggable windows! Awesome! If you didn't get here via it, this is the demo of a tutorial from <a href="http://nettuts.com">Nettuts</a>.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div>
As said, this is just some filler text for our window. Looks kinda gross, just like
an unstyled page.
Next content filling is the Dashboard. Essentially this can be whatever
You want. Seriously guys, if you take this into your own hands, go nuts. You can
style anything you want within this to look like widgets. As I said, it’s not extensive,
it doesn’t show actual widgets. I’ll explain at the end how to integrate with WordPress.
Place this within #dashboardWrapper:
<ul> <li class="widget"><img src="images/widgets/googlesearch.png" alt="" /></li> <li class="widget"><img src="images/widgets/date.png" alt="" /></li> <li class="widget"><img src="images/widgets/dictionary.png" alt="" /></li> <li class="widget" id="notepad">This is a text widget! You can make any type of widget you want, simply by adding the class 'widget' to an li element within the Dashboard unordered list. Don't stop there though, create custom looking widgets by adding another class (e.g. myClass) and styling that in style.css. Like this one! <a href="http://net.tutsplus.com/">Nettuts</a></li> </ul>
One of the widgets has some text. This is just to show you can do whatever you want.
Treat the li’s as divs! Put whatever! A mini-blog!
Finally, we need the dock. Due to the nature of how the jqDock plugin works, we
can’t use a ul for it too easily. Pain, huh? So instead, it’s just a few images
next to each other in a div:
<img src="images/finder.png" alt="Finder" title="finder"/> <img src="images/dashboard.png" alt="Dashboard" id="dashboardLaunch" title="Dashboard" /> <img src="images/mail.png" alt="Mail" title="finder" /> <img src="images/coda.png" alt="Coda" title="Coda" />
See the one with the id of dashboardLaunch? That’ll be manipulated with jQuery later
on.
All goes according to plan, your page should have a bunch of text and images. Widgets
and icons, text and headers. It’s all junk at the moment.
Step 3 – CSS
The CSS will essentially make the desktop part of the page. It’ll include
the background, etc. Let’s get down to it. Create a new file called ’style.css’,
and place it in the same directory as the other files. Start editing:
Info + Reset
I generally add some info up top of my CSS with my reset so I know what the file’s
for:
/*
Name: Leopard
Author: Nettuts/Harley Alexander
Description: For a Tutorial at http://net.tutsplus.com/, it's aimed at showing how jQuery and jQuery UI can create a leopard style Web Desktop. Although basic, it incompases Dashboard and Windows!
*/
*{
margin: 0;
padding: 0;
}
a{
color: #005693;
}
Desktop interface
Simple. Next up, the body and the window styling:
body{
background: url(images/background.jpg) no-repeat center top;
font: 75%/18px "Lucida Grande", Lucida, Verdana, sans-serif;
overflow: hidden;
}
.draggableWindow{
width: 500px;
overflow: auto;
clear: both;
padding: 0 20px;
float: left;
margin: 40px;
}
.draggableWindow h1{
width: 100%;
height: 21px;
float: left;
font-size: 10px;
text-align: center;
text-indent: -67px;
background: url(images/h1long.png) no-repeat;
text-shadow: #fff 1px 0 1px;
cursor: default;
}
.draggableWindow h1 span{
width: 67px;
height: 21px;
float: left;
background: url(images/h1short.png) no-repeat left;
}
.content{
background: white;
padding: 36px;
}
.content h2{
margin-bottom: 1em;
}
#smaller{
width: 300px;
float: right;
margin: 10px;
margin-top: -100px;
}
all relatively easy. The way the h1s are coded with the preceding them uses
the sliding doors technique to make sure that the top bar resizes accordingly. The
ID #smaller was another small modal box I made, just to check it worked. To check
yourself, simply create a new div with the ID of #smaller, and with a h1/#content
div, you can type a short message. Because #smaller has been defined to be a width
of 300px, it’ll be just that – a small modal box.
Dashboard styles
Only a few styles are needed for the actual dashboard… Just to make the list item
widgets look pretty, and style the notepad widget!
.widget{
position: relative;
z-index: 9999;
float: left;
margin: 1em;
list-style: none;
}
#notepad{
padding: 10px 20px;
width: 185px;
height: 191px;
background: url(images/widgets/sticky.png) no-repeat center;
font-size: 10px;
}
Dock Reset
Generally most of the Dock’s CSS is done in the jQuery Plugin, but for degradable
reasons, and *rough* centering, it still needs a bit of it’s own CSS:
#dock{
position: fixed;
margin: 0 auto;
bottom: 36px;
left: 37.5%;
min-width: 20px;
max-width: 400px;
z-index: 9999;
}
#dock img{
float: left;
}
And after all that code, (though still rough as guts!) your Leopard Desktop should
look something like this:
Step 4 – jQuery
Woohoo! The fun part! Too all those web lords who despise overuse of JS, I do apologize
but you win some you learn some hm? Now the reason I wanted to write this tutorial
so bad is because it actually made me think in order to make it
– not to say other work doesn’t! This I just actually had to think very laterally
to get to the finished product. Gratefully I’ll be able to apply that to other projects
– lets hope you do too!
Before I start jQuery I always write an English version of what’s needed. As a Rule
of Thumb.
- On document load, initiate the dock, initiate draggables and hide any Dashboard
elements that are still there. - When the Dashboard icon is clicked, activate Dashboard!
- When the user clicks back onto the main screen, deactivate the Dashboard.
Fortunately (or unfortunately, depending on how you look at it) it turns out after
figuring it out there’s a tad more to it that that. Create a file called ‘dashboard.js’,
and place it in the JS directory. The JS file reeled in ages ago (up in the HTML
section) is now there! Begin editing!
Always start with a document.ready()!
// Name: jQuery --> Leopard
$(document).ready(function(){
});
Plugin definition
Heavily commented, thus self explanatory. Basically launch the dock, initiate the
draggables:
//launch dock
$('#dock').jqDock();
//draggables defenition
$('.widget').draggable();
$('.draggableWindow').draggable({
handle: 'h1'
});
If you now look at your dock, it zooms (or it should anyway)! Note:
we here at Nettuts probably wont help you too extensively with this piece of technology,
as that’s Wizzud’s Job!. You should also be able
to drag around the displayed widgets and the dialogue window (only by the h1 along
the top as the handle!).
alt="">Hiding Dashboard and initiating the ‘Close Zone’
Eh? Close Zone? See if you simply told jQuery to close the Dashboard when the #dashboardWrapper
was clicked in anyway (inclusive of widgets being clicked), then it’d become a pain
because you couldn’t actually move around the widgets. So a ‘Close Zone’ needs to
be created that is a sibling to the widgets (not nestled around) that takes a z-index
of less that the widgets, but more than the desktop. Tricky, huh? The Layering Looks
something like this:
alt="">
A lot of CSS is used. This is to expand the Dashboard to fit the actual browser
window, and set opacity to 0 so that the animation can fade it in. Hides the entire
element from view too.
//initial hiding of dashboard + addition of 'closeZone'
$('#dashboardWrapper')
.css({
position: 'absolute',
top: '0px',
left: '0px',
width: '100%',
height: '100%',
opacity: '0'
})
.hide()
.append('<div id="closeZone"></div>');
Easy peasy!
Position + deactivation of Close Zone
Like #dashboardWrapper, the Close Zone needs to be blown up to fill the window.
The Close Zone is what actually has the semi-trasparent black background, too!
//Position, and hiding of '#closeZone'.
$('#closeZone')
.css({
position: 'absolute',
top: '0px',
left: '0px',
width: '100%',
height: '100%',
opacity: '0.5',
background: '#000'
});
Launch of Dashboard
Now the magic happens! By showing the Dashboard when the #dashboardLaunch is clicked,
the Close Zone is being shown too. This bit of code, however only initiates the
Dashboard. Currently there is no way to escape it except refreshing – Close Zone’s
Job is next!
//Launch Dashboard + initiation of 'closeZone'
$('#dashboardLaunch').click(function(){
$('#dashboardWrapper')
.show()
.animate({opacity: '1'}, 300);
});
alt="">Escaping/Closing the Dashboard
The Close Zone finally gets the spotlight.
//closeZone's job: escaping the Dashboard
$('#closeZone').click(function(){
$('#dashboardWrapper')
.animate({opacity: '0'}, 300)
.hide(1);
});
Now this has an interesting note. For some reason, jQuery wont do the animation
unless the ‘.hide’ has a time of 1 tenth of a millisecond. Great escapable functionalty!
But what about links…
Apart from the Close Zone, the only other obvious thing that will need to escape
the Dashboard with animation is if a link is clicked. How? Simply the same ‘function’
as with the Close Zone.
//fadeout of dashboard and when a link is clicked within
$('#dashboardWrapper a').click(function(){
$('#dashboardWrapper').animate({opacity: '0'}, 300);
});
And that’s it! Your dashboard.js should look something like
this js file
Integration into WordPress
As promised, a simple push in the right direction as to how to use this With WordPress.
Fundamentally, all code is eventually HTML and JavaScript when it gets to the browser
end, right? No PHP, no ASP.NET, just maybe some XML too. This principle is essential
to understand, as it means you can apply code to any medium, provided
it’s got the same IDs and classes.
Consider the ‘#content’ div of your WordPress blog, given a class of ‘draggableWindow.
Give it a h1 at the top, and hey presto! Windowed Post Content. The sidebar, given
an ID (or change it within the JS code) of ‘#dashboardWrapper’, it will automatically
hide until called. That means that all your li widgets for archives and categories
and everything are now seperate widgets.
Even dynamic sidebars have lis with specific classes, allowing them to be styled
like real widgets! The Dock, I’d say is the only thing that would actually need
be added. Not to worry! Due to it’s positioning, it’s only a div with a bunch of
images in it.
If you want your other Dock icons to link places, An inline a tag wont break anything!
The Static HTML that is spat out by WordPress (or any web technology, really) is
applicable to any CSS or JS created, provided the IDs and Classes are aligned.
Wrap up
OK, put the frowny No-Extensive-JS-Usage Grandaddys at rest, and do your best not
to use jQuery to this extent. This tutorial was just to show how much fun the animation
can really be, and how simple it is to create effects. In fact, if anybody has seen
any effects I’ll willingly wait till 5 have been proposed and write an article on
how to do each!
- Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Harley
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
Tom Elders - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Man this is A.W.E.S.O.M.E!! Kudos to WIZZUD.COM!
This is sick! I can’t wait to use it for my site. http://www.robertfauver.com It should work well with the whole OS X interface thing I got going on.
Wow! G.R.E.A.T ! ! ! Very Nice Smooth movement, which i do not found on some Dock.
@Al: Next weeks (in about a day?! Hope I can get it done by then…) There will be a follow up tutorial that goes into:
-Adding/Removing Widgets (I’ve got the widget panel working, but can’t figure out how to add them at the mouse’s coordinates/specific to the widget dragged (the interface is there, nevertheless).
-A finder window (that could be your lightbox I suppose) that opens when a macHD icon is clicked (thats draggable (and selectable if I can fix a bug).
-Stacks… No way… It’s nearly impossible heh. I’ll still keep trying to figure it out, but no promises!
Ifd there are any other suggestions that people would like to see I’m more than willing to figure it out and write about it! Let me know!
~Harley
@Harley
I wasnt saying that jQuery is crap. The “tutorial” is bad as it just shows you how to implement something that I am sure the jqDock documentation does.
I was saying that the jqDock’s take on an OS X doc was bad, granted I’ve never seen a decent doc done in JS since googleX.
I took the time to check it out in different browsers because jQuery stuff is usually solid and I expected more. I thought that the initial buildup on mouseover was a FF3 issue. I thought that the jumpiness when you go from image to image was a FF3 issue. I thought that the clunky widget view was a FF3 issue…get my point?
Nettuts has some great tuts, but this is not one of them.
Mark, the basis of what you just said is /mainly/ that jqDock does everything this does, and is a bad plugin, as well as saying that jQuery should always be cross browser supported. Granted it should, but I can’t do anything too extensive about the jqDock. I’d suggest looking at another jQuery or JavaScript dock. It’s above me, I wouldn’t have a clue where to start! Correct me if I’m wrong, but I don’t believe jqDock tells you how to create a Dashboard?
Thanks for taking the time to write this tutorial, jQuery is great and its nice to take some time as developers and have some fun with all the code libraries floating around. Lighten up people and have some fun with it, it isnt meant to be practical, just fun and inspiring. Great tut.
Regards,
Drew
To all of those claiming this is style of browser-UI is impractical can you elaborate? To me this seems like something that could be very practical, and useful, for some applications.
James: not to pick on you
, but I think your comments are probably representative of many objections… to me, they seem perhaps a bit too quick and off-the-cuff:
> 1. Biggest problem of all, it won’t work if you don’t have JavaScript
> enabled.
So. Flash-enabled apps require flash. Sometimes users require rich UIs, and these may be best deployed in browser. If you need the functionality why is a requirement like javascript an issue?
What about Ajax? That requires js. Is that a problem?
> 2. It’s not what users are used to seeing when they visit a website.
> One day, maybe it will be… In fact, in the future I suspect a more
> suitable technology will arise for doing such things as this, and at
> that time people will be used to it… but for now it’s impractical!
That’s a broad claim. It’s different, but is it any more different than a flash app? Than something like liferay?
I personally found it quite usable.
> 3. Making an entire website in this way would mean a very heavy
> page weight. 4. Should draggable windows and animated buttons stand in the way
> of your user getting the information they want? After all, websites
> are designed around the requirement to display information to the
> user.
Why not just dump everything out as text, then? Consider this: maybe draggable windows and animated buttons don’t actually get in the way, but are a more intuitive, useful metaphor?
> 5. Websites should be centered around and tailored towards the user
> … Flatly saying that this method is the future is a gross misconception!
> Not all sites require this, if any! User’s always come first.
Agreed. I can see a lot of uses for sites like this, though.
> What benefit does an interface like this really offer over one which is
> more conventional? Oh, apart from a bit of eye candy?
Well, maybe better usability?
Wow! amazing stuff ! well done!
good job,but why IE6 have some bug?
Just gave me ideas for a client that has a mac store
Hmm, I can select the text in the draggable window in FF3.0.7
Anyone know how to fix this?
Tnx!
Excellent Job, this is like a small project, which you have done. Awesome! Would like to thank for your valuable effort.
Thank you very much,
Vivek
[Founder of Developer Snippets – http://www.developersnippets.com
daha iyi olabilirdi
Super
wow another great stuff from query thanks for nice tutorial
if anyone cares…
an exception was thrown on line 240 of the jquery.jqDock.min.js sometimes.
Solved it by asigning ‘true’ to ‘rel’ when the exception was thrown. That’s it.
I’m pretty new to this … but this is some cool stuff!!!
How i can insert multiple dashboard ?
Thats so cool! Awesome. i love things that aren’t essential/practical, but just plain cool and creative. nice work
It is really nice. this is good thing.
@Somebody
First off, flash is not the best way to build a website today because of the lack of browser compatibilities, sometimes because no one likes to have to download the new flashplayer just to see a website, other times because most smartphones/blackberry (etc..) cannot open those websites.
And yes, if ANYTHING in a website doesn’t work it is a problem!
2. That is not usable, for sure, you wouldn’t like to go through that many windows to locate something in a website, you must see that even though OS X works that way there is a reason why websites doesn’t, in-browser usability.
3. web-design is suposed to be clean, fast and easy to use, and if possible not boring.
4. Read number 2 again.
I did not mean to be rude, apologise if I was, I liked the tutorial, I’ve done a windows mock-up years ago, much easier (lol)…
that is all for now…
Omg! This is absolutly fantastic ! Perhaps, with another background and some more windows its quite cooler
wonderful
Very Nices! but, Not work ie 6!
Halfway through the year SPIN tipped their hand by offering the 20 Greatest Albums Of 2009 … So Far. If you remember, the list wasn’t in any specific order. Their 40 Best [url=http://www.uggs-boots-store.net]ugg boots store[/url] Albums Of 2009 are, and it’s interesting to see all the titles that popped up after the last one was published. As well as the albums that missed the cut after [url=http://www.watchesxm.com]Cheap watches[/url]
they were spun a bit more: Peter Bjorn And John, Blk Jks, Regina Spektor, Glasvegas, Mavado, and Sa-Ra Creative Partners are nowhere to be found. The list — one of oh so many lists — is also refreshingly interesting in and of itself, a fine example of a publication stepping outside of the hive mentality and coming up with something that feels personal. Even if I don’t personally agree with a lot of it.
Leopard’s dock icon magnifying effect are awesome. I like it so much. Thanks for your informative post.