Mobile Swipeable Inline Buttons

I have created an inline list of buttons in a banner that extends off the screen. I am looking to implement a swipe feature so users can easily navigate through the buttons that are not visible on the screen.

   <style>
    .banner-test {
        // styling properties
    }
    .ui-btn {
       // button styling properties
    }
     // other CSS classes and styles
    
</style>
<div class="banner-test">
    <div class="swiper-holder">
         // buttons
    </div>
</div>

Can this functionality be achieved using jQuery? I have come across touchend and touchstart events but unsure where to begin implementing them. Will this be compatible with most browsers?

After searching online, I have not been able to find any similar implementations or examples.

Fiddle: https://jsfiddle.net/ye2q5ede/

javascriptjqueryhtmlcssjquery-mobile

Answer №1

Have you had a chance to experiment with this new plugin

This plugin offers a wide range of touch events and is compatible with various devices.

Answer №2

This particular technique involves wrapping buttons in a container and activating a scroll bar when the browser window is resized to a smaller width. This allows users on mobile devices to swipe through the buttons.

HTML 

<div class="wrapper">
    <input type="button" class="button" value="Select">
    <input type="button" class="button" value="Select">
    <input type="button" class="button" value="Select">
    <input type="button" class="button" value="Select">
    <input type="button" class="button" value="Select">
    <input type="button" class="button" value="Select">
     <input type="button" class="button" value="Select">
</div>

CSS

    body {
      background-color: #333;
    }
    .wrapper {
      width: 100%;
      white-space: nowrap;
      overflow-y: hidden;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding: 1rem;
      background-color: #ccc;
    }

.internal {
  display: inline;
  background-color: wheat;
  &:nth-child(odd) {
    background-color: hotpink;
  }
}

JSFiddle

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

What is the preferred location to include commonly used jQuery code within Angular.js controllers?

During a project, I encountered an issue where my jQuery code was firing before the page completely loaded while using Angular.js and jQuery together. This resulted in some functionalities not working properly. To address this, I shifted my jQuery code int ...

jqueryangularjs

ng-class causing delay in setTimeout execution until form is modified

