I am building a website whose main component is a slideshow that is in the background of the whole site. Its image and description are on a timer so they change every couple of seconds.
The problem is that when the user leaves the site for a long enough time, the timer is still running, but the content is not present anymore, so when they navigate back to the page, it tries to catch up to the timer and it goes through the slideshow very quickly until it gets to the right state.
My current (very simple) solution for this is that I am cheching if the document is in focus before going to the next slide:
//- show next slide
function nextSlide() {
if (!document.hasFocus()) return
...
The problem with this solution is that if there are multiple windows on the screen and the page is not in focus, then the slideshow won't play, which isn't the intended bahaviour.
My question is: is there any JavaScript event that I can rely on to be called when the document is unloaded but the scripts are still running (if that even is what is happening here), so I can stop the timer and start it again when the user navigates to the site?
Edit: when I said "leaving the site", I meant leaving the tab or switching to another window so the site loses focus.
Link to the site: https://dev.jazzpuntbigband.com
So, I fixed my own issue. Turns out all I had to do was follow this guide from MDN Web Docs.
Related
Question: With Javascript, can you tell the web browser to begin loading a page, but don't begin rendering it yet?
Issue: A client wants his web page to show listings like a book. When you click on the next button, he doesn't want the next page to immediately load. He wants the book to close (a closing animation) and then load the next page.
Current status: All links go to Javascript. I show the closing animation. Then, I replace the window location. The issue is that there is a clear wait for the next page to load. It would be nice if I could load the following page into cache while the closing animation runs. In other words, I want to make that three-second animation useful time by loading all the HTML, CSS, Javascript, and images for the following page and then all that happens when I set the new location is that it renders.
Possible solution: I have the main page that had two full-screen iframes in it. One iframe is the current page. The other is hidden and is used to load the next page. After the animation, I flip which iframs is visible and which isn't. This is good except that the back button doesn't work properly. If you click back, you go to wherever you were before you went to the website. You don't hide the current iframe and show the one you just hid. If you click back twice, flipping iframes doesn't work. I have to keep a log of your history. Further, I have to hack the back button, which I don't like. So, I'd like to use a built-in cache method if I can.
Possible solution: I have the main page that had two full-screen iframes in it. One iframe is the current page. The other is hidden and
is used to load the next page. After the animation, I flip which iframes is visible and which isn't.
Yes, this sounds like a good approach.
This is good except that the back button doesn't work properly. [...]
I have to hack the back button, which I don't like.
Single Page Applications (SPAs) can't use the back button as originally intended because the entire application exists within a single document.
Partly in response to this, we have
history.pushState()
which is a really good extension to the History API, enabling new "artificial" entries (describing new states) to be added to the browser's history, which, in turn, enables the back button to work exactly as the user might expect it to.
Further Reading:
http://html5doctor.com/history-api/
https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
Is there an event raised, after going to an page via the browsers back button?
Reason: I have a mobile website which shows an loading animation after clicking on a certain link. If the visitor later goes back to this page with the back button, the animation still blocks the whole ui.
I don't know of an event like what you're looking for. 🤔
A few other options could solve your problem, though.
You could set a unique value in localstorage, and check for it on document ready. If it exists, then hide/turn off your loading animation.
Set it when you start the animation:
window.localStorage.setItem('loadingAnimationStarted', 'true');
Check for your item on document ready:
document.addEventListener('DOMContentLoaded', function(){
if(localStorage.getItem('loadingAnimationStarted') === 'true') {
stopAnimation();
}
}
You could also have the loading animation be turned off when the user navigates away from the page in the first place using the beforeunload event.
Or, you could also tie the loading animation to the completion of a custom event, or promise depending on what is happening behind the scenes.
You probably set the loading animation while the user is waiting for the page to load correct?
If the user clicks back, he will be redirected to the previous page, which is cached in the client's browser. That's probably why you don't see the loading animation at all, which is good.
If you have different condition that shows the loading animation, maybe consider to change it accordingly to your purpose.
I am using this script to make an autoscroll on my website. When the user opens the website, theres a logo and after an amount of time, the browser scrolls down.
$(document).ready(function () {
setTimeout(function(){
$('#logoclick').trigger('click');
}, 3100); });
the problem is, that everytime the user enters the website, this script runs, which is bad, because, if the user enters the page on an anchorpoint (e.g: mypage.com#contact) the first thing happens is, that the browser goes to top of the page and then scrolls down.
The question is, how could I just disable the script, e.g. when the user scrolls or clicks?
Thank you!
AD
You could put this code within an if statement which checks if an anchor is present. If so, don't execute the code.
See here for how to do that.
EDIT
If you also want to stop the animation when the user scrolls, even when no anchor is present, you can do so using a jQuery stop() function in javascripts onScroll event.
See this for the on scroll event.
See this for the rather self-explanatory stop method.
A customer's site we show in an iFrame is extremely slow (~7s).
We can only provide a JavaScript file the customer will include, but he won't do more than that.
Is it possible for me to hook to all events (forms submitted, links clicked) and display a nice loading animation until the page is fully loaded?
Or can I universally ajax-ify his site?
Once your page is unloaded and the other page starts loading, the code from the original page is no longer available or running so it can't be doing anything and the content from the original page has been cleared so it can't be showing anything.
In that same situation, the next page is in the process of being loaded and it's code is not yet running.
Thus, you cannot use normal page javascript to run something throughout the loading of a new page. To do something like this, you would either have to use frames with progress showing in one frame while content loading in another frame or perhaps use a browser plug-in.
You can know when a page is being unloaded with the beforeunload event, but as soon as the next page starts to load, any code assigned to this will no longer be running and the current document will have been cleared.
I am working on a pop out for videos on a website I am doing some development work for. The idea is to click on a thumbnail of the video and then the video pop's off the page. Like how facebook works with their image viewer. I currently have a div tag with it's CSS display attribute set to hidden and an iframe with no src. When a user clicks on the thumbnail for the video I have JavaScript load the appropriate youtube embed link into iframe by this method:
document.getElementById('iframe-id').src = "http://www.youtube.com/embed/(videoID)";
The video is set to automatically start playing. When a user exits the popped off content the src of the iframe is then set to "" by the same method. It works fine, and the video is no longer in the iframe. The issue is with the back button.
Here is my process leading to my problem:
I click on the thumbnail and the
video pops off and starts playing.
I close the popped off content.
I press the back button.
The video I popped off previously is playing in the background. (The Problem)
Here is what I know of the process that is happening:
The page that is being viewed has two
instances created back to back in the
history of a browser. (ie I press the
back button and I am on the same page
still.. this is also when the video
starts playing in particular
browsers)
When I leave the popped off content
open and press the back button I see
just an empty iframe.
I believe my issue lies in the fact that I am changing the src to the iframe. The process of that seems to be causing the browser to load the page again and create a second instance of the same page in the history (where reloading a page does not). When the back button is pressed the page goes to the previous instance, but depending on the browser the hidden iframe is not always empty and the video is playing.
My question(s):
Can this issue be resolved with
JavaScript?
If it can't what could accomplish the task I am trying with out the issue creating two seperate instances of the same page? I was thinking AJAX might be the solution, but I don't know. I am still a little new to this all.
This can be resolved within javascript.
Additionally, AJAX has nothing to do with the problem you're having. AJAX is a mechanism for moving data around, not manipulating HTML documents.
If you just need to display a video, you don't need to use an iframe to do so. I'd suggest keeping a hidden div somewhere on the page and use that as a container for your video pop-up. When you need to display a video, insert whatever HTML you need to get it working into the div and display it when it's ready.