Is there a way to control the scrolling on a website so that users transition through slides sequentially?
Take a look at this example:
No matter how much you scroll, the website transitions to the next or previous slide one at a time (unless a specific slide is selected). I'm hoping to achieve this effect with jQuery by intercepting user scrolling.
Apologies for the vague title - it's hard to articulate what I'm trying to ask.
Experience a demonstration of how the user's scroll state can be effectively scripted. By opening your browser console and observing the logs as you scroll up and down, you can witness the mechanics in action. Additionally, an event pause for animation between slides has been included to enhance the experience.
While my method relies on the presence of a scrollable element, an alternative event handler for the innovative jQuery Mouse Wheel Plugin is also discussed. This plugin eliminates the need for scrolling by listening to mousewheel events, though it was not successfully implemented for the demo, sticking instead to the original approach.
Feel free to explore the demo at: http://jsfiddle.net/YF4HY/
$(function () {
var scroll = 0, //tracking scroll count
scroll_max = 15, //maximum scrolls per slide
prev_scroll = 0, //previous scrollTop for direction
slide = 0, //current slide tracker
slide_max = 5, //total slides
animated = false; //animation flag
function scrollUp () {
if(scroll === 0 && slide < 1){
console.log('beginning of slides');
} else if (scroll > 0) {
scroll--;
} else if (scroll === 0 && slide > 0) {
simulateAnimation(slideBackward);
}
}
function scrollDown () {
if(scroll === scroll_max && slide === slide_max){
console.log('top of slides');
} else if (scroll < scroll_max) {
scroll++;
} else if (scroll === scroll_max && slide < slide_max) {
simulateAnimation(slideForward);
}
}
function slideForward () {
scroll = 0;
slide++;
animated = false;
}
function slideBackward () {
scroll = scroll_max;
slide--;
animated = false;
}
function determineScrollDirection (current_scroll) {
var prev = prev_scroll;
prev_scroll = current_scroll;
return (current_scroll > prev) ? 'down' : 'up';
}
function simulateAnimation (handler) {
animated = true;
setTimeout(handler, 2000);
}
$(window).on('scroll', function (e) {
if(!animated){
switch (determineScrollDirection($(this).scrollTop())) {
case 'down':
scrollDown();
break;
case 'up':
scrollUp();
break;
}
console.log({slide:slide, scroll:scroll});
} else {
console.log('Don\'t do anything because we are changing slides.');
}
});
$(document).on('mousewheel', function(event, delta, deltaX, deltaY) {
//console.log(delta, deltaX, deltaY);
});
});
Hey there! Below is the code snippet where I am using an ajax call in jQuery to invoke function 1 named "setEmailAFriendCount". In this function, we are passing a variable with JSON data type. However, I now need to call the same function from an ajax call ...
Are there methods available in JavaScript or any JavaScript framework to determine the position within a textbox? For example, being able to identify that figure 1 is at position 2 and figure 3 is at position 3. Figure 1 Figure 2 ...
The challenge I am facing involves having an image and text on it in two separate divs with a background color. The length of the text in one div is long while the text in the second div is short, but I want to ensure that the width of both divs are equal. ...
I am currently developing a web application using Angular, and I've encountered an issue while trying to display cards in a vertical layout rather than horizontally. My goal is to have the cards fill up the first column (5-6 cards) before moving on to ...
My goal is to make three squares randomly disappear when clicked on the page. However, I am facing an issue where some of them, usually the 2nd or 3rd one, reappear elsewhere on the page after being clicked. I have created a jsfiddle to demonstrate this: ...
I am in the process of developing a modal that needs to be centered on my page and expand organically, but only up to a specific width and height limit. Using flexbox, I have successfully centered this modal (.modal) on the page. Within the modal, there ...
In my Angular application, I have multiple rows of elements that are wrapped with the myelement directive (which is a wrapper for the input tag). To highlight or focus on one of these elements at a time, I apply the .selected class in the styles. Everythi ...
Can you explain the distinction between the DOM loaded by AJAX and the existing DOM of a webpage? Is it possible to load all parts of an HTML page via AJAX without any discrepancies compared to the existing content, including meta tags, scripts, styles, e ...
As a newcomer to MVC, I have successfully developed a JQuery script for uploading files. Now, I need help with displaying the uploaded image on my view page. The uploaded image is saved in the "Uploaded" folder. How can I achieve this? Thank you in advance ...
My webpage is encoded in HTML with the charset ISO-8859-2. All content on the page adheres to this charset and appears correctly. However, I am facing an issue when making an Ajax call to a PHP server. When I send the character á and receive the same valu ...
For my project, I am working on creating a dynamic speech bubble that can be dragged around the corner of the bubble with the mouse. The goal is for the tip of the speech bubble to rotate automatically based on its position. Below is a snippet of my code: ...
Whenever my display size is less than 1170px, the width of the owl carousel div overflows. How can I fix this issue? jQuery(document).ready(function($) { "use strict"; // CUSTOMERS TESTIMONIALS CAROUSEL $('#customers-testimonials&a ...
Ever since upgrading my app to cordova 5.1.1, I've noticed that the meta viewport no longer functions properly on Android devices. The app is not displaying correctly as a result. Despite trying various solutions, I am still facing this issue. Is ther ...
I'm currently working on troubleshooting my jQuery AJAX call that is triggered by a click on a <a href="#">. This click initiates a DELETE request for a specific URL that I've set up a route for, and then it should redirect to a new page. T ...
I've been working on this issue for hours and I just need a little nudge in the right direction. My jquery AJAX post is successfully sending the data in the post request, but it always turns up null on the controller side. I've tried adding [From ...
Looking to dynamically generate a JSON Object with the specified structure: { "deleteId":[1,2,3], "pointId":[1,2,3], "update":[ { "what":"mission", "id":1, "value":"adsda" }, { ...
I'm currently in the process of creating a quiz based on a tutorial I found at https://www.sitepoint.com/simple-javascript-quiz/. While I followed the tutorial closely and integrated Bootstrap, I am encountering an issue specifically with mobile devic ...
I'm currently facing a small issue that I believe has a simple solution. My knowledge of Javascript is limited, but I am eager to improve my skills in coding for more visually appealing websites. My problem lies in the code snippet below, where I am ...
What causes the space between two <hr> tags to remain? Despite setting the width of the <hr> tags to 49%, there is still a gap between them. How can this space be removed from the <hr> tags? Shown below is the HTML and CSS code: *{mar ...
I have developed a sleek application featuring a login form, dashboard, registration page, and account page. Each of these pages has its own unique route. To maintain consistency across all pages, I have included a shared header and footer by inserting < ...