Software utilities

I needed to add navigation arrows to a couple of jQuery tabs, it’s easy to implement by using a few functions:

suppose we have the following HTML:

<div id=”tabs”>
<ul>
<li><img id=”left” src=”left.png” alt=”" /></li>
<li>…</li>
<li><img id=”right” src=”right.png” alt=”" /></li>
</ul>

We can simply add this js code:

$(function() {
$tabs = $("#tabs").tabs();
$("#left").click(function(){ var ind = $tabs.tabs("option", "selected"); if(ind > 0) $tabs.tabs("select", ind-1);});
$("#right").click(function(){var ind = $tabs.tabs("option", "selected"); if(ind < $tabs.tabs("length")) $tabs.tabs("select", ind+1);});
});

The script also check that the selected tab is not outside the tabs limits, but I think this is done internally by the jQeury script itself.

It happened to me that using Lytebox (http://www.dolem.com/lytebox/) the frame closed immediately as soon as you clicked on the link the first time. If you clicked again it worked. It happened under Firefox. After some googling, I found out that if you remove all the javascript in the linked file, it works fine. Try this solution and good luck!