jQuery scrollable tabs -- disable scrolling of an element inside the div Created Jun 18, 2009

Hi!

I made a tab-system with the help of jQuery tools (the tabs + scrolling them) and an addon called Infusion (making tabs sortable by dragging). I have one final function to add: The first tab is supposed to stay in one place. It's called the General tab where the settings will be stored on the website. The problem is that it's inside the same div as the other tabs so that jQuery can convert it into a tab. The problem comes after adding the scroll feature --> the general tab scrolls with the others. I tried several methods ( position: fixed, adding divs inside, etc.) but they all interfered with the previously written lines. Is there a way to "remove/disable" the element inside the list, so that it still appears as a tab but won't scroll?? Here's the actual code:

note: I've removed the "a" link tags from the tabs when I copied the code!

<!-- place of scroll back button-->
...a class="prev"> .../a>

<div class="scrollable">

<!-- tabs -->
<ul class="tabs">

<!-- this is the tab that should stay in place -->
<li class="fixed">General .../li>
<!-- class movable = draggable objects -->
<li class="movable">Page 1 .../li> <li class="movable">Page 2 .../li> <li class="movable">Page 3 .../li> <li class="movable">Page 4 .../li> <li class="movable">Page 5 .../li> <li class="movable">Page 6 .../li> <li class="movable">Page 7 .../li> <li class="movable">Page 8 .../li> <li class="movable">Page 9 .../li> <li class="movable">Page 10 .../li>
</div>

<!-- place of scroll forward button -->
...a class="next"> .../a>

<!-- panes -->
<div class="panes">
<div>This is the content of the General tab...<br/>
This tab can't be <i>dragged or scrolled</i> !</div>
<div>This is the content of the Page 1 tab...</div>
<div>This is the content of the Page 2 tab...</div>
<div>This is the content of the Page 3 tab...</div>
<div>This is the content of the Page 4 tab...</div>
<div>This is the content of the Page 5 tab...</div>
<div>This is the content of the Page 6 tab...</div>
<div>This is the content of the Page 7 tab...</div>
<div>This is the content of the Page 8 tab...</div>
<div>This is the content of the Page 9 tab...</div>
<div>This is the content of the Page 10 tab...</div>
</div>

<script language="javascript" type="text/javascript">

// activate tabs
$(function() {
$("ul.tabs").tabs("div.panes > div");
});

// enable scrolling
$(function() {
$("div.scrollable").scrollable({
items: 'ul.tabs',
clickable: false,
size: 5,
});
});

</script>