Creating a jQuery Dashboard

by on 29th October 2008 with 19 Comments

jQuery Mac Dashboard Dock

The ‘Dashboard’ feature on a Mac looks great, and the menu allowing you to add/remove widgets is a well designed feature. A similar effect can add a whole new level of functionality to a website, providing a simple slide-down menu at the top of a page. This tutorial will walk you through the process from beginning to end.

Before getting started, you may like to check out the demo, or download full source code here.

Starting in Photoshop

1) Create a grate repeat background.

Start by creating a 56 (W) x 64 (H) px image in Photoshop. Then make a 3 coloured gradient going from #111111 to #313131 and finally back to #111111. It should look like this.

jQuery Dashboard Tutorial

Now it’s time to add the dimples.

Select the brush tool and pick a square brush that is 2px in size and #000000. Create a new layer and make sure it is selected. Begin by making one dot anywhere on this new layer. Now move that dot 3px from the top of the image and 1px from the left side. You can then duplicate this layer 11 times (so you have a row of 12 dots in total) and each time move the dot down 5px.

You can now merge all of these layers (except for the background.) Duplicate this new row of dots 6 times, and each time move the row to the right 8px.

Using the first row created, duplicate it one more time and move it 4px right and 2px down. This new row can also be duplicated 6 times and each moved 8px right. You should now have the background of the dashboard.

jQuery Dashboard Tutorial

2) Find an icon pack like the one used in this tutorial. Mine was found at: http://www.smashingmagazine.com/2008/10/01/dellipack-2-a-free-icon-set/

3) Create a text area for the icon tips.

Create a new image 292px (W) x 34px (H) and create a new layer. Delete the background layer. Now draw a rounded rectangle path again just like we did for the icon, however this time it wants to be 290px (W) x 32px (H) and make it a selection again filling it with a white. Set the fill on this layer to 10%. Now all that is left to do is add a 1px white stroke around it leaving you with this. (I’ve put a black background on the example that you will not have, just so you can see what it should look like)

jQuery Dashboard Tutorial

Now we are ready to put some HTML and CSS into this and make it!

HTML and CSS

In order to build this example, you’ll need the latest J-Query release.

First thing to do is prepare the HTML. We are going to need to DIV tags, one as an overall container of everything, which will ensure that the dashboard spans the width of the browser window. The other will act as a container for the icons, keeping them restrained within a 945px width. This is to ensure they will all be visible on most common screen resolutions.







A you can see from this I have attached a stylesheet called index.css, I have added a few styles on that style sheet to ensure these DIV will look and perform the way I wish.

#advanceMenu { 
background:url(images/gratingRepeat.png) repeat-x; 
height:64px; 
display:none;
}

#advanceContainer { 
width:945px; 
margin:auto;

}

The background image has a repeat-x on it to enable the image to span the width of the browser window. The height should be the same height as the gratingRepeat.png we created earlier.

The advance container has a 945px width on it to allow even the smallest screen resolutions to view the dashboard in full. I always design my websites to a minimum of 1024 x 768 because this tends to be the most common screen resolution at the time of writing. Also, by having margin: auto set on the container, the browser will centre the icons no matter how wide the browser is set to. For this to work, the element must have a width set.

The next thing we need to add is the UL, which will hold all of our icons.

As you can see each LI has a different class attached to it. This is so that we can assign different attributes to each icon. Be sure to name your classes to correspond to the icon so that you will understand where to put everything.

First we will go through the main areas of the styling on the UL and the LI.

ul { 
list-style:none; 
margin:0; padding:0; /*fixes ul padding and margin */
}

ul#advanceList { 
float:left; 
width:645px; 
margin-top:6px;

}

#advanceList li { 
height:48px; 
width:48px; 
float:left; 
margin-left:15px;

}

Firstly, the UL list-style: none takes off any unwanted bullet points. I have also put a padding: 0 and margin: 0 here, this should stop any browser compatibility issues placing things in unexpected areas. I have put these to attributes on UL site wide because we will use another UL later and these settings will apply as well.

On the advanceList specifically I have chosen to position the icons using the float method. (I find this gives me the greatest control over positioning.) The width is important when floating to ensure accurate placement. I have chosen 645px because we have to leave space for the tips area, which will be added later.

The LI within this UL have then been given a height and width (the same height and width as the icons) and then floated left. Doing this places the LI in a horizontal line overwriting the default vertical alignment of UL. The margin-left here is placed on every individual LI meaning there will be a 15px gap between each icon.

The next section of CSS needs to be repeated and slightly modified for each icon class. I will include one example for guidance. It’s very simple, set the background to the icon.png and then set the background for the icon’s hover state. This means that when the icon is hovered over (in all browsers except for IE6) the icon will change colour.

.info { 
background:url(images/icon.png);
}

.info:hover { 
background:url(images/iconHover.png);
}

Make sure you replicate this changing the class for every icon you choose to use. Make sure you also change the image that they use as a background.

Finally, we will add the Tip area and style it. The HTML is very similar to that of the icon set. Using UL and LI. However, we only use one LI with a series of different DIV CLASSES within it.

  • Menu Item 10
    Menu Item 9
    Menu Item 8
    Menu Item 7
    Menu Item 6
    Menu Item 5
    Menu Item 4
    Menu Item 3
    Menu Item 2
    Menu Item 1

While this may look like a daunting piece of code it is in fact very simple. Each DIV relates to one icon and using CSS only one or no DIV will be visible at a time. Be sure to give every DIV a separate class relating to the icon it will be highlighting. This will be needed in the next step.

ul#contactList { 
margin-top:16px; 
float:right; 
width:292px;
}

.advanceTip { 
background:url(images/textArea.png) no-repeat; 
height:34px;

}

