Forum user: hunzolo

I'm going to create a simple page with scrollable tabs and post it here today (hopefully) and you'll see how easy it is!

Hi all!

How can I make the Flash Embed tool give an ID to the created flash object?? I don't see an option for this. The only option was to create an ID for the container but I would like the flash object itself to have one so I can add onClick and other events to it!

Yes, I have the files. It works nicely in Firefox and Safari (didn't test with IE).
How can I get them to you?

I think I solved it. Just needed to nest another list + some CSS tweaking!

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

<!-- not scrollable -->

General

<div class="scrollable">

<!-- scrollable items -->
<ul class="items">

<li class="movable">Page 1 <li class="movable">Page 2 <li class="movable">Page 3 <li class="movable">Page 4 <li class="movable">Page 5 <li class="movable">Page 6 <li class="movable">Page 7 <li class="movable">Page 8 <li class="movable">Page 9 <li class="movable">Page 10

</div>

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>