Tab Buttons with Scroll Feature

I'm working on a tabpanel that dynamically generates an unknown number of tabs. To accommodate more tabs than the screen size can display, I've added navigation using the margin style instead of fixed widths. However, I'm struggling to move one tab at a time when clicking the left/right arrow buttons as it currently moves by 20px, which is not precise.
I feel like I might be overlooking something crucial, but I can't seem to pinpoint the issue. Can anyone offer assistance?

I'm open to any alternative solutions as well.

You can find the jsfiddle here.

jquerycsstwitter-bootstrap

Answer №1

Below is the code snippet for the tabstrip functionality. If you find it helpful, please consider upvoting.

JSFIDDLE

var incWidth = 0, divWidth = 0, OlWidth = 0, marginWidth = 50;
    (function($) {
        $.fn.showScrollIcons = function(){
            OlWidth = $('.checkOL').width();
            divWidth = this.width();
            if(divWidth >= OlWidth){
                $('.arrow').hide();
                if(incWidth){
//                        $('.arrow.leftArrow').show();
                        $('.arrow.leftArrow').hide();
                        $('.showTab').removeClass('showTab');
                        $('.checkOL .checkLI:first-child').addClass('showTab');
                        $('.checkOL').animate({'marginLeft':"+=" + incWidth});
                        incWidth = 0;
                    }
                } else {
                    $('.arrow').show();
                    if(!incWidth){
                        $('.arrow.leftArrow').hide();
                    }
                    if(divWidth + incWidth >= ( OlWidth - 12 )){
                        $('.arrow.rightArrow').hide();
                    }
                }
            };
        })(jQuery);
        $(document).ready(function(){
            $('.rightArrow').click(function(){
                var outerWidth = 0;
                var currentTab = $('.showTab');
                if(currentTab.next().length){
                    currentTab.next().addClass('showTab');
                    currentTab.removeClass('showTab');
                    outerWidth = currentTab.outerWidth();
                }
                incWidth += outerWidth;
                $('.checkOL').animate({'marginLeft':"-=" + outerWidth});
                checkArrowHide();
            });
            $('.leftArrow').click(function(){
                var outerWidth = 0;
                var currentTab = $('.showTab');
                if(currentTab.prev().length){
                    currentTab.prev().addClass('showTab');
                    currentTab.removeClass('showTab');
                    outerWidth = $('.showTab').outerWidth();
                }
                incWidth -= outerWidth;
                $('.checkOL').animate({'marginLeft':"+=" + outerWidth});
                checkArrowHide();
            });
            $('.tabBtn').showScrollIcons();
            $( window ).resize(function(){
                $('.tabBtn').showScrollIcons();
            });
            function checkArrowHide(){
                if(!incWidth){
                    $('.arrow.leftArrow').hide();
                } else {
                    $('.arrow.leftArrow').show();
                }
                if(divWidth + incWidth >= ( OlWidth - 12)){
                    $('.arrow.rightArrow').hide();
                } else {
                    $('.arrow.rightArrow').show();
                }
            }
        });

Answer №2

The style is appealing to me. However, consider this alternative approach: by utilizing overflow-x:auto;, you can automatically generate a scroll bar when the tabs become too numerous.

Check out the JSFiddle example here

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

Creating Dynamic Elements in JavaScript: A Step-by-Step Guide

I've been grappling with the challenge of dynamically generating <a> tags for each Subheading (h2 element) on my blog and then populating those tags with the text from the Subheadings. Here's what I've attempted so far: <script> ...

javascripthtmljquerycssdjango

Adjusting the content of mat-cards to fill in blank spaces

I have encountered an issue with the alignment in a list using mat-card. Here is my current layout: https://i.stack.imgur.com/VKSw4.jpg Here is the desired layout: https://i.stack.imgur.com/8jsiX.jpg The problem arises when the size of content inside a ...

htmlcssangularlayoutangular-material

Display a jQuery UI dialog featuring a white box at the center of the website

I seem to be encountering a CSS problem where a white rectangle is showing up in the center of my page when I launch a jQuery UI dialog box in Internet Explorer 10 and Firefox 19.0.2. Can someone please help me figure out what's causing this issue? B ...

jqueryuser-interfacedialogconfirmation

Retrieving input field value in HTML through a button press

