jQuery Fubar – How To Create A Website Toolbar From Scratch And Add Widgets To It

Over the past year, we’ve seen website toolbar’s become an increasingly popular way for site-owners to offer users a consistent set of powerful social features, regardless of what page they’re on – Share, Subscribe, Tweet, Talk – you name it and chances are there’s a toolbar out there that offers some variation of these features. Facebook were one of the first companies to introduce this toolbar concept and have been the source of inspiration for many others. 

Taking a leaf from their book, companies like Wibiya and Meebo have been at the forefront of a toolbar-for-the masses revolution, offering easily customizable widgets for almost anyone to install on their pages. Larger companies have also been hopping onto the toolbar-band too, with sites like CNET.com embracing this concept as a way to offer their visitors more ways to interact with their site.

In today’s post, I’m going to show you how to create your very own jQuery-powered website toolbar and then we’re going to pack it full of lots of useful widget features such as those found in the Wibiya-toolbar – I call it jQuery Fubar.

What Site-bars Are Out There At The Moment?

As I mentioned, we’ve all seen the widget-packed Wibiya Toolbar in action and they’ve recently moved from their invite-only model to being fully open to the public. Meebo (the popular web destination for online IM services) also started offering their own version of this toolbar and both of them offer something a little different (Meebo for example includes a pretty funky drag-and-share feature). Today, we’ve going to create our very own awesome website toolbar, but from a design perspective here’s how the Meebo and Wibiya bars look close-up.

Wibiya

Meebo

Now that we know what we’re aiming for, let’s see how easy it can be to put together something like this ourselves.

The First Step – Fixed Positioning with CSS

The first step in creating a website-toolbar is creating an empty div which can be correctly fixed-positioned at the bottom of any webpage. The HTML for this is:

<div id="content">&nbsp;</div>
 
<div id="floatingbar"><ul> <li><a href="#">Item name</a></li> <br /><li><a href="#">Item name</a></li> <br /><li><a href="#">Item name</a></li> <br /><li><a href="#">Item name</a></li> <br /></ul></div>

and the CSS for this can be found below.

  div#floatingbar
    {
    overflow: hidden;
    width: 100%;
    height: 0px;
    position: absolute;
    bottom: 0;
    left: 0;	
    }
 
@media screen
  {
  body>div#floatingbar
    {
    position: fixed;
    }
  }

Whilst fixed-positioning isn’t very difficult to achieve using browsers like FireFox and Chrome, it’s been notoriously buggy to code for Internet Explorer 6. Thankfully TagSoup came up with this wonderful set of CSS/JS hackswhich claim to support fixed-positioning all the way back to IE5. If you’re creating a toolbar from scratch, I would definitely recommend reading their post as it’ll save you a lot of time later on. The IE Fix for this is:

JavaScript/HTML:

1
2
3
4

<link rel="stylesheet" type="text/css" href="css/fixed4ie.css" />
<script type="text/javascript">onload = function() { 
content.focus() }
</script>

CSS:

body
  {
  height: 100%;
  overflow: hidden;
  font-size: 100%;
  }
div#content
  {
  width: 100%;
  height: 100%;
  overflow: auto;
  }

Once you’ve got your basic-toolbar in place…

The next thing you’re going to want to do is begin adding in some basic styling around it. Most website-toolbars are around the same dimension in height (although there is no official “standard”) so I’m going to set the height of my component as well as some very basic skinning and CSS to style my list items. The background design is made possible with a blue gradient PNG that has some light shadows added to it – similar to the kind of design Wibiya have gone for. Although CSS3 could be just as equally used to create this effect, remember that some people still use IE!

div#floatingbar
    {
    overflow: hidden;
    width: 100%;
    height: 38px;
    position: absolute;
    bottom: 0;
    left: 0;
    color: #000;
    font-family:Arial;
    font-weight:bold;
    background-image:url('../images/tui.png');	
    }
 
#floatingbar ul { 
list-style-type:none;
}
#floatingbar ul li 
{ 
float:left; padding:14px; 
color:#666; margin-top:-3px;  
}
#floatingbar ul li a 
{ 
text-decoration:none; 
color:#fff; padding: 10px;  
font-size:12px;  font-weight:normal; 
font-family:Arial;
}
#floatingbar ul li a:hover { color:#000033;}

