Marc Fearby's Home Page

Quick and dirty jQuery centred tabs

It appears that there isn’t a way to centre the tabs for jQuery.UI, unless you’re prepared to resort to quick and dirty hacks like this one I just cobbled together:

window.onresize = function()
{
    var pad = (document.width - 700) / 2;
    $('#tabstrip').css('padding-left', pad + 'px');
}

You’ll have to give an ID to the first bulleted list at the top of your tabs (the one that makes up the “tabs” themselves); I’ve called mine “tabstrip”. What makes this hack even more dirty than quick is that I’ve hard-coded a value that represents the width of all my tabs. I tried all sorts of things to calculate it on-the-fly but that proved unreliable, so I’m going with what will work best in most situations for the internal-use scenario I have in mind. You might also want to put this code into a separate function and call it from $(document).ready() so that it appears in the right spot when the page loads, too.

Hopefully one of you CSS geniuses out there will tackle this and add the ability to centre the tabs for lazy folks like me. Or even center it if you’re American :-) I’m easy either way.

Comments are closed.