Scrolling Bootstrap tabs

Here is the code snippet provided below:

JavaScript:

var hidWidth;
var scrollBarWidths = 40;

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

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

var getLeftPosi = function(){
    return $('.list').position().left;
};

var reAdjust = function(){
    if (($('.wrapper').outerWidth()) < widthOfList()) {
        $('.scroller-right').show();
    }
    else {
        $('.scroller-right').hide();
    }

    if (getLeftPosi()<0){
        $('.scroller-left').show();
    }
    else {
        $('.item').animate({left:"-="+getLeftPosi()+"px"},'slow');
        $('.scroller-left').hide();
    }
}

reAdjust();

$(window).on('resize',function(e)
{  
    reAdjust();
});

$('.scroller-right').click(function()
{
    $('.scroller-left').fadeIn('slow');
    $('.scroller-right').fadeOut('slow');

    $('.list').animate({left:"+="+widthOfHidden()+"px"},'slow',function(){

    });
});

$('.scroller-left').click(function()
{
    $('.scroller-right').fadeIn('slow');
    $('.scroller-left').fadeOut('slow');

    $('.list').animate({left:"-="+getLeftPosi()+"px"},'slow',function(){

    });
});

CSS:

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

.list {
    position:absolute;
    left:0px;
    top:0px;
    min-width:3000px;
    margin-left:12px;
    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;
}

HTML:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" type="text/css" />

<div class="container">
    <div class="scroller scroller-left"><i class="glyphicon glyphicon-chevron-left" /></div>
    <div class="scroller scroller-right"><i class="glyphicon glyphicon-chevron-right" /></div>
    <div class="wrapper">
        <ul class="nav nav-tabs list" id="myTab">
            <li class="active"><a href="#home">Home</a></li>
            <li><a href="#profile">Profile</a></li>
            <li><a href="#messages">Messages</a></li>
            <li><a href="#settings">Settings</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>
        </ul>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>

Preview

The above code creates a functional horizontal menu with scrolling arrows.

Two important questions I have are:

  • Is it possible to convert the horizonal menu into a vertical one with a fixed height of 150px?

  • How can I replace the existing horizontal menu with a vertical one, where the items flow from top to bottom within a 150px high container?

jqueryhtmlcsstwitter-bootstrap

Answer №1

This is not exactly what you're looking for, but it's close to the desired output! :