Now that this is done, I also want to add some basic animation to my toolbar so that when users first load up their page, the bar will slide up from the bottom. This is made possible using jQuery’s great animate() feature by keeping the initial height of the component at 0 and then tweening it up to it’s maximum height over a period of time. The code for this can be found below

CSS:

div#floatingbar
    {  
    height: 0px;	
    }

JavaScript:

<script type='text/javascript'> 
  $(function() { 
  $('#floatingbar').css({height: 0}).animate({ height: '38' }, 'slow');
  });
</script>

This will end up creating something a little like this

Next, populate the toolbar with some links and some more jQuery Magic

In the next step of development, we’re going to add some nice visual effects to the toolbar, with the assistance of two of my favorite jQuery plugins – the first will provide us with some lightweight tooltips for our toolbar items whilst the second is going to be used for displaying our content.

1. jQuery Tipsy Tooltips for Toolbar Elements – This is a plugin used for adding Facebook-Like Tooltip effects to your site or links (http://onehackoranother.com/projects/jquery/tipsy/)

Sample Usage:

<script type='text/javascript'> 
  $(function() {
 
  $('.toolbarLink').tipsy({gravity: 's'});
 
  });
</script>

2. jQuery PrettyPhoto - This is a lightbox alternative that allows you to display any type of content, in particular, iFrame content from local or external websites (http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/)

Sample Usage:

<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
	$(".gallery a[rel^='prettyPhoto']").prettyPhoto({theme:'facebook'});
		});
</script>

Let’s start adding some social features to the toolbar

When I first looked at the Wibiya toolbar, the big features that appealed to me were how easy it made it for any user to interact with all of the social networks associated with a website. I could easily take a look at the site’s Twitter account or become a fan of their Facebook Fan page, I could even easily browse through all their pictures without having to leave the page I was on. That "ease" of access impressed me, so I developed my website toolbar with widgets in mind.

When there are so many different ways currently available to pull in your recent tweets or display your Flickr albums in an easily scrollable box, why not find an implementation you like and just customize it?. So, that’s what we’re going to do.