.plusTip, .worldTip, .vaultTip, .schoolTip, .phonebookTip, .peopleTip, .interactTip, .greenTip, .monitorTip, .homeTip { 
display:none; 
height:34px; 
width:292px; 
text-align:center; 
line-height:35px; 
color:white; 
font-family:Verdana, Arial, Helvetica, sans-serif;

}

To start, I have floated the UL right and given it a width. This will position the tip area to the right of the icons, as the width given to the icon UL allows both elements to sit on the same line.

I have then given the class a background, loading in the textArea.png created earlier. This has been given a height to enable it to be visible.

I have every DIV class to display: none meaning that every DIV within the LI will initially be hidden. We will use javascript to enable them later.

Every DIV is set to be the same height and width as textArea.png, this is so that we can position the text within precisely. Text-align: centre moves all of the text to the middle of the DIV and therefore the text area. Finally, the line-height:35px; ensures the text is vertically centred. This value will differ depending on the font-size and font-family choice, trial and error may be needed a little here.

Finally, we will need a button to click to make the dashboard visible. Outside of the two DIV we have created insert a link and give it a class of advanceMenuBtn. This will be needed when calling it within the javascript later.

Show and Hide the Dashboard Show and Hide the Dashboard

If you load this into a browser you will be able to see the dashboard at the top and the icons will change colour when you place your mover over them, very exciting!

Now it is time to add the javascript functionality. Be sure to place all of the subsequent javascript within the HEAD tags at the top of your page.


This script is again very simple and very effective. Once again the function is ready to be used when the page is loaded, as stated by the third line. The next line then calls on the icon with a class of info and sets a function to run when the user puts their mouse over it.

Next the class which displays the piece of text associated with that icon is focused on and told to ‘.show’ when this happens. This function then needs to be reversed in order for other snippets of text to show when other icons are hovered over.

The last few lines are doing the exact reverse of the first function changing ‘mouseover’ to ‘mouseout’ and ‘.show’ to ‘.hide’

These two function then need to be repeated for every icon changing the classes that are being called to coordinate with the icon in question.

Now we should be ready to see it working in it entirety!

Check out the demo and download full source code here

Well done and I hope you can put this to good use.

Please note that due to IE6 not understanding the :hover function this example will be of very limited use in that particular browser. However there are fixes for it that can be found using further javascript.

Prosems - Ecommerce Web Design & Development Solutions

Comments & Discussion

19 Comments

  • Dmitri Yuriv

    Looks impressive – like the icons and think it’s something i’ll be tweaking for use in a project soon. Thanks!

  • http://www.cityofangels.wordpress.com Michael Wilson

    I’m glad you like it Dmitri.

    Let me know how you get on with it. Feel free to show me anything that you produce from it. I’d love to see it!

  • Sjoerd de Nennie

    I do like the idea a lot!! I would however change the ‘hide and show’ tips part with something like:

    $(“#advanceList li”).hover(
    function () {
    var sClass = $(this).get(0).className;
    $(“li.advanceTip .” + sClass + “Tip”).show();
    },
    function () {
    var sClass = $(this).get(0).className;
    $(“li.advanceTip .” + sClass + “Tip”).hide();
    }
    );

    This way, adding is way more flexible. By changing the semantics of the HTML, you’d probably make it even more cleaner code.

    Looking forward to hear your opinion about this!

  • http://anton.shevchuk.name Anton Shevchuk

    Why are you use many div’s for show title?

    Home
    Displays
    Community
    Interact
    People
    Contacts
    Blackboard
    Vault
    Global
    Plus

    And JavaScript code:
    $(document).ready(function(){
    $(“#advanceList li a”).hover( function () {
    $(“li.advanceTip div”).html($(this).attr(“title”));
    }, function () {
    $(“li.advanceTip div”).html(“”);
    } );
    });

  • http://anton.shevchuk.name Anton Shevchuk

    Ooops… i post HTML code, and blog eat it :(

  • http://anton.shevchuk.name Anton Shevchuk

    Ooops… i post HTML code, and blog eat it :(

  • http://yettobebranded.net Micheil

    hmm.. Why not use a css sprite map for the icons? much more efficient.

  • http://kamil.us Kamil

    good post. perfect sidebar design. Thank you =)

  • Rami

    it’s a nice dashboard, and it will be nicer and faster if you make it by sprite tech. and make the image preload.

  • Pingback: 10 Advance jQuery Scripts to take Your Website to the Next Level | Programming Blog

  • Pingback: Creating a jQuery Dashboard « Jquery Labs

  • Pingback: jQuery Gösterge Paneli - Zingocan

  • Pingback: jQuery Dasboard Yapma Dersi | jQuery Design

  • Pingback: jQueryいろいろ « Webデザイン ホームページ制作 名古屋 豊橋 | creal クレアル

  • http://dfdsfdsfds59@yahoo.co.uk Big Tits

    efmc hdxkk Huge Boobs gotffr x yy e hvq

  • http://www.aplweb.co.uk Andy

    Here is a fully featured Mac Dashboard done using CSS transitions/transforms and some jQuery. It has applets that animate and flip over in 3D:

    http://www.aplweb.co.uk/blog/js/mac-dashboard/

    You can easily build your own applets too.

  • Pingback: Webデザイン ホームページ制作 名古屋 豊橋 | creal クレアル - 画像を使ったjQueryプラグイン

  • Ray

    Hi this dashboard is very intresting. however i’m newbie of javascript and jquery function…and i’m not able to understand how can i put the code in order to lauch a link for example or (better for me) a jquery iframe window.
    Could someone help me? thabk you

  • Pingback: Elegant D » Creating a jQuery Dashboard | Design Shack

Subscribe
Membership
About the Author