[Infusion-users] Tabs with jQuery + infusion

Colin Clark colin.clark at utoronto.ca
Tue Jun 23 14:16:12 UTC 2009


Hi,

Sorry for the delay in getting back to you. Glad to hear you've got it  
working!

This sounds like an issue with the jQuery scrollable() plugin. It  
might be one of those cases where the markup requirements for the tabs  
plugin and the scrollable plugin are in conflict. One ideas to try:

See if you can successfully exclude the first tab from your list of  
scrollables. Try wrapping the items you do want to be scrollable in a  
container and using it instead of wrapping the whole list of tabs in a  
scrollable container.

Hopefully I've understood your problem correctly. Let us know how it  
goes,

Colin

On 17-Jun-09, at 3:57 PM, Stál Zoltán wrote:

> Hi everyone!
>
>
> I made a tab-system using jquery + infusion. It's great: the tabs  
> are sortable by dragging
> and the hidden tabs can be viewed by scrolling with navigation  
> arrows. The last thing I
> wanted to do is to fix the position of the first tab (named  
> 'General') so that it stays in
> place even when the others to its right are scrolling. How is this  
> possible? Everything
> I tried to embed interfered with the previous code (eg. the tab -  
> pane was split apart, etc.)
>
> Please tell me how to exclude that one list element so that it won't  
> scroll !
> Here are my code snippets:
>
>     <!-- previous link -->
> 	<a class="prev"></a>
>
>     <div class="scrollable">
>
>         <!-- tabs -->
>         <ul class="tabs">
>
>
>             <li class="fixed"><a href="#tab_0">General</a></li>
>             <!-- THIS TAB SHOULD STAY IN PLACE -->
>
>             <li class="movable"><a href="#tab_1">Page 1</a></li>
>             <li class="movable"><a href="#tab_2">Page 2</a></li>
>             <li class="movable"><a href="#tab_3">Page 3</a></li>
>             <li class="movable"><a href="#tab_4">Page 4</a></li>
>             <li class="movable"><a href="#tab_5">Page 5</a></li>
>             <li class="movable"><a href="#tab_6">Page 6</a></li>
>             <li class="movable"><a href="#tab_7">Page 7</a></li>
>             <li class="movable"><a href="#tab_8">Page 8</a></li>
>             <li class="movable"><a href="#tab_9">Page 9</a></li>
>             <li class="movable"><a href="#tab_10">Page 10</a></li>
>         </ul>
>
>     </div>
>
>     <!-- next link -->
>     <a class="next"></a>
> 	
>     <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,
> 			});     	
> 		});
> 		
> 	</script>



---
Colin Clark
Technical Lead, Fluid Project
Adaptive Technology Resource Centre, University of Toronto
http://fluidproject.org




More information about the Infusion-users mailing list