1. Google Buzz Plugin – Mike More’s excellent Google Buzz Widget grabs the feed of your latest Google Buzz posts and refreshes this list depending on a set of parameters you’ve configured (http://www.moretechtips.net/2010/02/google-buzz-widget-jquery-plugin.html)

2. Sea of Clouds jQuery Twitter Plugin – This wonderfully compact plugin makes pulling your Twitter feeds a piece of cake and also allows you to customize the output quite extensively (http://tweet.seaofclouds.com/)

3. Facebook Fan Page Widget - The Facebook Fan Page Widget is a widget provided free by Facebook to site owners wishing to share their fan streams or followers in a box on their website. To allow you to show to Fan Box widgets side by side as in the original Wibiya bar, one can either choose to proxy one of the content boxes or load each of the widgets in separate iFrames which are then loaded into the same window.

4. Coolris Express Viewer - CoolIris offer the public a free version of their commercial 3D-Wall Component for use on your own personal sites. They’ve got a fantastic widget generator online that lets you pull in feeds from all sorts of sources including Flickr, YouTube or your own RSS Feed. It then takes this information and renders it as a scrollable wall of thumbnails that’s easy to view.

5. AddToAny Subscription and Share Widgets – These excellent widgets allow you to configure everything down to the event handlers that execute them so you can choose whether they appear on click or on mouse over. All the usual share sites and social networks are included and these guys even offer an API to anyone wishing to do more with their code.

6. ConveyThis.com Translation Features – Google Translate has been a favorite service among many of my fellow coders for a while now, but I came across this great service that allows you to give your visitors the choice to pick what translation service they want to use to translate your page once they’ve selected a language. Because some services have stronger features in one area of language than others, your visitors will have all the options they could want available to them. ConveyThis? also has a great widget you can add easily to your site, so definitely check it out.

Widget Delivery

Widgets (or plugins such as a Twitter-Reader or Translation service) can be delivered to our visitors through the site-bar in two main methods. The first is on page-load and the second is dynamically on-demand. The second of these options is the most beneficial as it means that we only have to load up the plugin when a user requests it. This can be either done through Ajax-Calls or iFrames.

In my implementation I have opted for iFrames through the PrettyPhoto Light-Box plugin – I thought this was a good idea because it provides a nice sandboxed area where the widget can execute as required without the chance of it interfering with the other widgets on the page. Whilst this isn’t a problem for most modern browsers, sandboxing widgets into iFrames can help lower the bug rate for older browsers like IE6.

To host a widget inside a lightbox iFrame, all you need to do is write or paste the code for it, once configured, into a new html file, save it into a local file in your toolbar directory and call it via PrettyPhoto as follows:

1

<a rel="prettyPhoto[iframe]" href="widget.html" title="Here's the tooltip text " class="toolbarLink"> My Page</a>

You can then freely call any widget file, with it’s very own themes if desired the same way you would any other link used from a lightbox. prettyPhoto also includes some pagination by default so if you want to easily flick through all of the widgets available on your toolbar you can do so through the controls at the bottom of the lightbox.

Further Customization & Demos

It’s possible to further customize your toolbar by adding in icons next to each of your widget links and floating them accordingly. For the example in today’s post, I’ve used some fantastic 24×24 icons from iconfinder.net, and you can see the final version of this page here (or click below to expand the screenshot).

You can also take your imagination one step further and replace all of the text in your toolbar with some nice images – I personally spent a few minutes putting together some gradient text in PhotoShop and here’s what the final product looked like.

With a little more work you could easily add some nice toggle buttons to the side of the toolbar to allow visitors to open or close it and there are a lot more widgets out there that you could experiment adding to your version.

and that’s it!. If you found today’s tutorial helpful, let me know in the comments section below.

Download All Of Todays Examples

You can download all of today’s examples including both the CSS/Icons version of Fubar as well as the Graphics version from the link below. All widgets can be obtained or generated from the site’s referenced in the list earlier in the article, but I’m also including my own ones in the example pack so you can see how easy it is to get setup.

Bonus: Fixed-Position Website Toolbar Plugins

As a bonus to today’s post, I’m also sharing some of the best out-of-the-box alternative solutions and tutorials available for creating your own customized fixed-position Site Bar. We all know that Wibiya is great for a one-click solution, but if you need something a little different one of these will definitely be able to help if the tutorial above doesn’t give you what you’re after.

CSS3 Fixed-Position Toolbar for your site with Social Networking Icons

Learn how to create a fantastic fixed footer toolbar for your site – this version includes some usefully placed social networking and subscription icons, great eye-candy tooltip effects and a complete tutorial on how to create it from start to finish. CSS3 Effects compliment it further with some nice visual design touches. Recommended for those who aren’t looking for extensive changes in customization to the above design and currently have more of a functionality requirement.

Facebook Style Footer-Toolbar from Soh Tanaka

Soh Tanaka presents this excellent tutorial on how to create a Facebook Style Fixed Site Footer toolbar. This implementation is very close to how the real Facebook site-bar looks and feels and even includes a follow-up tutorial on how to create a pop-out Friends List Chat bar. Recommended for those looking for a fully-featured example of how to create a floating site toolbar for further customization.

Floating Footer Toolbar

This entry from Ben Nadel, the most barebones of my recommended tutorials for today, will show you how to build a very very simple implementation of a floating site toolbar. This doesn’t include any of the sample icons or buttons that Soh Tanaka’s version above does so if you want an example that you can literally just start adding your own content to, this would be the one to get.  Ben’s version has been tested with many browsers including IE6, so cross browser compatibility won’t be an issue!.

JixedBar – A Fixed-Position Toolbar plugin for jQuery

Here’s a recently updated plugin that takes a lot out of the effort out of creating a fixed-position toolbar for your site. All you need to do is create a <ul> /<li> structure for each split section and then have the plugin transform it into the toolbar for you. It’s a hassle-free way of adding this feature to your projects and at under 7KB, it’s definitely a recommended download.