Navigate the scroll bar horizontally one by one instead of all at once, due to a width problem

The issue I'm facing involves determining the correct width for scrolling left or right. This results in the navigation tabs not scrolling correctly one by one. Each time I click the scroll right button, it adds more width than necessary and causes the nav bars to not scroll properly.

Thank you in advance.

var scrollBarWidths = 40;
var widthOfList = function(){
  var itemsWidth = 0;
  $('.list a').each(function(){
    var itemWidth = $(this).outerWidth();
    itemsWidth+=itemWidth;
  });
  return itemsWidth;
};
var innerwidth = 0;
var widthofEachNav = function(){
var itemsWidth = 0;
var count = 0;
  $('.list a').each(function(){
    innerwidth = $(this).innerWidth();
    var itemWidth = $(this).outerWidth();
    itemsWidth+=itemWidth;
count++
  });
  console.log(itemsWidth+"  "+count+"     width"+(itemsWidth/count ))
  return (itemsWidth/count);
}
var widthNav = widthofEachNav();
var getLeftPosi = function(){
  return $('.list').position().left;
};
var widthOfHidden = function(){
  return (($('.wrapper').outerWidth())-widthOfList()-getLeftPosi());
};
var hidvith = widthOfHidden();

$('.scroller-right').click(function() {
  $('.scroller-left').fadeIn('slow');
if(widthOfHidden()<0 && getLeftPosi()<=0){
$('.list').animate({left:"-="+widthNav+"px"},'slow',function(){  });
}
  
});

$('.scroller-left').click(function() {
$('.scroller-right').fadeIn('slow');
  if(getLeftPosi()<0 ){
$('.list').animate({left:"+="+widthNav+"px"},'slow',function(){  });
  }
  
});   
$(window).on('resize',function(e){  
  reAdjust();
});
var reAdjust = function(){
  if (($('.wrapper').outerWidth()) < widthOfList()) {
    $('.scroller-right').show().css('display', 'flex');
  }
  else {
    $('.scroller-right').hide();
  }
  
  if (getLeftPosi()<0) {
    $('.scroller-left').show().css('display', 'flex');
  }
  else {
    $('.item').animate({left:"-="+getLeftPosi()+"px"},'slow');
  $('.scroller-left').hide();

  
  }

  $('.scroller-right').show();
}

reAdjust();
.closeBtn:focus {
  outline: none;
}
.w-100.p-3 {
    max-width: 50%;
}

.close{
    color: gray;
  }

.wrapper {
    position:relative;
    margin:0 auto;
    overflow:hidden;
padding:5px;
height:50px;
}

.list {
    position:absolute;
    left:0px;
    top:0px;
min-width:3500px;

margin-top:0px;
}

.list li{
display:table-cell;
    position:relative;
    text-align:center;
    cursor:grab;
    cursor:-webkit-grab;
    color:#efefef;
    vertical-align:middle;
}

.scroller {
text-align:center;
cursor:pointer;
display:none;
padding:7px;
padding-top:11px;
white-space:no-wrap;
vertical-align:middle;
background-color:#fff;
}

.scroller-right{
float:right;
}

.scroller-left {
float:left;
}
.xyzzz {
max-width: 27% !important;
min-width: 20% !important;
}
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!-- <script src="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"></script> -->
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div class="w-100 p-3">

<div class="scroller scroller-left mt-2"><i class="fa fa-chevron-left"><</i></div>
<div class="scroller scroller-right mt-2"><i class="fa fa-chevron-right"></i>></div>
<div class="wrapper">
<nav class="nav nav-tabs list mt-2" id="myTab" role="tablist">
<a class="nav-item nav-link active" data-toggle="tab" href="#tab1" role="tab" aria-controls="public" aria-expanded="true">Tab1</a>
<a class="nav-item nav-link" href="#tab2" role="tab" data-toggle="tab">Tab 2</a>
<a class="nav-item nav-link" href="#tab3" role="tab" data-toggle="tab">Tab 3</a>
<a class="nav-item nav-link" href="#tab4" role="tab" data-toggle="tab">Tab 4</a>
<a class="nav-item nav-link" href="#tab5" role="tab" data-toggle="tab">Tab 5</a>
<a class="nav-item nav-link" href="#tab6" role="tab" data-toggle="tab">Tab 6</a>
<a class="nav-item nav-link" href="#tab7" role="tab" data-toggle="tab">Tab 7</a>
<a class="nav-item nav-link" href="#tab8" role="tab" data-toggle="tab">Tab 8</a>
<a class="nav-item nav-link" href="#tab9" role="tab" data-toggle="tab">Tab 9</a>
<a class="nav-item nav-link" href="#tab10" role="tab" data-toggle="tab">Tab 10</a>
<a class="nav-item nav-link" href="#tab11" role="tab" data-toggle="tab">Tab 11</a>
<a class="nav-item nav-link" href="#tab12" role="tab" data-toggle="tab">Tab 12</a>
<a class="nav-item nav-link" href="#tab13" role="tab" data-toggle="tab">Tab 13</a>
<a class="nav-item nav-link" href="#tab14" role="tab" data-toggle="tab">Tab 14</a>
<a class="nav-item nav-link" href="#tab15" role="tab" data-toggle="tab">Tab 15</a>
<a class="nav-item nav-link" href="#tab16" role="tab" data-toggle="tab">Tab 16</a>