In my JavaScript code, I have implemented a timeout function: setTimeout(function () { $scope.shadow = 'speller-blue'; currIndex = Math.floor(Math.random() * 2); $scope.currCard = cards[currIndex]; }, ...

javascriptangularjs

I'm looking for a clear explanation of the concepts of null and undefined, particularly in terms of single, double, and triple equals. Does anyone have a thorough explanation, or

Why does null equal undefined in one comparison but not in another? When comparing using ==, undefined is equal to null. true However, when using !==, undefined is not equal to null. true This means that undefined and null are not strictly equal. ...

javascriptnullcomparisonoperatorsundefined

Is it possible to prevent Firebase Auth Network Error by using event.preventDefault() and event.stopPropagation()?

Encountering an error while attempting to log in. The email address is present on Firebase Auth and login is successful, but the error occurs specifically when event.preventDefault() and event.stopPropagation() are used. These lines are marked with a comme ...

javascriptreactjsfirebasefirebase-authentication

The CSS slider is stuck on the fifth slide and won't move past it

I encountered an issue with the CSS slider I am using, as it only had five radio buttons / slides in its demo. After attempting to add more slides, I noticed that the slider was not scrolling to the new slides. I'm unsure where I made a mistake in m ...

htmlcssslideshow

The responsiveness of the container in Bootstrap 4 is not optimized for mobile devices

In one of my school projects, I decided to incorporate Bootstrap 4. The layout I created consists of a carousel positioned alongside some text. However, the issue lies in the fact that the carousel on the right is responsive across various device widths ex ...

htmlcssbootstrap-4

Eliminate any unnecessary or hidden spacing on the left side of the options within an HTML select

Currently, I am in the process of creating a Registration Form and encountering a challenge with aligning the input[type="text"] placeholder and the "pseudo" placeholder for a <select> element. My goal is to have both placeholders left-aligned flush ...

jqueryhtmlcss

Unattractive mobile modal

Hey there, This is how my .modal CSS code appears: .modal { position: fixed; top: 10%; left: 50%; z-index: 1050; width: 560px; margin-left: -280px; background-color: #fff; border: 1px solid #999; border: 1px solid rgba ...

cssmodal-dialog

The method .setArray has been deprecated in THREE.BufferAttribute. Instead, please use BufferGeometry .setAttribute for unindexed BufferGeometry operations

Seeking assistance with updating the webgl-wireframes library code to the latest version of threejs. The current function is generating the following errors: Uncaught TypeError: THREE.Geometry is not a constructor THREE.BufferAttribute: .setArray has ...

javascriptthree.jsfrontendbuffer-geometry

Can someone provide a list of events for the .on function in Vanilla NodeJS?

Currently experimenting with NodeJS by testing basic backend functionalities like sending various HTTP requests from my index.html file to the server.js file. I plan to delve into Express soon. I've noticed a lack of documentation on NodeJS 'eve ...

javascriptnode.jsnpmeventemitter

What is the best way to make a black background div that perfectly aligns with another div?

When hovering over an image, I want it to fade out to opacity: 0.4, but instead of fading to white, I would like it to fade to black. To achieve this, I decided to change the background color of the body to black so that the fadeout will be towards black. ...

htmlcss

Clicking on the delete option will remove the corresponding row of Firebase data

I am encountering an issue that appears to be easy but causing trouble. My goal is to delete a specific row in an HTML table containing data from Firebase. I have managed to delete the entire parent node of users in Firebase when clicking on "Delete" withi ...

javascripthtmlfirebasefirebase-realtime-database

Designing a custom HTML calendar

I am currently working on a school project where I am creating a calendar using HTML. So far, I have set up the basic structure of the page. What I want to achieve is a functional calendar where users can create appointments that will be displayed accordi ...

javascriptjqueryhtmlcsscalendar

JquerySmoothState causing conflict with Bootstrap 4 tooltip functionality

I have been using Bootstrap 4 tooltip for anchor tags and jQuery SmoothState for ajax loading. However, I am facing an issue where the tooltip remains visible on the next page after clicking a link. Here is a screenshot showing the problem: https://i.ssta ...

jquerybootstrap-4

Want to temporarily display a message in a <p> tag and then hide it using jQuery? Find out how!

I have a paragraph of text that I want to show for a short period of time before blurring it out. <p>Your message has been sent successfully!!!</p> Does anyone have any ideas on how to accomplish this? ...

jquery

Angular 11.0.3 displaying ngClass issue (Unable to bind ngClass as it is not recognized as a property of div)

While working on an angular project, I implemented a light and dark theme using mat-slide-toggle to switch between themes. The theme is stored as a boolean called isDark in a Behavioral Subject service. There are two lazy-loaded modules - one for the home ...

htmlangulartypescriptsass

Shades of Grey in Visual Studio Code

Whenever I use VSC, I notice these odd grey boxes that appear in my editor. They seem to be dynamic and really bother me. Interestingly, switching to a light theme makes them disappear. However, I prefer using a dark theme and haven't been able to fin ...

csslayoutvisual-studio-code

What is the best way to display a message or alert after a page has been re

I've implemented Jquery Toastr to display success messages, functioning similarly to an alert for a brief period. My objective is to display a message after the page reloads. The issue arises when the page is reloaded, causing the JavaScript to reloa ...

javascriptjqueryajax

Add the useState hook from React to an array

Hey there, I need some help with my code. I am trying to add an element to my array, but it's not working as expected. Can you take a look at what I have written below? const [datesState, setDisabledData] = useState([ format(new Date(2021, 4, 1) ...

javascriptarraysreactjsreact-native

Ensuring the slide toggle's status with Cypress validation

As a beginner in Cypress, I am looking to ensure that I can accurately determine the status of the slide toggle button - whether it is ON or OFF. The code below helps to check for this condition but I am unsure about how to implement it within an If-Else s ...

javascriptnode.jstestingautomationcypress