Feeling stuck trying to incorporate an input field value into an ajax call? Here's the code I have so far for a button and input field combination, but I can't seem to get it working. function submit() { $.ajax({ type: 'POST&apo ...

javascriptjqueryhtml

When an element is appended, its image height may sometimes be mistakenly reported as

I am dynamically adding divs and I need to retrieve the height and width of an image. Based on this information, I have to apply CSS to the MB-Container class. For example: if the image is portrait orientation, set container width to 100%. If it's ...

javascriptjqueryhtmlcss

Tips for getting the jQuery accordion to return smoothly to its original position (instead of stacking on top of each other)

I'm a complete beginner at this and could really use some assistance. Here's my JS Fiddle: http://jsfiddle.net/hAZR7/ The problem I'm facing seems to be more related to logic or math, as the animation works fine when starting and moving to ...

javascriptjqueryhtmlmath

Is it possible to resize my image according to the screen size using html/css, or is resizing not the problem at all?

I've encountered this issue several times, but I'm unable to pinpoint the problem. The page looks fine at a specific size, but when I start testing and scaling down to around 1260px width, the image overflows creating white space. Removing one of ...

javascripthtmlcssdjangoimage

Is there a way to position the text within an email body at the center using SendGrid?

I've been working on creating an email newsletter template using SendGrid, and I've run into a formatting issue where the content doesn't align properly in the email body. The image below shows how it's appearing incorrectly. Does anyon ...

htmlcsssendgrid

Balanced Columns with Background Extending Beyond Half of the Page

If you're looking for the final code, it can be found here: http://jsfiddle.net/asaxdq6p/6/ I am attempting to create an effect similar to this image: To achieve this, I am using the Equal Height Columns with Cross-Browser CSS trick as described in ...

htmlcssbackgroundfluid-layout

Ways to set a default image for an <img> tag

I am looking to set a default image to the img tag in case the user has not selected a profile picture for their account. Here is the current output: http://jsfiddle.net/LvsYc/2973/ Check out the default image here: This is the script being used: funct ...

javascriptjquerycsshtml

How can I save or export an image file containing HTML content?

Currently, I am working on a project where I am generating dynamic HTML content. My goal is to be able to export or save this HTML content as an image file using PHP, jQuery, and JavaScript (or any other method if applicable). Can anyone help with the im ...

javascriptjqueryhtmlimage

Bootstrap's Vertical Margin Concept

Is there a way to include margin or a line similar to the image below? [![Please refer to the accompanying image][1]][1] ...

htmlcsstwitter-bootstrap

Guide on invoking a distinct function for dynamically generated checkboxes within a specific div

In my project, I am attempting to dynamically generate a group of check-boxes that trigger different functions when clicked. function initializeButtons(variable, length) { for(c = 0; c < length; c++) { clicks.push(true); } for(i = 0 ...

javascriptjquerycheckbox

Design a Hover Mega Menu - click outside to close

Although there are similar topics on stackoverflow, the code I have is different from them. I am trying to achieve the following: If I click on the search box (the white square on the site), my search box should open If I open the search box and then cl ...

jquerycss

`Trick Ajax into displaying 200 status code even on error responses`

Is it possible to suppress exceptions in the console by manually setting the status code to 200 for all errors? For example, can I change a 500 internal server error response to 200? Although I understand that hard-coding status codes is generally conside ...

jqueryajax

Tips for displaying identical tab content across various tabs using jquery or javascript

For instance, if we have tabs labeled as 1, 2, 3, 4, and 5, and a user has selected tabs 2, 3, and 4, how can we display the same content for those tabs while showing different content for the remaining ones? ...

javascriptjquery

create a new button with specific functionality and properties

Currently, I am working on a table that retrieves data from MySQL and displays it. Users have the ability to add new information, which is then appended using Ajax. One issue I encountered is that each row in the table contains a delete button. Although I ...

jqueryajax

Angular 8 allows for the creation of custom checkboxes with unique content contained within the checkbox itself, enabling multiple selection

I'm in need of a custom checkbox with content inside that allows for multiple selections, similar to the example below: https://i.sstatic.net/CbNXv.png <div class="row"> <div class="form-group"> <input type ...

javascriptcssangulartypescriptbootstrap-4

JavaScript code does not seem to be functioning properly on my computer, but it works perfectly fine on

While the code functions perfectly in JSFiddle, it seems to fail when I try to implement it in an HTML file. Despite my efforts, I am unable to pinpoint the source of the issue. If you'd like to view the working version, here is the Fiddle demo. Bel ...

javascriptjqueryhtmlcss

Tips for concealing a div when clicking on an element solely with CSS

I am currently working on creating a CSS Main Menu in Vue. The functionality is such that it pops up when the mouse hovers over it, and hides when the mouse moves out. However, I am facing an issue with hiding the menu when clicking on a hyperlink a. Any s ...

cssvue.js