explore the route with the help of jquery scrolling feature

Is there a way to implement scrolling functionality for tab headers similar to this demo? I have a list of elements within a div that I need to scroll like the tabs in the demo.

I attempted to achieve this by setting the position of the inner elements to absolute, but I was unsuccessful in replicating the functionality.

Any suggestions on how I can achieve scrolling functionality for the tab headers?

Unfortunately, due to interactions with server-side code, I am unable to share my specific content at this time.

Answer №1

Check out this demo to see how it works:

http://jsbin.com/opufow/4/edit

Make sure to conceal the objects before scrolling through using animation.

Answer №2

Using iscroll.js allows for smooth scrolling in both horizontal and vertical directions, providing a seamless user experience.

To see a demonstration, click on the following link:

You can access Iscroll.js by downloading it from the official website:

Answer №3

If you want to achieve a scrolling effect, you can check out this link: http://jsbin.com/welcome/42790. It might be what you're looking for. Below is the source code sample:

HTML

<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <div class="scroll">
      <div id="parent" class="parent">
        <div class="block">1</div>
        <div class="block">2</div>
        <div class="block">3</div>
        <div class="block">4</div>
        <div class="block">5</div>
        <div class="block">6</div>
        <div class="block">7</div>
      </div>
    </div>
    <button id="leftButton">&lt;</button>
    <button id="rightButton">&gt;</button>
  </body>
</html>

CSS

.parent {
  width: 364px;
  height: 52px;
  background: #EDC9FF;
  margin-left: 0px;
}
.block {
  width: 50px;
  height: 50px;
  background: #C9E2FF;
  border: 1px solid #8FC3FF;
  float: left;
}
.scroll {
  overflow: hidden;
  width: 200px;
}

JavaScript

var timeout = 0;

window.onload = function () {
  var leftBtn = document.getElementById('leftButton'),
      rightBtn = document.getElementById('rightButton');

  leftBtn.addEventListener('mousedown', function () {
    multipleScroll(-2);
  }, false);

  leftBtn.addEventListener('mouseup', function () {
    clearTimeout(timeout);
  }, false);

  rightBtn.addEventListener('mousedown', function () {
    multipleScroll(2);
  }, false);

  rightBtn.addEventListener('mouseup', function () {
    clearTimeout(timeout);
  }, false);

};

function scroll(offset) {
  var parent = document.getElementById('parent'),
      current = parseInt(parent.style.marginLeft, 10) || 0;
  current += offset;
  parent.style.marginLeft = current + 'px';
}


function multipleScroll(offset) {
  timeout = setTimeout(function () {
    multipleScroll(offset);
    scroll(offset);
  }, 20);
}

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

A guide to querying JSON data in a backend database with JavaScript

My backend JSON DB is hosted on http://localhost:3000/user and contains the following data: db.json { "user": [ { "id": 1, "name": "Stephen", "profile": "[Unsplash URL Placehol ...

Any recommendations for building HTML in an iOS UIWebView?

When using a UIWeb view, how can I create HTML content? For example, I have some header html code. Then, I would like to include a JavaScript script and pass data to it. Once the JavaScript is injected, I want to add the remaining HTML content from a .html ...

Handling multiple promises with JavaScript/Express Promise.all()

For my latest project, I am developing a movie discussion forum where users can create profiles and list their favorite films. To display the details of these movies, I have integrated the OMDB API with a backend route built using Express. In my initial t ...

Mobile browser viewport dimensions

My Nexus 5 shows a width of 360 when I visit . I am aware that there is a difference between my phone's resolution and the browser width. Despite this understanding, I encounter a problem when attempting to create a function that triggers at a width ...

Clicking on a PHP generated table row will update the AJAX request variable with its corresponding ID

I seem to be missing something obvious, as I have tried everything I can think of and still need assistance. Let me explain my current issue. Upon loading my page, PHP generates a table with data from the server using a while loop. Each row in the table i ...

Adjusting the width of the final card in the deck grid

Currently, I am utilizing angular-deckgrid for image display purposes. Within a container, there are two columns in which images are displayed with the column-1-2 class according to the documentation. However, in certain scenarios where only one image is p ...

Retrieve data from a table with XPath expressions

Looking to gather details from this specific website link: Focusing on extracting the number of bedrooms from a table. <div class="panel panel-primary"> <div class="panel-heading">Property Details</div> <div class="panel- ...

Using Typescript to import an npm package that lacks a definition file

I am facing an issue with an npm package (@salesforce/canvas-js-sdk) as it doesn't come with a Typescript definition file. Since I am using React, I have been using the "import from" syntax to bring in dependencies. Visual Studio is not happy about th ...

ways to retrieve script template variable in angularjs application

I have written scripts to create a whiteboard using canvas inside the template page of AngularJS. Now I need to assign the values of the points[] variable to an AngularJS scope variable. <script> var points = []; </script> How can I access th ...

Changing the input value in Nuxt / Vue 2 after it has been overridden

I'm working on a feature where the user's typed keys are converted to the last single upper-cased character (for example, 'a' becomes 'A', 'abc' becomes 'C'). Here is my current code snippet: <template& ...

Alternate. (individually)

Issue with Running Program I've been struggling to get my program to run correctly. The task at hand is to have the program display only one question at a time. But no matter what I try, clicking on all questions displays all the answers simultaneous ...

HtmlUnitDriver fails to execute javascript while loading a page from a URL

My issue revolves around testing my website page, where elements displayed with javascript are missing when viewed through the HtmlUnitDriver. I am currently using selenium-java version 3.141.59 and htmlunit-driver version 2.33.3. Below is a snippet of my ...

Changing the alignment of divs to center instead of the right side

I am currently working on a project that involves creating a tiled interface with responsive tiles. One issue I have encountered is that all the tiles are shifting to the left side of the div and not getting centered, no matter what I try. To see the pro ...

Directly insert an image into your webpage by uploading it from the input field without the need to go through the server

Can an image be uploaded directly from <input type="file" /> into an HTML page, for example through the use of Javascript, without needing to first save the image to the server? I am aware that AJAX can accomplish this, but if there is a way to ...

How do I resolve the issue of Python doubling (" ") to ("" "")?

Here is an example of the code I am using without the website included. from bs4 import BeautifulSoup import requests import csv import random as rd source = requests.get('http://example.com').text file = open('C:/xampp/htdocs/new-site/text ...

The issue arises when attempting to reopen the jQuery UI dialog box after a div has been loaded

I am facing an issue with my survey results table where I have an EDIT button for each entry. Clicking on the EDIT button opens a dialog box with the survey results loaded from the database. After editing the answers, I want to save them in the database an ...

Symfony's DataTables is encountering an issue with the JSON response, showing

I have encountered an issue while trying to fetch data from a response within my template table (using DataTables). The error message I receive is as follows: DataTables warning: table id=example - Invalid JSON response. For more information about this ...

Is the ajax response not being sent back?

Hi! I'm currently working with the Django framework and facing an issue with the Ajax response. Below is the code snippet I have tried: def ForgotUsername(request): if request.method == "POST": email = request.POST['email'] ...

OutOfMemoryError caused by Bitmap

I'm experiencing an issue with this error. I created a favicon parser from URLs using the following code: public class FavIconParser { public static String extractUrl(String url) { StringBuffer sb = new StringBuffer(); Pattern p = Pattern.co ...

Responsive screen sizing in Vue.js

https://i.stack.imgur.com/8qwpn.png I added a margin-left to my component due to it being blocked by the side-bar and the "Roles" table. Is there a way to shift my table to the right when the screen width is less than 992? I need it to be responsive acro ...