On my website, I have a page with an autoplaying video located at . My goal is to implement a feature where once the video completes playing after a specific duration, the webpage will automatically scroll down to the text section. This scroll action should only occur if the user has not manually scrolled up or down on the page. Is there a way to achieve this using jQuery's scrollto function with a timed delay?
Take a look at the example I created just for you here.
FURTHER DETAILS
If your video player has a video finished event, you can use the scrollTo function with it. Learn more about this event from these resources:
Also, check out this highly useful resource and the HTML5 video spec.
About vid.ly : It appears they utilize an HTML5 with Flash fallback player. Check out the "how can I use vid.ly" section here.
JS code :
// Define a scrollTo function for jQuery
$.fn.scrollTo = function(duration){
if(duration == null){ duration = 1000; }
var offset = $(this).offset().top - $(window).height()/2 + $(this).height();
$('html,body').animate({ scrollTop: offset}, duration);
}
// Execute on document load
$("document").ready(function() {
//for HTML5 (for flash please see the ADOBE link above.)
$("video").bind("ended", function() {
// Log message to console for debugging
console.log("autoplay ended! About to scroll to...");
// Scroll to element with id="scroll_to_here"
$('#scroll_to_here').scrollTo();
});
});
let hasScrolled = false;
$(window).scroll(function(){
hasScrolled = true;
});
let scrollTimer = setTimeout(function(){
if(hasScrolled !== true)
{
// initiate scroll animation
}
},10000);
Here is a straightforward script to achieve that goal. It assumes that scrolling, keydown, or mouse click events will indicate user interaction with the page and prevent auto-scrolling.
(function() {
var scrollPage = function() {
$.scrollTo(xyz);
};
var timer = setTimeout(scrollPage, 35000);
$(document.body).bind('scroll mousedown keydown', function() {
clearTimeout(timer);
});
})();
Please let me know if this solution works for you.
Looking for a script that can run a function depending on the width of a div. I want the ability to trigger the function when the div is resized. For example, if the div's width is 300px, execute function 1; if it's 700px, execute another functi ...
I'm currently transitioning from Java to TypeScript and I've encountered an issue with working with objects in hashmaps and hashsets. In Java, I would simply override the hashCode method to easily manipulate these data structures. Is there a simi ...
Is there a way to hide the content within this div if the prop-value is empty? I specifically want to hide the text "First class" when Prop-value does not have any value. Any solutions? <div> <span class='prop-name'>F ...
I'm attempting to implement a straightforward page redirection in PhoneGap using JavaScript. Within an iframe, I have the following code: window.parent.location("event_select.html"); Unfortunately, this approach is unsuccessful and results in the fo ...
My website has a lot of tabs designed with Bootstrap. I wanted to make them responsive, so I tried using a plugin called Bootstrap Tabcollapse from https://github.com/flatlogic/bootstrap-tabcollapse (you can see a demo here: http://tabcollapse.okendoken.co ...
Struggling with customizing antd in my react app. I'm hesitant to mess with the webpack config.js file since I'm not well-versed in webpack. My goal is to avoid having a site that looks like a generic antd clone, but all my attempts at customizat ...
Check out this fiddle: https://jsfiddle.net/evbvrkan/ This project is quite comprehensive, so making major changes isn't possible. However, the requirement now is to find a way to place the close button for the second pop-up (which appears when you c ...
One of our websites is encountering a puzzling JS error in Internet Explorer. The console displays the following message: ':' expected javascript:false, Line 1 Character 24 When attempting to trace the source of the error, a notification appear ...
Looking for solutions to address the [email protected] and minimist vulnerability. I attempted removing node/modules and package-lock.json, followed by a fresh npm installation, but the issue persists. Any suggestions would be greatly appreciated. Scr ...
I'm still new to this platform, so please correct me if I make any mistakes. My goal is to create a "task table" that allows users to edit existing tasks and add new ones. Thanks to the base template provided by Ash Blue, I've managed to program ...
Having a multitude of JavaScript files loaded on a single page can result in decreased performance. My inquiry is this: Is it preferable to have individual files or combine them into one JavaScript file? If consolidating all scripts into one file is the ...
I need assistance with adding an "if condition" to my text field. The condition should prevent the empty bubble from appearing when the send button is clicked. function verifyInput(){ var currentText = document.getElementById("demo").innerHTML; var x ...
Encountering issues in Safari desktop / mobile and Internet Explorer. The error message states: In Safari: TypeError: Attempted to assign to readonly property. IE Edge: Assignment to read-only properties is not allowed in strict mode The problem arises ...
Currently, I am developing a serverless web application using JS + jQuery, CSS, and HTML stored in a flat file. My goal is to retrieve JSON data by making a GET request. Most methods I have come across involve AJAX techniques that necessitate the presence ...
I successfully coded a simple project, but I'm struggling to figure out how to add a custom button to the bootstrap-datepicker. <!DOCTYPE html> <html> <head> <title>JS</title> <link rel="stylesheet" href="http ...
Within this piece of code, my intention is to retrieve the alert value and apply it to an element. Description: The AJAX code I have written checks for values in a database, fetches new values from the database, and then displays these fetched values in a ...
I've been struggling with this problem for quite some time now and I could really use some guidance from experts here on SO. Essentially, what I am trying to achieve is to locate a specific document using a provided _id, and then execute a conditional ...
I am currently working on an Angular application. Within the index.html file, there is a header that contains links to external websites. <a href="#" onclick="getExternalUrl('about.html');">Click here </a> <scr ...
Struggling to deploy firebase functions and encountering multiple issues. During the deployment process, facing a babel error: Error: Cannot find module '@babel/runtime/helpers/builtin/interopRequireDefault' at Function.Module._resolveFilen ...
I'm having trouble figuring out how to properly set the height for a jQuery UI dialog. My goal is to have the height adjust based on the amount of content present, but if it exceeds 400 pixels, then I want a scroll bar to appear. For instance, if th ...