</nav>
</div>
<div class="tab-content" id="myTabContent">
<div role="tabpanel" class="tab-pane fade active show mt-2" id="tab1" aria-labelledby="public-tab" aria-expanded="true">
Tab 1
</div>
<div class="tab-pane fade mt-2" id="tab2" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
<p class="">Tab 2</p>
</div>  
<div class="tab-pane fade mt-2" id="tab3" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
<p class="">Tab 3</p>
</div>  
... // Remaining tab content goes here

</div>

javascriptjqueryhtmlcssnav

Answer №1

Take a look at the code below. I have made some changes to existing classes in the CSS file, which are located at the bottom of the CSS code.

var scrollBarWidths = 40;
var widthOfList = function(){
  var itemsWidth = 0;
  $('.list a').each(function(){
    var itemWidth = $(this).outerWidth();
    itemsWidth+=itemWidth;
  });
  return itemsWidth;
};
var innerwidth = 0;
var widthofEachNav = function(){
var itemsWidth = 0;
var count = 0;
  $('.list a').each(function(){
    innerwidth = $(this).innerWidth();
    var itemWidth = $(this).outerWidth();
    itemsWidth+=itemWidth;
count++
  });
  console.log(itemsWidth+"  "+count+"     width"+(itemsWidth/count ))
  return (itemsWidth/count);
}
var widthNav = widthofEachNav();
var getLeftPosi = function(){
  return $('.list').position().left;
};
var widthOfHidden = function(){
  return (($('.wrapper').outerWidth())-widthOfList()-getLeftPosi());
};
var hidvith = widthOfHidden();

$('.scroller-right').click(function() {
  $('.scroller-left').fadeIn('slow');
if(widthOfHidden()<0 && getLeftPosi()<=0){
$('.list').animate({left:"-="+widthNav+"px"},'slow',function(){  });
}
  
});

$('.scroller-left').click(function() {
$('.scroller-right').fadeIn('slow');
  if(getLeftPosi()<0 ){
$('.list').animate({left:"+="+widthNav+"px"},'slow',function(){  });
  }
  
});   
$(window).on('resize',function(e){  
  reAdjust();
});
var reAdjust = function(){
  if (($('.wrapper').outerWidth()) < widthOfList()) {
    $('.scroller-right').show().css('display', 'flex');
  }
  else {
    $('.scroller-right').hide();
  }
  
  if (getLeftPosi()<0) {
    $('.scroller-left').show().css('display', 'flex');
  }
  else {
    $('.item').animate({left: "-=" + getLeftPosi() + "px"}, 'slow');
  $('.scroller-left').hide();

  
  }

  $('.scroller-right').show();
}

reAdjust();
.closeBtn:focus {
  outline: none;
}
.w-100.p-3 {
    max-width: 50%;
}

    .close{
        color: gray;
      }

.wrapper {
    position:relative;
    margin:0 auto;
    overflow:hidden;
padding:5px;
  height:50px;
}
 ...
 ... <!-- The rest of the CSS code remains unchanged from the original content -->
...
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
...
... <!-- Remaining HTML code is same as before -->
...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

$watch does not work properly when used with arrays

