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.
Related
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.
I am trying to create an effect in an HTML page whereby a link with href='#section1' when clicked, changes the URL in the address bar of the browser AND scrolls to the element #section1 smoothly.
The problem is that, as far as I have been able to test, I could accomplish only one thing. Either I could scroll to #section1 smoothly using the scrollIntoView() method or I could change the address bar of the browser (which happens automatically when a link with href='#section1' is clicked.
Is there any way to accomplish both of these things?
Another thing I have tested is explained as follows:
I prevented the default action of clicking the anchor having href='#section1' using e.preventDefault() method of the click event and then called scrollIntoView() on the element. Then I manually changed the URL on the address bar using location.hash, but doing this last thing nonetheless caused the snappy scroll jump (before the browser could smoothly scroll the element into view) which I don't want.
Is there any solution to this? Or that I have to go with only one thing out of the two?
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.
Having ads loaded via iframe, it is possible to detect a click with the left mouse button? A normal click?
I thought of another question, I saw a code that worked for me but it is not secure, since it monitors the activeElement, and has a flaw in it, if the user clicks with the right mouse button, the function triggers TRUE and triggers the alert.
capture click on div surrounding an iframe
If the advertisement is located on a different domain it is impossible because of security.
What you could attempt to do however, is to have a transparent element over the advertisement and detect the click there.
Then you would hide the element, and wait for the user to click a second time shrugging off the first click. If the user is actually interested in clicking the banner they will click a second time (when your transparent invisible element is gone).
Update
Have a look at this: HTML "overlay" which allows clicks to fall through to elements behind it
Apparently you can allow click through with pointer-events css.
Here is the flow I am trying to figure out.
User hits my page.
User clicks a link and onbeforeunload and unload get fired. Here i am getting rid of href in some of my links.
The page now hangs for a little bit giving the user a chance to hit the stop button in the browser.
Since the page is still on the original page (not the new page that was requested and then stopped) the hrefs are still blank.
Is there any way of knowing if the user clicks a stop button and they are still on the same page?
The only way I can think off the top of my head is to put a setTimeout in the onbeforeunload or unload but I don't really like that because there are too many variables for it still being messed up.
What I ended up doing was this:
window.unload = function(){
var _href = $('selector').attr('href');
$('selector').attr('href', '');
setTimeout(function(){
$('selector').attr('href', _href);
}, 1500);
}