Back To Programming / Scripting / Coding Forum

Jquery Scrolling Tabs

  • ScottG
  • Proficient
  • Proficient
  • No Avatar
  • Joined: Jul 06, 2010
  • Posts: 263
  • Status: Online

Post January 15th, 2013, 11:06 am

Before I dive into the coding I was wondering it anyone has came across a Jquery scrolling tabs example much like the Ex Js 4 advanced tabs http://try.sencha.com/extjs/4.0.7/examp ... /tabs-adv/

I have found some Jquery based examples but the seem buggy at least in Firefox 18. http://www.seyfertdesign.com/jquery/demo.html but they also don't have the scrolling that I'm looking for. So if anyone has seen anything let me know. I will most likely start making my own in a couple days. When I do I will post the script here.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post January 15th, 2013, 11:06 am

  • Zealous
  • Guru
  • Guru
  • User avatar
  • Joined: Apr 15, 2011
  • Posts: 1195
  • Loc: Sydney
  • Status: Online

Post January 15th, 2013, 4:15 pm

i am sure you can alter that example to what you need but compatibility is a bitch sometimes.
  • ScottG
  • Proficient
  • Proficient
  • No Avatar
  • Joined: Jul 06, 2010
  • Posts: 263
  • Status: Online

Post January 16th, 2013, 2:11 pm

That's true but the issue is that the tabs use float left and when the hit the end it wraps the tabs to the next line. This is the basic functionality of the Jquery ui tabs function. I'd have to solve that issue before anything else.

So I started working on it today and this is what I came up with on my first pass

It's a bit messy and not commented well at all and I'm still going to add features to it.

If any one has a good extension script for a jquery ui widget I'd love to see it I spent most my time trying to extend the create function in the tabs and add to the options I kept getting close but then there would always be some strange error that happened so I decided on this

JAVASCRIPT Code: [ Select ]
var tabs = $("#tabs").scrollableTabs();
 
  1. var tabs = $("#tabs").scrollableTabs();
  2.  


