Draggable header items with a sliding menu

The Guardian (a newspaper from the UK) offers an android app that features a swipe navigation menu, which I would love to incorporate into my HTML5 application.

If you select an article on their app, it displays a header in this format and appearance:

(Is there someone who knows how to reduce the size of these elements?)


As you swipe left or right, the html slide changes, with the header item sliding along as well, displacing the previous item in the list.

I'm curious if there are any existing JavaScript plugins available to achieve this effect?

Thank you!

Answer №1

If you're in need of a JavaScript library, check out Hammer.js which may fit your requirements.

With this library, you can easily create event handlers like the example below.

Hammer(el).on("swipeleft", function() {
    alert('you swiped left!');
}); 

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

How come the chosen item is not showing up in the bootstrap dropdown on WordPress?

I'm having trouble displaying the selected item in a bootstrap dropdown menu on WordPress. You can check out my site at . Ideally, it should function similar to this example: http://www.bootply.com/62811 https://i.sstatic.net/5d5FH.png Here is my men ...

Getting error specifics from Ajax POST in Rails 4

Is there a way to retrieve detailed error information from a POST request? For instance, when implementing validation like validates :name, presence: true, how can I alert the user if they leave a field blank? .js file: $.ajax({ url: "/warehouses/ ...

Modifying a single field in the HTML table will only affect a particular element within that same table, without any impact on elements in other tables

It is common practice for every element to have a unique id. However, I am facing a scenario where I have two tables - table1 and table2. Both tables are interconnected with functions that affect their cells based on user input. I want the cells in table2 ...

What is the best way to set all "read" values to true for the child messages within the Firebase database?

https://i.sstatic.net/oukpl.png How can I set the read property of all children of a message to true in JavaScript with a single command? I attempted using let ref = yield firebase.database().ref(groups/${groupId}/messages).update({read:true}) but it did ...

Set the minimum width of CSS headers <h1, h2, h3> to align next to a floated image

I am dealing with a layout issue where headlines should be displayed next to floated images if there is enough space, and drop below the images if not. Unfortunately, I do not have access to the HTML code, so I need to solve this problem purely through CSS ...

Share the Nav tag value or name during an OnClick event within ReactJS

I've been facing a minor issue that I just can't seem to figure out - how do I pass a value to my OnClick event? It's crucial for me to pass this value as it corresponds to the options in my menu and is essential for some processes: This is ...

Accessing Data from the Wikipedia API

After receiving a JSON response with the following structure: { "batchcomplete": "", "query": { "pages": { "97646": { "pageid": 97646, "ns": 0, "title": "Die Hard", "extract": "Die Hard is a 1988 ...

What is the procedure for modifying the height of a button in HTML?

I wanted to add a flashing "Contact Us" button to the menu bar of my website to immediately attract people's attention when they visit. Here is the javascript code I used: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&g ...

IntelliSense in VSCode is unable to recognize the `exports` property within the package.json file

Currently, I am utilizing a library named sinuous, which contains a submodule known as "sinuous/map". Interestingly, VSCode seems to lack knowledge about the type of 'map' when using import { map } from "sinuous/map", but it recognizes the type ...

Is it possible to toggle between hide and show functions using Jquery?

I have a question about two jquery functions that I've been struggling with. $(document).ready(init); function init() { $(".alphaleft").hover(function (g) { $(".boxy,.yee").show(); }, function (g) { $(".boxy,.yee").hide(); }); } ...

Tips for updating and transferring a variable within a callback function

I have implemented a function using the SoundCloud API that retrieves a song URL, obtains the associated sound ID from the API, and then passes that ID to a callback for streaming purposes and updating the page. The data is successfully retrieved from the ...

Interacting between my React Native client and server.js

Currently, I am developing a project that utilizes react native, express, and MongoDB. My challenge lies in establishing communication between the react-native-js file and the node-js file. Specifically, when the submit button is clicked, I aim to pass a ...

Nest JS Guards - Employ either of two approaches

I have implemented two different JWT based strategies in my application: The first strategy involves single sign-on for organization members, where an external provider generates a JWT. The second strategy is for email/password authenticated external user ...

Can someone help me figure out how to increase the values of two specific attributes within a class?

Currently facing a challenge with adjusting the number of likes and comments using increment for properties 'numberOfLikes' and 'comments'. Unsure whether to utilize a for loop or just the increment operator. Still new to coding, so apo ...

Creating Dynamic Web Pages with Div Visibility using Javascript

This is my attempt at a simple layout using divs and JavaScript functions to hide and show elements based on button clicks. Function MA should show ADIV and hide BDIV when the "MA" button is clicked. Function MB should show BDIV and hide ADIV when the "M ...

Topaz font does not properly display backslashes and certain characters when rendered on Canvas

Who would have thought I'd stumble upon a new challenge on Stack Overflow? But here we are. If there's already a solution out there, please guide me in the right direction. I'm currently developing an interactive desktop environment inspired ...

Design your website with CSS by incorporating hanging ::before labels that feature unique formatting

I am looking to create labels that designate specific groups of words. Here are the criteria: The label should appear to the left of the word group The words should be enclosed in lines, while the label should not The words should be indented, while the ...

Error: The parent selector "&" cannot be used in top-level selectors. $::webkit-input-placeholder

I am facing an issue while trying to run a legacy create-react-app that utilizes Sass. Initially, when I ran npm start, I encountered the error 'Cannot find module sass', which resembled the message found in this stack overflow post. To resolve t ...

Change the color of specific elements in an SVG using React

Can I change the dynamic primary color from ReactJS to a specific class in an SVG file? If yes, how can it be done? Error.svg <!-- Generator: Adobe Illustrator 26.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1&qu ...

The issue of NETWORK ERROR cannot be fixed through the use of axios

I'm attempting to communicate with a backend server that is currently offline using axios const backendClient = axios.create({ baseURL : env }); The API call is made here: export const createExpensesRecord = async (createExpenseRecordCmd) => { ...