var hidHeight;
var scrollBarHieghts = 40;
var heightOfList = function(){
  var itemsHeight = 0;
  $('.list li').each(function(){
    var itemHeight = $(this).outerHeight();
    itemsHeight+=itemHeight;
  });
  return itemsHeight;
};
var heightOfHidden = function(){
  return (($('.wrapper').outerHeight())-heightOfList()-getTopPosi())-scrollBarHieghts;
};
var getTopPosi = function(){
  return $('.list').position().top;
};
var reAdjust = function(){
  if (($('.wrapper').outerHeight()) < heightOfList()) {
    $('.scroller-down').show();
  }
  else {
    $('.scroller-down').hide();
  }
  if (getTopPosi()<0) {
    $('.scroller-up').show();
  }
  else {
    $('.item').animate({top:"-="+getTopPosi()+"px"},'slow');
    $('.scroller-up').hide();
  }
}
reAdjust();
$(window).on('resize',function(e){  
  reAdjust();
});
$('.scroller-down').click(function() {
  $('.scroller-up').fadeIn('slow');
  $('.scroller-down').fadeOut('slow');
  $('.list').animate({top:"+="+heightOfHidden()+"px"},'slow',function(){
  });
});
$('.scroller-up').click(function() {
  $('.scroller-down').fadeIn('slow');
  $('.scroller-up').fadeOut('slow');
  $('.list').animate({top:"-="+getTopPosi()+"px"},'slow',function(){
  });
});
.wrapper {
  position: relative;
  margin-top: 25px;
  overflow: hidden;
  padding: 5px;
  height: 90vh;
  width: 100px;
}
.list {
  position: absolute;
  left: 0px;
  top: 0px;
  margin-left: 12px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.list li{
  display: table-cell;
  position: relative;
  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;
  position: absolute;
}
.scroller-up {
  z-index: 100;
  top: 0;
}
.scroller-down{
  z-index: 100;
  bottom: 0;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" type="text/css" />

<div class="container">
  <div class="scroller scroller-up"><i class="glyphicon glyphicon-chevron-up"></i></div>
  <div class="scroller scroller-down"><i class="glyphicon glyphicon-chevron-down"></i></div>
  <div class="wrapper">
    <ul class="nav nav-pills nav-stacked list" id="myTab">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Profile</a></li>
      <li><a href="#">Messages</a></li>
      <li><a href="#">Settings</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>
    </ul>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>

Answer №2

let hiddenHeight;
const scrollBarHeights = 40;
const heightOfListItems = () => {
  let itemsHeight = 0;
  $('.list li').each(function(){
    const itemHeight = $(this).outerHeight();
    itemsHeight += itemHeight;
  });
  return itemsHeight;
};
const heightOfHiddenItems = () => {
  return (($('.wrapper').outerHeight()) - heightOfListItems() - getTopPosition()) - scrollBarHeights;
};
const getTopPosition = () => {
  return $('.list').position().top;
};
const readjustScrollBar = () => {
  if (($('.wrapper').outerHeight()) < heightOfListItems()) {
    $('.scroller-down').show();
  } else {
    $('.scroller-down').hide();
  }
  if (getTopPosition() < 0) {
    $('.scroller-up').show();
  } else {
    $('.item').animate({ top: "-=" + getTopPosition() + "px" }, 'slow');
    $('.scroller-up').hide();
  }
}
readjustScrollBar();
$(window).on('resize', function(e){  
  readjustScrollBar();
});
$('.scroller-down').click(function() {
  $('.scroller-up').fadeIn('slow');
  $('.scroller-down').fadeOut('slow');
  $('.list').animate({ top: "+=" + heightOfHiddenItems() + "px" }, 'slow', function(){
  });
});
$('.scroller-up').click(function() {
  $('.scroller-down').fadeIn('slow');
  $('.scroller-up').fadeOut('slow');
  $('.list').animate({ top: "-=" + getTopPosition() + "px" }, 'slow', function(){
  });
});
.wrapper {
  position: relative;
  margin-top: 25px;
  overflow: hidden;
  padding: 5px;
  height: 90vh;
  width: 100px;
}
.list {
  position: absolute;
  left: 0px;
  top: 0px;
  margin-left: 12px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.list li{
  display: table-cell;
  position: relative;
  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;
  position: absolute;
}
.scroller-up {
  z-index: 100;
  top: 0;
}
.scroller-down{
  z-index: 100;
  bottom: 0;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" type="text/css" />

<div class="container">
  <div class="scroller scroller-up"><i class="glyphicon glyphicon-chevron-up"></i></div>
  <div class="scroller scroller-down"><i class="glyphicon glyphicon-chevron-down"></i></div>
  <div class="wrapper">
    <ul class="nav nav-pills nav-stacked list" id="myTab">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Profile</a></li>
      <li><a href="#">Messages</a></li>
      <li><a href="#">Settings</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>
    </ul>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>

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

Retain the dashes in their original positions while extracting numbers following each dash from an array using Regex

Someone from a different discussion helped me figure out how to extract the numbers from an array. However, I am now struggling to capture the numbers after the "-" dash. Let me illustrate what I have and put you in the same scenario. Here is the array co ...

phphtmlarraysregexnumbers

Creating a cell in HTML/CSS with wrapped data

Is there a way to properly wrap data in the table instead of getting a scroll bar when the template name is too long? I would like it to automatically go to the next line. <table class="selectablePreviousOrder dashboard"> <tr ng-class-odd=" ...

htmlcss

Placeholder information is not displaying correctly on Bootstrap 5.2

I am currently working on a webpage using Bootstrap 5.2 and have the following code snippet included: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="91f3fefee5e2e5e3f0e1d1a4bfa3bfa ...

cssbootstrap-5

Update the text within a list item using jQuery

Looking for help with a simple UL <ul id=ABC> <li>AAABBBCCC</li> <li>BBBBB</li> </ul> I'm seeking a JavaScript function using jQuery. The function should take one argument, so that if "BB" is entered, it will upda ...

jqueryselector

I have created a Joomla Template that incorporates my own CSS through JavaScript. Is there a method to include a distinct version tag to my custom CSS file, such as custom.css?20180101?

My usual method involves adding a unique tag to the css path in the html section, but my template is incorporating custom CSS through Javascript: if (is_file(T3_TEMPLATE_PATH . '/css/custom.css')) { $this->addStyleSheet(T3_TEMPLATE_URL . &apo ...

javascriptphphtmlcssjoomla

Step-by-step guide on implementing a fade effect to a specific JavaScript element ID

When I click a button, the image on the screen disappears. I am looking to add a fade effect to this action. Can someone help me achieve this using CSS? #hide{-webkit-transition: all 1s ease-in-out;} For reference, here is a demo showcasing the current b ...

javascriptcsscss-transitionsfadeout

What is the best way to make the buttons on my website shift downwards?

I'm currently working on making my website mobile-friendly. I've managed to stack the buttons on top of each other when the width reaches 700, but now I'm struggling to make them move down the screen. Some resources suggest using absolute po ...

jqueryhtmlcss

The alignment of the label button within the form-group is being set to the top

While using Bootstrap 4, I encountered an issue with aligning the save button in a form group because there was no label at the same level. Despite trying to follow an example from here, I still had to hard code margin-top to prevent the button from bein ...

htmlcssbootstrap-4

Kickstart your BX Slider with the startSlide feature

I am currently utilizing bx-slider as a navigation menu. Within each slide, I have 4 items displayed and I am trying to figure out how to utilize the startSlide option. This way, the bx-slider would not automatically start on the first slide, but rather o ...

jquerybxslider

Enhancing react-to-print functionality for optimal performance across various browsers and mobile platforms

Currently, I am developing a sample react-to-print resume template to be included in a larger portfolio website. While testing the page on Chrome and Edge browsers on a laptop, everything seems optimized. However, there are issues when using Firefox; the b ...

cssreactjsreact-to-print

Examining the visibility of a specific element

I am working on a script to determine the visibility of an element and scroll down to it if it is visible. Here is the jQuery code I have tried: var j = jQuery.noConflict(); jQuery(document).ready(function($) { if(j('#element').css(' ...

jqueryif-statementscrollto

Tips for disabling scrolling on touch screens for input elements

I am facing an issue with a modal that is positioned on top of a scrollable document body. I am trying to prevent the scrolling of the document when I swipe my finger on the modal. $(document).on('touchstart touchmove', function(e){ e.preventDef ...

javascriptjquerymodal-dialogmobile-safari

Is the Spring MVC ModelAndView object being returned?

After clicking a link on a jsp page, I have a GET method that is instantiated as: HTML: <div class="panel accordion clearfix" id="dispdir"> <script type="text/javascript"> window.onload = function() { //showDirectorySe ...

javascripthtmlspringmodelandview

Looking for a substitute for iframes when using jQuery UI tabs?

I currently have a Spring-based web application that integrates with jQuery Tabs. What I'm doing is building a data string with specific parameters and appending it to a URL: var hrefData = "?" + item1 + "&" + item2 + "&" + item3; var href = ...

javascriptjqueryhtmlajaxjquery-tabs

Calculating the total number of days in each month within a specified date range using PHP in a dynamic way

Thank you for taking the time to help me with my issue. For instance, if a user selects a date range from 10 Dec 2016 to 20 April, how can I calculate the number of days for each month within that range? For example, Dec=22 Days, Jan=31 Days, Feb=28 Days, ...

javascriptphpjqueryhtmlcss

Unable to execute PHP code within a PHP file loaded through AJAX

I'm currently in the process of developing a webshop using WooCommerce. I have successfully implemented two switch buttons that allow users to toggle between 'List view' and 'Grid view'. Specifically, for the list view button, I am ...

javascriptphpjqueryajaxwordpress

Why isn't the dropdownlist setting a default value in Javascript?

<select id="modalAdd_DDLSample"> </select> <option value=0> PC</option> <option value=1> MAC </option> <option value=2> Rasberry </option> $("#modalAdd_DDLSample").val("1"); $("#modalAdd_DDLSample").val(1); ...

javascriptjquerydrop-down-menubootstrap-4

The data table appears to be malfunctioning when the table collapses

Having trouble with the data table when adding a collapse tr. Removing the collapse tr fixes the data table issue. Any help on how to resolve this would be appreciated. $('.tableToggleUl').parent('td').css('padding','0 ...

jqueryhtmlcsstwitter-bootstrapdatatable

What is the best way to update the video source upon clicking a link with JQuery?

Is there a way to change the video src using jQuery when a link is clicked? For example, if the user clicks on "#staff", the video src will be updated. <ul class="nav nav-pills" > <li role="presentation" class="loginPills"><a ...

javascriptjqueryhtmlcssvideo

Display a modal popup form in ReactJS when a particular key is pressed

As a beginner in ReactJS, I am currently developing the frontend of a web application that requires multiple modal dialogues to be displayed based on specific key combinations. To achieve this functionality, I plan to utilize JQuery-UI for the modal dialog ...

javascriptjqueryjquery-uireactjskeyevent