Observing an array for changes and calling a function when it does: $scope.$watch( $scope.aQuestions, function checkQuestionCount(newValue, oldValue) { debugger; if (newValue === oldValue) { ...

javascriptangularjs

The JWT Cookie has successfully surfaced within the application tab and is now being transmitted in the request

When sending a JWT token to an authorized user in Express, the following code is used: The cookie-parser module is utilized. module.exports.getUser = async (req, res, next) => { console.log('i am in getuser'); const { SIT } = req.query; ...

javascriptnode.jsexpressjwtexpress-jwt

Information about Doughnut chart in React using the react-chartjs-2 package

Is there a way to write text directly on a Doughnut using react-chartjs-2? Most answers I came across explain how to place text in the center of a Doughnut, but not actually on it. Here is an image for reference: ...

javascriptreactjstextreact-chartjs-2

Attempting to eliminate the right margin of a CSS grid

After creating a div and applying the "display: grid" property to it, everything seemed fine at first. However, I encountered an issue with a margin that appeared. I'm not sure if this is due to incorrect code on my part or some other reason. I attemp ...

css

The issue of font icons not displaying seems to be affecting all users

I have developed my own website that functions similar to fontawesome. However, after uploading it to an online server, I encountered a problem where others are unable to use my custom font icon. In order for someone to utilize the font icon from my websi ...

htmlcss

What is the best way to make a CSS element move with Javascript?

Currently working on a JavaScript game where I am in need of a CSS object to replace the original JavaScript object. Specifically, I want my "sword" CSS object to move along with my player object when it is Unsheathead. All the examples I find only show wh ...

javascripthtmlcss

Geometry is making its debut appearance in ThreeJS for the very first time!

Currently, I am experimenting with a simple script using ThreeJS to create a point wherever you click on the screen. Below is the function responsible for adding the point: function addPoint(coord){ var geometry = new THREE.BufferGeometry(); var verti ...

javascriptthree.js

Issue with overlay functionality after updating to jQuery version 1.12.1

Hey there! I'm currently in the process of upgrading my web application system's jQuery to version 1.12.1 and I've run into an issue with the overlay not functioning properly in the new jQuery version. My setup involves using ajax to displ ...

javascriptjqueryhtmlajaxjquery-ui

Pass data between JavaScript and PHP using the Phaser framework

I am trying to pass a JavaScript variable to PHP and then store it in a database. Despite searching for solutions on Google, I have not been successful. Most suggestions involve using AJAX, but the code doesn't seem to work when I try it. I attempted ...

javascriptphpjqueryajaxphaser-framework

Guide to implementing if statements within a map function in JavaScript/Vue.js

Currently, I am developing a small application using Vuejs. In this application, I receive response data and then map it to a variable. However, there are some elements with empty arrays in the data. So, during mapping, I need to check a condition and ma ...

javascriptvue.jsmappingvuejs2

What is the procedure for updating or adding data to a JSON file with angularJS?

After successfully creating a local JSON file and retrieving data from it using app.controller('appCtrl', function($scope, $http){ $http.get('employees.json').success(function(data){ $scope.employees=angular.fromJson(data.employee ...

javascriptjsonangularjs

Tips for locating the :before element's position with Javascript

I am currently working on an animation where I need to change the color of an element in the center once a small circle touches it. Despite trying to use the position() method, it does not work as intended because I am using a :before for animating the div ...

javascriptjqueryhtmlcss

Integrating a real-time chat feature on a website

Considering adding a live chat support feature to my website specifically for new users seeking information about my services. I've been contemplating the most effective way to incorporate this solution without relying on third-party options. My idea ...

javascriptjqueryajaxchat

Select the hidden HTML option value automatically according to the previous option selected

I am working on a form that includes 2 select tags with the options male and female. The first select, "gender", is visible to the user while the second select, "age", is hidden. <select name="gender"> <option value="1">Male</option> ...

javascripthtml

When attempting to add an item to an array within a sub-document using Mongoose and MongoDB, the error message "Property 'messages' not found" is returned

I am working with four different models: teacher, student, teacherMessageSchema, and studentMessageSchema. The teacherMessageSchema is a subdocument within the 'teacher' model under the messages: [teacherMessageSchema] property, while the student ...

javascriptmongodbexpressmongoosemongoose-schema

Ways to display the ping of a game server on your screen

Is there a way to display the game server's ping on the screen like in the example below? this.tfEnter.text = ShowPing + " ms"; Sometimes the code snippets provided in examples may not function properly. Channel List Image: https://i.stack ...

javascripttypescriptactionscript-3

Determining the size of <li> elements within Bootstrap 4's tab-content feature

I need some assistance with this issue. I am attempting to calculate the length of a list using Bootstrap 4's tab-content feature. However, when the tab is inactive upon page load, the length is showing as 0. Even after opening the tab, it remains at ...

javascripthtmljquerybootstrap-4

What is the best way to execute an inline function two times in a row

I'm currently utilizing Gametime.js to create a real-time world chat feature. All messages are kept in a database for storage. Interestingly, PubNub, which is used by Gametime.js, seems to require messages to be sent twice for them to actually go th ...

javascriptfunctionloopspubnub

What is the reason behind the failure of the cancel test?

I've created two test cases; one for testing the functionality of the Download button and the other for the Cancel button. However, I am encountering issues with the Cancel test failing consistently. Below is the code snippet where I'm attemptin ...

javascriptnode.jsreactjstestingjestjs

Utilizing regular expressions in Powershell to modify a CSS file

Snippet from my current theme.css file: .actionBlock[selected] { color: var(--gray11); background-color: var(--gray11); } I am trying to modify color: var(--gray11); to color: #FFF; /* UPDATED : var(--gray11) */ After attempting in Po ...

cssregexpowershell