Dynamic button group with scroll functionality in JavaScript/jQuery

Looking for assistance in creating a button group that includes a left and right arrow to scroll through the buttons when there are more than X amount in the group. The end result should resemble something like this:

https://i.sstatic.net/FQXLE.jpg

Tried creating a button group with the following code snippet:

<div class="btn-group">
        <a class="button btn-days">Monday</a>
        <a class="button btn-days">Tuesday</a>
        <a class="button btn-days">Wednesday</a>
        <a class="button btn-days">Thursday</a>
        <a class="button btn-days">Friday</a>
        <a class="button btn-days">Saturday</a>
        <a class="button btn-days">Sunday</a>
</div>
javascriptjqueryhtmlcss

Answer №1

A neat solution is to utilize Bootstrap by simply adding ".pre-scrollable" to the parent div.

<div class="btn-group pre-scrollable" role="group" id="year">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
</div>

Answer №2

Utilize jQuery for its convenient methods such as find, which allows you to easily count results and perform DOM manipulations based on the outcome.

For instance:

If there are more than 3 instances of ".button" within ".btn-group", execute a specific action.

Reference: https://api.jquery.com/find/

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

Please input password through the use of ajax technology

Is there a way to secure access to write.php with a password input via jQuery ajax on another page (index.php)? index.php <div id="btnsNo"> <img class="btNo" id='n0' src="btns/num0.png" alt="num"> <img class="btNo" id='n1& ...

jqueryajax

Creating a custom design for a dropdown menu in the Bootstrap navbar

My Bootstrap navbar has a unique color scheme for the navbar itself and the letters, as indicated in the following CSS: .jumbotron { background-color:#2d4c60 !important; } nav.navbar { background-color: #2d4c60; } .nav.navbar-nav.navbar-ri ...

htmlcsstwitter-bootstrapbootstrap-4

The Functional Components array is not correctly adding the props content

I'm facing an issue with adding an array of <TokenFeed/> functional components to the <Feeds/> component. The problem arises when I try to use the onClick() event handler to pass text to my <App/>, as it doesn't behave as expect ...

javascriptreactjsreact-hooksreact-propsreact-functional-component

The appearance of my HTML website varies significantly across different devices used by viewers

It's frustrating to see that my HTML website appears differently on various devices. While it looks perfect on mine, my friend is facing issues such as containers being out of place and images not loading properly. I really need to figure this out as ...

htmlcssbootstrap-4

Locate all elements containing a specific text string

In an attempt to clean up html-elements, I am searching for specific text strings within 2376 html-documents. The documents have varying doctype standards, with some lacking a doctype altogether (which may not be relevant). I am specifically looking for t ...

c#htmlxpathhtml-agility-pack

Verify the presence of an image

I have a code snippet that I use to refresh an image in the browser. However, I want to enhance this code so that it first checks if the image exists before displaying it. If the image does not exist, I want to display the previous version of the picture i ...

javascriptjqueryajax

Making an element transparent in CSS without affecting the text within it

Recently, I created a menu block element and decided to apply an opacity of 0.4/40 to it. However, I encountered an issue where the text within the menu block was also affected by the opacity. My aim is to have the opacity only impact the menu block itsel ...

css

Struggling with developing a straightforward application with Angular-Material

My goal is to develop an application that utilizes the Angular Material navigation bar, as showcased in this example. Being relatively new to AngularJS, I'm facing an issue where my app loads but only displays a blank page. Below is the code snippet ...

javascripthtmlangularjstwitter-bootstrapangular-material

if considering an integer value of 0 as equivalent to null

I am struggling with using axios to send data to an API in react. Despite the server successfully receiving the values, my code is not entering the if block as expected. Interestingly, when I make the same request from a rest client, it works perfectly. He ...

javascriptnode.jsreactjsaxios

"Can anyone help me figure out why my 'for' loop is only retrieving the final item in my HTML code

After reading about JavaScript closures inside loops and why only the last item is displayed in a loop, I still can't figure out the issue. So, I decided to seek help by posting my code here. function Produit(nom, prix){ this.nom = nom; this. ...

javascriptjquery

Unable to successfully send multiple values from input fields using forms in PHP

I am currently facing an issue with my HTML form that contains a field consisting of multiple selection boxes as shown below: <div class="form-group"> <select multiple name="Fee[]"> ...

javascriptphphtml

Issues encountered while trying to style an unordered list using the table-cell property

I am having trouble formatting the "How it works" section on my website. When the text is too long, the numbers on the left side grow alongside it as shown in number 4. Is there a way to keep the numbers fixed on the left while allowing the text to expand ...

htmlcss

Tips for passing a URL variable into an Ajax script to prefill a form input in a search field

I have a website with a search feature that dynamically queries a database as you type in the search field, similar to Google's search suggestions. This functionality is achieved through AJAX. As the results appear on the page while you enter your se ...

javascriptphpjqueryajax

Adjust Leaflet map size when the containing element is resized (Dash Plotly)

I am encountering some difficulties with dash-leaflet, particularly regarding its width when the parent container is resized. I am utilizing dash-resizable-panels to resize certain divs. Allow me to present a Minimal Reproducible Example (MRE) below: # pi ...

javascriptleafletplotly-dashdash-leaflet

Employing selenium for automated testing on a dynamic web application that dynamically generates its HTML elements using Javascript

I recently set up the stable-diffusion webUI on my system, and I'm looking to create a wrapper program that focuses on experimenting with different prompt generation techniques using various parameters like sampling methods and steps. Initially, I co ...

javascriptpythonhtmlselenium

Repeated firing of jQuery's Ajaxstop within a click event

When using the quantity plus button on the woocommerce cart page and reaching maximum stock, I want to display a notice. However, due to an auto update on the cart, I have to wait for the ajax load to complete before showing the notice. My script revealed ...

javascriptjqueryajaxwoocommerceclick

Switching Text Boxes TextMode using jQuery

Is there a more efficient method to change the text mode from myTextBox.TextMode = TextBoxMode.Password; to myTextBox.TextMode = TextBoxMode.SingleLine; using client-side code and jQuery? I need to perform this action on focus, while also clearin ...

jqueryasp.net

I keep encountering an error that says "ReferenceError: localStorage is not defined" even though I have already included the "use

I have a unique app/components/organisms/Cookies.tsx modal window component that I integrate into my app/page.tsx. Despite including the 'use client' directive at the beginning of the component, I consistently encounter this error: ReferenceErr ...

javascriptreactjsnext.jsserver-side-rendering

Ways to retrieve a variable within the init() function

My current project involves using datatables along with ajax to display information dynamically. Below is the code snippet I am working with: // Setting up the module var DatatableAdvanced = function() { // Examples of Basic Datatables var _c ...

javascriptjquerydatatables

Tips for properly sizing 13 images in Next.js

I've been facing some challenges while working on a responsive website, particularly with getting the sizing right. When viewing my image on mobile, everything looks good: https://i.sstatic.net/gNm14.png However, when I switch over to desktop view, ...

htmlcssnext.jsresponsive-design