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
- http://craigsnedeker.blogspot.com/ Craigsnedeker
- http://www.freshclickmedia.com Shane
- http://www.kevinpapst.de Kevin
- http://InsightOrange.com Salman Sadiq
- http://www.1pixelbrush.com Dan
- http://craigsnedeker.blogspot.com/ Craigsnedeker
- http://stevejamesson.com Steve
- http://vladocarrer.blogspot.com/ vladocar
- http://moukadesign.altervista.org/ Salmen
- davros
- http://none,yet Paul
- http://ndezigns.com Nate
- Adan
- http://www.insicdesigns.info insic
- http://laminbarrow.com Lamin Barrow
- http://www.freshclickmedia.com Shane
- Anonymous
- http://matt-radel.com Matt Radel
- http://broof.de BroOf
- http://curtisallenblog.com curtis allen
- http://greenflipflops.com Gabe
- http://greenflipflops.com Gabe
- http://greenflipflops.com Gabe
- http://enhance.qd-creative.co.uk James
- http://paulgendek.com Paul Gendek
- http://www.ben-griffiths.com Ben Griffiths
- REO
- http://jeremysimkins.com/ SoN9ne
- Adam
- Dayton
- Bryan Grajales
- ariyo
- Jigsaw
- ashvin
- cheese
- http://enhance.qd-creative.co.uk James
- http://www.wlab.ru F_inch
- http://blog.demods.com Demods
- http://laminbarrow.com Lamin Barrow
- http://enhance.qd-creative.co.uk James
- http://www.1stwebdesigner.com Dainis Graveris
- http://bulletproofbox.com/ Stuart
- Tritos
- Mark
- http://www.subooa.com mattems
- Al
- http://www.andrislinz.ch Andris