I would like to be able to do this. (I'm close to getting to this point)
JAVASCRIPT Code: [ Select ]
var tabs = $("#tabs").tabs({scrollable:true, scrollSpeed: 40, scollToActive:true});
 
  1. var tabs = $("#tabs").tabs({scrollable:true, scrollSpeed: 40, scollToActive:true});
  2.  


Well I'll work on this tomorrow I was suppose to be off of work about 15 minutes ago. If any ideas please let me know.
Attachments:
test.zip

(234.17 KiB) Downloaded 37 times

  • ScottG
  • Proficient
  • Proficient
  • No Avatar
  • Joined: Jul 06, 2010
  • Posts: 263
  • Status: Online

Post January 17th, 2013, 10:33 am

Ok so some time away from coding did me good I've rewritten the script to work the way I want it to. This is the core of the script I am still adding to it.

Though it is not complete I'm posting the code so it could be tested by others to see if there are any issues I've missed so far

JAVASCRIPT Code: [ Select ]
 
// Basic jQuery UI tabs
var tabs = $("#tabs").tabs();
 
// Basic jQuery UI tabs with scrollable capability
var tabs = $("#tabs").tabs({scrollable:true});
 
// Added features
var tabs = $("#tabs").tabs({scrollable:true, scrollSpeed: 100, easing: 'easeOutBounce', duration: 500});
 
// Features to be added
var tabs = $("#tabs").tabs({scrollToActive});
 
  1.  
  2. // Basic jQuery UI tabs
  3. var tabs = $("#tabs").tabs();
  4.  
  5. // Basic jQuery UI tabs with scrollable capability
  6. var tabs = $("#tabs").tabs({scrollable:true});
  7.  
  8. // Added features
  9. var tabs = $("#tabs").tabs({scrollable:true, scrollSpeed: 100, easing: 'easeOutBounce', duration: 500});
  10.  
  11. // Features to be added
  12. var tabs = $("#tabs").tabs({scrollToActive});
  13.  


I know that scroll speed and the duration may seem like one in the same. Perhaps I could have used a different term.

scrollSpeed - Is the amount the tabs move in a single click or if the button is held down the amount the tabs move every time the function to move them is called
duration - Is the amount of time for the animation to take place.

If there is a better term please let me know also let me know if anyone has found any issues.
Attachments:
ScrollableTabs.zip

(234.95 KiB) Downloaded 51 times

  • ScottG
  • Proficient
  • Proficient
  • No Avatar
  • Joined: Jul 06, 2010
  • Posts: 263
  • Status: Online

Post January 17th, 2013, 11:33 pm

Ok even though I'm not at work I can't stop working on this. It's too much fun :) So I did find a few things that caused some issues and fixed them. Also it looks like i might have uploaded the wrong zip file last time ... Oh well it has been updated since then.

OK so this is where I stand. All the features i want on it at this point are on the updated script it has been better commented and a a lot has been added.

usage
JAVASCRIPT Code: [ Select ]
// Basic jQuery UI tabs
var tabs = $("#tabs").tabs();
 
// Basic jQuery UI tabs with scrollable capability
var tabs = $("#tabs").tabs({scrollable:true});
 
// Added features
var tabs = $("#tabs").tabs({scrollable:true, scrollSpeed: 100, easing: 'easeOutBounce', duration: 500, scrollToActive:true, leftButton: '<button id="left_button" href="#"><span></span></button>', rightButton: '<button id="right_button" href="#"><span></span></button>'});
 
 
  1. // Basic jQuery UI tabs
  2. var tabs = $("#tabs").tabs();
  3.  
  4. // Basic jQuery UI tabs with scrollable capability
  5. var tabs = $("#tabs").tabs({scrollable:true});
  6.  
  7. // Added features
  8. var tabs = $("#tabs").tabs({scrollable:true, scrollSpeed: 100, easing: 'easeOutBounce', duration: 500, scrollToActive:true, leftButton: '<button id="left_button" href="#"><span></span></button>', rightButton: '<button id="right_button" href="#"><span></span></button>'});
  9.  
  10.  


There is some strangeness that happens when you pull the tab off the bar and drop it. It activates and scroll that the the far left. Ill work on that later
Attachments:
ScrollableTabs-v3.zip

(236.62 KiB) Downloaded 31 times

  • ScottG
  • Proficient
  • Proficient
  • No Avatar
  • Joined: Jul 06, 2010
  • Posts: 263
  • Status: Online

Post January 24th, 2013, 10:27 am

So for anyone still following along with this I fix the strange behavior that was being caused by pulling the tab off the bar.

When you are setting up sort-ability on this script you need to define tabs.tabs("option", "sorting", true); in the stop function. This will tell the script that we are sorting and not just selecting a tab. I did it this way so I didn't need to combine the sortable widget into the tabs widget.
JAVASCRIPT Code: [ Select ]
tabs.find(".ui-tabs-nav").sortable({
      //axis: "x",
      stop: function() {
         tabs.tabs("refresh");
         tabs.tabs("option", "sorting", true);
      },
      containment: $("#bar_container")
   });
 
  1. tabs.find(".ui-tabs-nav").sortable({
  2.       //axis: "x",
  3.       stop: function() {
  4.          tabs.tabs("refresh");
  5.          tabs.tabs("option", "sorting", true);
  6.       },
  7.       containment: $("#bar_container")
  8.    });
  9.  


I've also made a new function with the only purpose to disable/enable the arrow buttons with this function came the function that if we had enough tabs to scroll and removed the tabs both the arrows will disable if we then add tabs or re-size the window to where we have enough tabs to scroll they will enable.

Also with this I discovered that my extension to the scollParent function was causing too much recursion errors and I fixed that as well.

One thing that I'm not satisfied on is some of the equations I use seem Hacky there has got to be a better formula for this the two equations in question are.
JAVASCRIPT Code: [ Select ]
(element.width() - 1 + element.scrollLeft()) < element[0].scrollWidth
 
(settings.bar_width < $('#tabs_container').width() - 5) ? $('#tabs_container').width() - 5
 
  1. (element.width() - 1 + element.scrollLeft()) < element[0].scrollWidth
  2.  
  3. (settings.bar_width < $('#tabs_container').width() - 5) ? $('#tabs_container').width() - 5
  4.  


If anyone can help get these seem not so hacked that would be great. See the below functions for usage

JAVASCRIPT Code: [ Select ]
      // This function will be used to scroll the the tabs.
      move_bar: function(element, left, that) {
         
         // Check to see if we are going to scroll left
         if(left) {
           
            // Check to see if the scroll left is greater than 0
            if(element.scrollLeft() > 0) {
           
               // Start the scrolling
               element.animate({ scrollLeft : "-=" + that.options.scrollSpeed }, {queue: true, easing: that.options.easing, duration: that.options.duration, complete: function(){
                 
                  // Check to see if we are currenly scrolling
                  if(settings.scrolling) {
                     
                     // We are still scrolling so call the function again
                     that.move_bar(element, left, that);
                     
                  }
                 
                  // Disable the buttons
                  that._disable_buttons(element);
                 
               }});
           
            } else {
               
               // Disable the buttons
               that._disable_buttons(element);
               
            }
           
         } else {
           
            // Check to see if the Scroll if at the max
            if((element.width() - 1 + element.scrollLeft()) < element[0].scrollWidth) {
           
               // Start the scrolling
               element.animate({ scrollLeft : "+=" + that.options.scrollSpeed }, {queue: true, easing: that.options.easing, duration: that.options.duration, complete: function(){
                 
                  // Check to see if we are currenly scrolling
                  if(settings.scrolling) {
                     
                     // We are still scrolling so call the function again
                     that.move_bar(element, left, that);
                     
                  }
                 
                  // Disable the buttons
                  that._disable_buttons(element);
                 
               }});
           
            } else {
               
               // Disable the buttons
               that._disable_buttons(element);
               
            }
         
         }
         
      },
     
      // This function will diable the arrows buttons if needed
      _disable_buttons: function(element) {
         
         // Remove the disabled states
         $("#left_button").removeAttr("disabled").removeClass("ui-state-disabled");
         $("#right_button").removeAttr("disabled").removeClass("ui-state-disabled");
         
         // Check to see if we are at the begining of the scrolling element
         if(element.scrollLeft() == 0) {
           
            // Set to the max scroll
            element.scrollLeft(0);
           
            // Disable the left button
            $("#left_button").attr("disabled", "disabled").addClass("ui-state-disabled");
               
         }
         
         // Check to see if we are at the end of the scrolling element
         if((element.width() - 1 + element.scrollLeft()) >= element[0].scrollWidth) {
           
            // Set to the max scroll
            element.scrollLeft(element[0].scrollWidth);
           
            // Disable the right button
            $("#right_button").attr("disabled", "disabled").addClass("ui-state-disabled");
           
         }
         
         // Check to see if there is even an ability to scroll
         if(element.width() == element[0].scrollWidth) {
           
            // Disable the left and right button
            $("#left_button").attr("disabled", "disabled").addClass("ui-state-disabled");
            $("#right_button").attr("disabled", "disabled").addClass("ui-state-disabled");
           
         }
         
      },
     
      // This function will set the ULs width
      _get_bar_width: function() {
         
         // Rest the bar width
         settings.bar_width = 0;
         
         // Loop through the UL LI tags
         this.element.find(".ui-tabs-nav:first li").each(function() {
           
            // Add the outWidth of the LI to the bar_width varible
            settings.bar_width += $(this).outerWidth(true);
           
         });
         
         // This line fixes any wrapping issue that are caused by the first two tabs
         settings.bar_width = (settings.bar_width < $('#tabs_container').width() - 5) ? $('#tabs_container').width() - 5 : settings.bar_width;
         
         // Return the width
         return settings.bar_width;
         
      }
 
  1.       // This function will be used to scroll the the tabs.
  2.       move_bar: function(element, left, that) {
  3.          
  4.          // Check to see if we are going to scroll left
  5.          if(left) {
  6.            
  7.             // Check to see if the scroll left is greater than 0
  8.             if(element.scrollLeft() > 0) {
  9.            
  10.                // Start the scrolling
  11.                element.animate({ scrollLeft : "-=" + that.options.scrollSpeed }, {queue: true, easing: that.options.easing, duration: that.options.duration, complete: function(){
  12.                  
  13.                   // Check to see if we are currenly scrolling
  14.                   if(settings.scrolling) {
  15.                      
  16.                      // We are still scrolling so call the function again
  17.                      that.move_bar(element, left, that);
  18.                      
  19.                   }
  20.                  
  21.                   // Disable the buttons
  22.                   that._disable_buttons(element);
  23.                  
  24.                }});
  25.            
  26.             } else {
  27.                
  28.                // Disable the buttons
  29.                that._disable_buttons(element);
  30.                
  31.             }
  32.            
  33.          } else {
  34.            
  35.             // Check to see if the Scroll if at the max
  36.             if((element.width() - 1 + element.scrollLeft()) < element[0].scrollWidth) {
  37.            
  38.                // Start the scrolling
  39.                element.animate({ scrollLeft : "+=" + that.options.scrollSpeed }, {queue: true, easing: that.options.easing, duration: that.options.duration, complete: function(){
  40.                  
  41.                   // Check to see if we are currenly scrolling
  42.                   if(settings.scrolling) {
  43.                      
  44.                      // We are still scrolling so call the function again
  45.                      that.move_bar(element, left, that);
  46.                      
  47.                   }
  48.                  
  49.                   // Disable the buttons
  50.                   that._disable_buttons(element);
  51.                  
  52.                }});
  53.            
  54.             } else {
  55.                
  56.                // Disable the buttons
  57.                that._disable_buttons(element);
  58.                
  59.             }
  60.          
  61.          }
  62.          
  63.       },
  64.      
  65.       // This function will diable the arrows buttons if needed
  66.       _disable_buttons: function(element) {
  67.          
  68.          // Remove the disabled states
  69.          $("#left_button").removeAttr("disabled").removeClass("ui-state-disabled");
  70.          $("#right_button").removeAttr("disabled").removeClass("ui-state-disabled");
  71.          
  72.          // Check to see if we are at the begining of the scrolling element
  73.          if(element.scrollLeft() == 0) {
  74.            
  75.             // Set to the max scroll
  76.             element.scrollLeft(0);
  77.            
  78.             // Disable the left button
  79.             $("#left_button").attr("disabled", "disabled").addClass("ui-state-disabled");
  80.                
  81.          }
  82.          
  83.          // Check to see if we are at the end of the scrolling element
  84.          if((element.width() - 1 + element.scrollLeft()) >= element[0].scrollWidth) {
  85.            
  86.             // Set to the max scroll
  87.             element.scrollLeft(element[0].scrollWidth);
  88.            
  89.             // Disable the right button
  90.             $("#right_button").attr("disabled", "disabled").addClass("ui-state-disabled");
  91.            
  92.          }
  93.          
  94.          // Check to see if there is even an ability to scroll
  95.          if(element.width() == element[0].scrollWidth) {
  96.            
  97.             // Disable the left and right button
  98.             $("#left_button").attr("disabled", "disabled").addClass("ui-state-disabled");
  99.             $("#right_button").attr("disabled", "disabled").addClass("ui-state-disabled");
  100.            
  101.          }
  102.          
  103.       },
  104.      
  105.       // This function will set the ULs width
  106.       _get_bar_width: function() {
  107.          
  108.          // Rest the bar width
  109.          settings.bar_width = 0;
  110.          
  111.          // Loop through the UL LI tags
  112.          this.element.find(".ui-tabs-nav:first li").each(function() {
  113.            
  114.             // Add the outWidth of the LI to the bar_width varible
  115.             settings.bar_width += $(this).outerWidth(true);
  116.            
  117.          });
  118.          
  119.          // This line fixes any wrapping issue that are caused by the first two tabs
  120.          settings.bar_width = (settings.bar_width < $('#tabs_container').width() - 5) ? $('#tabs_container').width() - 5 : settings.bar_width;
  121.          
  122.          // Return the width
  123.          return settings.bar_width;
  124.          
  125.       }
  126.  
Attachments:
ScrollableTabs-v4.zip

(238.09 KiB) Downloaded 80 times

Page 1 of 1

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: ScottG and 251 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.