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://nettuts.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://nettuts.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!).
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:
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);
});
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.
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Craigsnedeker September 19th
WOW that’s sweet!!!
Awesome job!
( )Shane September 19th
That’s quite an impressive demo you’ve got there!
Although for most projects, this isn’t practical, it’s an excellent look at what’s possible.
Thanks for posting.
( )Jeffrey Way September 19th
@Shane – It absolutely isn’t practical – and Harley would agree. This is just to have fun with the library.
( )Kevin September 19th
Funny demo. Impressive what you can achieve with JQuery.
( )Thanks
Salman Sadiq September 19th
one of the best tutorials on the net
( )Five Stars
Great work
Keep coming
you guys are creative cows
love it
yes
love it
Dan September 19th
jQuery FTW! Really cool to see the possibilities in action.
( )Craigsnedeker September 19th
You could transform it into a awesome dynamic homepage!
( )Steve September 19th
Very nicely done! Smooth and slick, and of course totally impractical.
( )vladocar September 19th
Great tutorial! I did something similar with jQuery: http://www.allapis.com/Allapis_web_desktop.htm
( )Salmen September 19th
great job
( )davros September 19th
jerky, unresponsive and ultimately useless…
( )Paul September 19th
A great tutorial. Just a quick question though. how do I make the dock images launch new dragable windows? You know, if you click on one of the dock buttons how do you make it launch? And then is there a way to make the close button on the top left corer actually close the window?
( )I assume that the answer is in jquery and I admit that I’m new to it. Sorry if its a bit simple.
Thanks!
Nate September 19th
Really cool. Didn’t think anything like this was possible.
( )Adan September 19th
A couple of you have said that this is in impractical, what is actualy wrong with using this method?
Define the practical way, and here me out for a second..
Over the past 5-10 years, we monkeys have developed quicker than a chimp could figure out which shape to but in the circle whole. Our ways of doing things have become more and more, defiant. We use creativity, real artistic talent, well, some of us do anyway, and we also do everything differently.
You say this is impractical as if there is only a few ways, or should I say, correct ways of doing things. But what happens, in another 5 or 10 years time, what we are doing now, becomes the impractical. So answer me this, if the practical method was to only do things in certain ways, then “design” would become impractical yes? If the impractical now become practical then the practical now would become impractical, yes?
So why is you people, a lot of you people, always make a judgement at first glance, without actually thinking about it first. I’d suggest you get out of this business, caio for now.
( )insic September 19th
Really nice result. thanks for sharing this.
( )Lamin Barrow September 19th
Very nice. You guys are making it very hard for me to resist Jquery.
( )Shane September 19th
@Jeffrey – exactly what I meant
Code like this does push the boundaries though, and it’s a source of inspiration.
( )Anonymous September 19th
Bad @$$
( )Matt Radel September 19th
Holy crap – that’s pretty awesome. Very, very nice.
( )BroOf September 19th
SO niiiiice!
( )curtis allen September 19th
nice jquery effect
( )Gabe September 19th
2 bummers I noticed with the dock- 1 in Firefox, the “enlarging” doesn’t work until I click someplace on the page. 2 in IE, the opacity settings screwed up the widgets – I had to remove the references to opacity to make the widgets show up in IE7.
( )Gabe September 19th
@myself – I forgot to mention the tutorial is sweet! And about Firefox – it looks like I was “hover-happy”, I hovered before the code was totally loaded, that’s why it didn’t enlarge like I expected – my bad!
( )Gabe September 19th
Sorry about all the comments – I just added something to fix the IE bug I noticed: on the dashboardLaunch click, I added “$(’.widget’).css({opacity: ‘1′});” after the dashboardWrapper animation and that fixed it (in IE7 at least).
( )James September 19th
Meh…
I think it’s great that we are offering this type of inspiration on NETTUTS and as Jeffrey said , this is not meant to be an applicable example … It’s just meant to show off the incredible flexibility of jQuery.
Hopefully people will only be inspired by this and will not actually take it too seriously.
@Adan, in your comment you wrote, “what is actually wrong with using this method?”
hmmm,
1. Biggest problem of all, it won’t work if you don’t have JavaScript enabled.
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!
3. Making an entire website in this way would mean a very heavy page weight. < something which still matters believe it or not.
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.
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.
What benefit does an interface like this really offer over one which is more conventional? Oh, apart from a bit of eye candy?
And also specifically at @Adan, what on earth are you talking about design becoming impractical? Design is focused on *practical* solutions… so how would it ever become impractical? I think you’re under the impression that “design” is art… It isn’t! Design is about using ideas (old and new) to tailor a solution which is both practical and communicates a piece of information effectively. You’re saying that just because this idea is “new” (which it isn’t) it is innovative… Not everything that is new is necessarily innovative!
@Harley, it’s a nicely written tutorial.
( )Paul Gendek September 19th
Wow, the Dashboard thing is awesome! The dock is slow to return to default size on mouseout but other than that, everything looks great!
( )Ben Griffiths September 19th
Some great ideas there, thanks for the inspiration
( )REO September 19th
very inspireing. Well written and somewhat useful. Thanks!
( )SoN9ne September 19th
This is really nice! i love the dashboard, the dock seemed a little slow but otherwise it is a great idea. Good job on this
( )Adam September 19th
This has to be one of the coolest things i have ever seen!
( )Dayton September 19th
@Adan: The reason this is impractical is that you are already using an operating system with a desktop environment. I see this as a tutorial on what jQuery CAN do and not what you SHOULD do. Are you telling me, in the future we’ll have to figure out each and every website that wants to re-invent the desktop. Sure, things will change and what we’re doing now will seem like ancient history but the basics aren’t gonna change. The web should be about information, not about presentation. Not that it isn’t important to be stylish and usable, but this is TOTALLY impractical, unless you wish to create an online operating system in which case there are already several and I’m sure there would be some copyright issues with using Apple’s interface. Anyone who is just learning this stuff, remember the WHY is more important than the WOW.
( )Bryan Grajales September 19th
Icons are too small!
( )ariyo September 19th
The page doesn’t work on resolutions bigger that 1280×954 on firefox (Don’t care about IE). However, good work you got there man. Thanx for sharing that. Well done!
( )Jigsaw September 19th
Very nice tutorial!
( )I have a question, is there anyway we can make #dock items sortable? I used UI-sortable plugin, but it does not change the position of dock item when I release the mouse. here’s the function I used:
jQuery(’#dock’).sortable({});
Thank you!
ashvin September 19th
awesome and cool!
( )cheese September 20th
Lots of weird problems with it in IE
( )Harley Alexander September 20th
Hey guys!
Firstly for all the positive feedback – Thanks! It’s so good to hear when people love something you’ve put time and effort into. Just a few things I’d like to say.
I totally agree with Jeff, Shane, and whoever else said it’s impractical. Sure it’d be a fun website for the specific market (I’m currently writing up a proposal to apple computers… Not really), but it was more geared at showing posibilities, thinking outside the square from just ‘WOW THAT THING MOVES AND FLASHES!’ (even though essentially this is what this tutorial does
). But yeah… More just inspiration, and a fun way to get to know Plugins and the .animate() capabilities.
Next week’s article will be an extension on this. Hopefully, I was thinking of getting stacks, selectables for the actual desktop itself, adding/removing widgets (with the little panel along the bottom too). Sortables for the dock would be awesome, maybe on a double click a finder window comes up. Who knows, I enjoy figuring out/writing about it, so I’m more than happy to keep it coming.
IE. I know you guys hate how it doesn’t work, and so do I for just that – it doesn’t work. IE that is. IE is my biggest pet hate, as every single problem I have with websites has to do with that. I’m on a mac, so Opera, FF and Safari are what I always test in. I should get Darwine or some similar alternative, but that’d just make me feel guilty. I know it doesn’t work guys, I don’t expect it to. I’ve stopped developing for IE unless clients specifically ask for it, which is rare. Never get many questions about it either
.
I know the dock is slow – that’s a problem with jqDock, not the jQuery code. As said in the tutorial, if you want support for that, head over to Wizzud and ask the guy who created the script!
Thanks for the feedback, will be working on additions tonight!
Harley
( )James September 20th
“I’ve stopped developing for IE unless clients specifically ask for it, which is rare. Never get many questions about it either
.”
Huh!?
~60% of the world use a version of IE to browse the web – Do you tell your clients this?
Internet explorer obviously has some problems but as long as you’re aware of them it’s usually simple to fix as you code.
( )F_inch September 20th
It’s interesting. Is it possible to do dock with icons’ reflection?
( )Demods September 20th
Wonderful tutorial, thanks…
( )Lamin Barrow September 20th
Actually the is not that new, I have seen an effect like this on ndesign-studio a couple of months ago.
( )James September 20th
@Lamin ^
You mean this? – http://www.ndesign-studio.com/demo/css-dock-menu/css-dock.html
Done over a year ago… So you’re right, it’s not a “new” technique…
( )Dainis Graveris September 20th
Amazing tutorial! Didn’t know that jquery does something like this so easily!
( )Stuart September 20th
I’ve had jQuery UI downloaded and stored away in a redundant folder for ages (I know, it’s a crime). I’ll be retrieving that pretty shortly
And to think I used to hate JavaScript libraries…!
( )Tritos September 20th
That’s pretty neat very dynamic, now just the question begs: What practical purposes could this serve?
( )Mark September 20th
This is a bad tutorial and the library that is used to create the doc is bad too. Very slow (tried six browser) and buggy.
( )Harley Alexander September 20th
@Tritos: It’ been said above that this is by no means practical – simply showing the potential jQuery can have!
@Mark: Thanks buddy, I’m glad, and I’m sure all the guys over at jQuery are glad to hear you put so much effort as to check 6 browsers into something you deem crap
( )mattems September 21st
this is kinda cool, needs to be more swift when you initially roll over.
( )Al September 22nd
How can I add the lightbox effect to the page?
( )Andris September 22nd
I’m stoked! Flash is going to be more and more unnecessary.
( )ericb September 22nd
Man this is A.W.E.S.O.M.E!! Kudos to WIZZUD.COM!
( )Robert Fauver September 22nd
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.
( )John September 22nd
Wow! G.R.E.A.T ! ! ! Very Nice Smooth movement, which i do not found on some Dock.
( )Harley September 22nd
@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
( )mark September 22nd
@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.
( )Harley Alexander September 23rd
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?
( )Drew Douglass September 23rd
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
( )Somebody November 13th
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?
lolstar January 17th
Wow! amazing stuff ! well done!
( )sam February 12th
good job,but why IE6 have some bug?
( )Angel March 15th
Just gave me ideas for a client that has a mac store
( )Fritz March 19th
Hmm, I can select the text in the draggable window in FF3.0.7
Anyone know how to fix this?
Tnx!
( )Vivekanand March 25th
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
Güvercin March 29th
daha iyi olabilirdi
( )Thib April 16th
Super
( )pipisdicelana May 12th
wow another great stuff from query thanks for nice tutorial
( )gardek June 18th
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!!!
( )Gion September 19th
How i can insert multiple dashboard ?
( )PandaMaster September 24th
Thats so cool! Awesome. i love things that aren’t essential/practical, but just plain cool and creative. nice work
( )Sruthi October 21st
It is really nice. this is good thing.
( )Erik October 22nd
@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…
Jannis Gerlinger November 2nd
Omg! This is absolutly fantastic ! Perhaps, with another background and some more windows its quite cooler
( )kangal November 9th
wonderful
( )