Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Tabs with left and right arrows - kindly any one help me faster please

Posted on 2015-02-19
5
Medium Priority
?
562 Views
Last Modified: 2016-02-25
This is the below code i m using show arrows for bootstrap tabs ..

i just need to show arrows not from beginning . when more tabs open lets assume 5 . show arrows i mean to say if more than 5 tabs open then will show right arrow becuase i want to navigate to right if have more than 5 or 6 then show left arrow to to navigate back to same tabs .

and if i don`t have tabs more than 5 then don`t show even arrows both .

Kindly any one can help faster please

var widthOfList = function(){
  var itemsWidth = 0;
  $('#tabs>li').each(function(){
    var itemWidth = $(this).outerWidth();
    itemsWidth+=itemWidth;
  });
  return itemsWidth;
}

var widthOfHidden = function(){
  return (($('#tabs').outerWidth())-widthOfList()-getLeftPosi())-scrollBarWidths;
};

var autocollapse = function() {
  var tabs = $('#tabs');
  
  if ((tabs.outerWidth()) < widthOfList()) {
    $('#leftArr').hide();
    $('#rightArr').show();
  }  
};

$(document).ready(function() {
  
  	autocollapse(); // when document first loads

	$(window).on('resize', autocollapse); // when window is resized
  
    $('#rightArr').click(function() {
     $('#tabs').css('position','absolute');
     $('#tabs').animate({right:"+5px"},'slow',function(){
        $('#rightArr').hide();
        $('#leftArr').show();
        autocollapse();
      });  	
	});
  
    $('#leftArr').click(function() {
      $('#tabs').animate({left:'-=0'},'slow',function(){
         $('#tabs').removeAttr('style');
         $('#leftArr').hide();
         autocollapse();
      });  	
	});
});

Open in new window


<div class="container-fluid">
	<div class="row">
      <a href="#" id="leftArr" class="arrow">
        <i class="glyphicon glyphicon-chevron-left"></i>
      </a>
      <a href="#" id="rightArr" class="arrow">
        <i class="glyphicon glyphicon-chevron-right"></i>
      </a>
      <ul class="nav nav-tabs" id="tabs">
          <li><a href="#">Tab0</a></li>
          <li><a href="#">Tab1</a></li>
          <li><a href="#">Tab2</a></li>
          <li><a href="#">Tab3</a></li>
          <li><a href="#">Tab4</a></li>
          <li><a href="#">Tab5</a></li>	  
          <li><a href="#">Tab6</a></li>
          <li><a href="#">Tab7</a></li>
          <li><a href="#">Tab8</a></li>
          <li><a href="#">Tab9</a></li>
          <li><a href="#">Tab10</a></li>
          <li><a href="#">Tab11</a></li>
          <li><a href="#">Tab12</a></li>
          <li><a href="#">Tab13</a></li>
          <li><a href="#">Tab14</a></li>	
          <li><a href="#">Tab15</a></li>
          <li><a href="#">Tab16</a></li>
          <li><a href="#">Tab17</a></li>
          <li><a href="#">Tab18</a></li>
          <li><a href="#">Tab19</a></li>
          <li><a href="#">Tab20</a></li>
          <li><a href="#">Tab21</a></li>
      </ul>
    </div>
</div>

Open in new window

0
Comment
Question by:sastry_hora
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 34

Accepted Solution

by:
Slick812 earned 1500 total points
ID: 40621565
greetings sastry_hora, , I do not see how your current <div> <ul> structure can work? Your id="tabs" <ul> is suppose to move by changing position, but you can not have other elements inside the <div> that this moves in. You must remove the
     <a href="#" id="leftArr"
and
     <a href="#" id="rightArr"
from the
     <div class="row">

so the
    <ul class="nav nav-tabs" id="tabs">
is all that's in that <div class="row">, if you use
     $('#tabs').css('position','absolute');
absolute positioning for movement.

the arrow things
     <a href="#" id="leftArr"
and
     <a href="#" id="rightArr"
need to be outside of the  <div class="row">  on the left and right side of it.
0
 

Author Comment

by:sastry_hora
ID: 40621694
Thanks for your response at least you responded my question . i made fiddle here the link http://jsfiddle.net/m0xck7k9/1/ 

now you see right now by default . i want this will be visible when i have more than 25 tabs .. i m adding tabs using jquery dynamically lets say if i set a value 25 then show right arrow to see more tabs . just wanted to show arrow when tabs increase more than i specified number.  Hope you understand what i mean to say please let me know
0
 
LVL 34

Expert Comment

by:Slick812
ID: 40621918
???
???
???
I looked at your  fiddle code works, and I clicked on the Right arrow, and NOTHING HAPPENED, nothing, no movement of tabs, not change in any page elements that I could see.
Shouldn't you get the tab movement working, before you even try and do other peripheral stuff like count the tabs (or get width) and show or hide any arrows? ?

I do not understand why you have the function -
   autocollapse()
all over the place, you do NOT need that functioning except maybe in the page start event.

Next, I do not think that you understand how to do <div> (or <ul> in this) movement inside another container <div> like   <div class="row">
I did not see any CSS class definition for class="row" , is this some sort of Bootstrap CSS?

anyway, I can try to greatly change the fiddle code
0
 

Author Comment

by:sastry_hora
ID: 40621936
yes that is bootstrap css row class i mean .. and just click on right side arrow button i mean arrow right corner button you will hyper link there. i took this code from google needs to tweek a bit work as expected with your help. please
0
 
LVL 34

Expert Comment

by:Slick812
ID: 40621999
OK I altered the fiddle at
http://jsfiddle.net/m0xck7k9/3/

and now  more or less seems to work in firefox and chrome,  JUST to move the Tabs to the right and left, I did this but I do not have time to do the full development for this, as your tabs are NOT all the same width, and it can get really picky code work (much time) to try and get all tab elements width at different positions, and recalculate the relative movement positions.

Please notice how I took the arrows OUT of the tab <div> placement altogether, AND how I set the css for .row to position:relative;

AND the visible Borders I added are for DEvelopment ONLY, as I need to see where the boundries of elements to make pixel adjustments.
this is not so responsive, as I set the .row { width:

to a fixed amount to show about 5 tabs
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

688 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question