Creating a Network Bar with jQuery
January 23rd, 2009
Network bars are making the rounds on a lot of sites. If you aren’t familiar with the term, it is usually a bar at the top of a site with links to other sites that are in the same network. Brandon, one of my friends, has a network bar on Open Soul that has links to his two other co-workers and to a few products and services they provide. Another great example is all of the sites created by Sidebar, such as My Mile Marker, Overheard.it, and Django Pluggables.
Not too long ago, I created my second tips site, BlawgTips. I wanted to drive traffic back and forth between BlawgTips and RailsTips, so I created a network bar that sits at the top of each of those. I was shocked at how easy it was. I only wanted it to be one request, so I included the styles inline in a style tag instead of calling another external stylesheet. Below is the code.
jQuery(document).ready(function($) {
var styles = '<style type="text/css">' +
"#network_bar {float:left; display:inline; width:100%; margin:0; padding:0; background:#222; color:#ccc;}" +
"#network_bar ul {float:left; display:inline; margin:0; padding:0;}" +
"#network_bar ul li {float:left; display:inline; margin:0; padding:0; border-right:1px solid #333; list-style-type:none;}" +
"#network_bar ul li a {float:left; display:block; margin:0; padding:6px 10px; color:#aaa; font:11px/11px helvetica, arial, sans-serif !important; text-decoration:none; text-align:center;}" +
"#network_bar ul li a:hover {color:#fff;}" +
"#network_bar ul li a.current {color:#fff;}" +
'</style>';
var html = '<div id="network_bar">' +
'<ul>' +
'<li><a href="http://blawgtips.com" title="Over-analyzing the simple art of blogging">BlawgTips</a></li>' +
'<li><a href="http://railstips.org" title="One man feverishly posting everything he learns">RailsTips</a></li>' +
'</ul>' +
'</div>';
$('head').append(styles);
$('body').prepend(html);
// to ensure that there is clearage after network bar
$('#network_bar').next().css({clear: 'both'});
$('#network_bar a').each(function() {
var link = $(this);
var is_current = new RegExp(link.attr('href')).match(window.location.href);
if (is_current) {
link.addClass('current');
}
});
});I define a style tag and some html. I then append the styles to the head and prepend the html to the body. I also add a clear:both to the element following the html added just to ensure things get cleared. I probably could switch that to css. Finally, I loop through the a tags in the network bar and add a class of current to the link that represents the current site a visitor is on.
That is it. The jQuery that actually does the work is less than 10 lines. Now I can put this in an external script and include it on multiple sites to get the exact same network bar on each of those sites. When I add a new site to the network, I simply update this one script and all the sites update with it. Pretty cool.
If you enjoyed this post, get free updates by email or RSS.
Subscribe
I’m a little puzzled as to why this was done using jQuery. You could have achieved this exact same thing using some good ole XHTML/CSS (which the JS is using anyway). Not to mention the fact that it would degrade much more gracefully for non-js-enabled devices.
@Josh - Yeah, it could be done with plain html but then I would have to add that html and css to every site in the network and update every site each time I wanted to change the bar. The point of this is that I can update the bar on every site from one place. You can’t do that with plain old XHTML/CSS.
I noticed the bar last night when showing some friends the railstips.org website. Looks nice.
Oh, and I love jQuery.
I have to agree with @Josh Abbott on jQuery usage here, but I love the idea of a single resource being called for each site in the network.
Wouldn’t it be easier to use a server side include from a single location like: http://assets.addictedtonew.com/snippet/network-bar.html?
@Nate - Ha. Yeah, I’ve grown to love it to. So succinct! Thanks for showing RailsTips to friends! Appreciated.
Nice. The code looks very clean. I’m still learning to love jQuery. There are some specific things I love about it, but there are things I miss from prototype+lowpro when I’m using it.
Also, you should be able to set @overflow:auto@ on #network_bar to get a clearing effect without having to manually set it on the next element.
@Brandon - What things do you miss from prototype lowpro? I’m finding that most of the things I miss I can actually do in jQuery but I just had to think through it differently.
I had overflow and I changed it. Can’t remember why. I’ll have to look into it again.
@Brendan - A server side include would only work if all sites were on same server.
I understand why you used jQuery, though, I prefer using HTML to get the full power of the linkage between the networked sites. It may be more work to maintain and synchronize, but the linkage in the very top of the markup can be powerful between related blogs.
Other than that, rock on.
John, is it just me or does blawgtips only link back railstips, and not to addicted to new or ordered list?
@Jon That is correct. I kind of share blawgtips with a friend so I didn’t put my other sites on it. Just railstips.
very useful article thank you . You are jquery expert.