I am having issues with getting my script to work. I am using this bit of code from Codyhouse to add a navigation to my page. The basics of it are, clicking the hamburger opens it, then when you click on a link, it should scroll the page to that location, while closing the menu.
This all works fine, but because the animation is using transform: translateY(170px);, the link is finding it's position, but when it gets to it, the page has been moved 170px, resulting in being 170px below where it needs to be on screen.
My idea for the fix was to delay the clicking on the link until the animation was finished, which lasts .5 seconds, and then go to the point on the page.
This is my script,
$('.nav-click').click(function (e) {
e.preventDefault();
var goTo = this.getAttribute("href");
setTimeout(function(){
window.location = goTo;
},2000);
});
The result of my script is that, when you click on the link, it still scrolls to the position on the page, and then, after the 2 seconds I have set currently, it jumps to the proper place on the page.
It should be waiting 2 seconds, and then following it's href.
Try doing something like this:
$('.nav-click').click(function(e) {
e.preventDefault();
var goTo = this.getAttribute('href');
var interval = setInterval(function() {
if (!$('main').hasClass('nav-is-visible')) {
clearInterval(interval);
window.location = goTo;
}
}, 100);
});
I found no solution to this problem, but opted to remove the transform from the page all together as the links going to the right place is more important to me then having that effect.
Related
When a user click an href link with id="boo" I am trying to get the browser to automatically go 'back' after 2 seconds.
This isn't working and i'm reaching out for some help from you all. Thanks in advance!
document.getElementById("boo").addEventListener("click",
function a(event) {
setTimeout(function() {window.location = History.back},2000)}
);
Edit: (Adding this to clarify my goal)
so basically i want to do two things on click. navigate to a different page (time.is) and then automatically go back to the original page after 4 seconds.
I think you have to make the default function of <a> tag stop working. Please try adding .preventDefault().
document.getElementById("boo").addEventListener("click",
function (event) {
event.preventDefault();
setTimeout(function() {window.history.back()}, 2000);
}
);
If you want to do two things on one click, I suggest this:
Open the other website in a new tab
Go back to a previous page after 2 seconds in an initial tab
JavaScript:
document.getElementById("boo").addEventListener("click",
function (event) {
// Remove .preventDefault()
setTimeout(function() {window.history.back()}, 2000);
}
);
HTML:
<a id="boo" class="clock" href="https://time.is/" target="_blank"></a>
A part from a syntax error (history should be lower case), you are setting window.location with the back function, without executing it.
This should fix your code:
document.getElementById("boo").addEventListener("click",
function(event) {
setTimeout(function() {window.history.back()}, 2000);
});
I found this article helpful for what I was needing to do, which was have a slideshow of sorts with a tab and tab_container using JavaScript. The code works great:
Automatic tab switch in javascript or jquery
However, what I want it to do is if you let the page run, it keeps rotating between the tabs. But if a tab is manually clicked on (example, they want to read the content on that tab) it stops the auto-rotation of the tabs for the duration of while they are on that webpage. If the page is refreshed, or they go back to the page, it starts the tab rotation again.
I'm not sure the Javascript code that I can add to the above example to make the auto-rotation stop.
Thanks in advance for the help!
You can use clearInterval to stop the setInterval function from running. setInterval returns an ID and you can pass that ID to clearInterval to stop it, e.g.
var intervalID = setInterval(function() {
....
clearInterval(intervalID);
So just make the code
var intervalID = setInterval(function() {
....
tabs.on('click', 'a', function(e) {
clearInterval(intervalID);
$(this).trigger('slides.swap');
e.preventDefault();
});
I'd also change the setInterval function from triggering a click to just straight-up triggering slides.swap, so that you know the difference between a triggered click and a user's click:
$('a:eq('+idx+')').trigger('slides.swap');
Here's the updated Fiddle from that question.
please I need some help with the flow of my jquery code. I have gotten the slideshow to work and decided to go a step further and add nav buttons/images.
in the code below, I am testing it out with one div first, the div will later become a picture or a button. anyways i have it so that when i click the div, the slideshow goes to the first image in the slide show.
Now the KEY ISSUE I am having is that with the code below it works but it takes 5 seconds after the click to show the first image, i'm guessing because of the timeout function.
Please note the this is just a snippet of the code contained in the function slideShow.
$("#slidecontrol2").click(function(){
next.removeClass('is-showing');
$('#container').children(':first').children(':first').addClass('is-showing');
});
setTimeout(slideShow, 5000);
I tried calling the function again after the click() function and before the timeout function.
$("#slidecontrol2").click(function(){
next.removeClass('is-showing');
$('#container').children(':first').children(':first').addClass('is-showing');
**slideShow ();**
});
setTimeout(slideShow, 5000);
it works but now my images are going crazy fast, and dare i click again, it speeds up and gets crazier.
Please help
ANYONE!!
I noticed that slideShow takes no parameters, so it must handle finding the "visible" slide and the next slide on its own. It also seems to me that you would like the slideshow to happen automatically (which I gathered from you setTimeout(slideShow, 5000); line) AND you would like to progress to the next slide on click of the slidecontrol2 element. Since slideShow takes care of this progressive action, here's what your code should look like (pseudo-code below):
var slideShow = function(){
//Fades out current image,
//finds next image with class "is-showing" and fades it in
}
$(document).ready(function(){
//Adds click handler to advance slideshow on click of button
$("#slidecontrol2").click(function(){
slideShow();
});
//Begins slideshow on load of page
setTimeout(slideShow, 5000);
});
I have a button on the site I am working on that uses a sprite sheet animation and so needs to be set as a background image. I require a regular click on the button to delay the redirect to another page by a fraction of a second for the animation to play, however I still wish for middle mouse clicks to function to open in new tab, without a delay.
Currently I have this working in Javascript but it seems a pretty bad idea for everything to be handled that way and not to just have a href.
So I have made this:
<script type="text/javascript">
function delayed(){
window.stop();
setTimeout('window.location = "http://www.dog.com";', 800);}
</script>
I am a link
The idea being that a regular click triggers the function and incurs a delay whereas a middle mouse click will just go straight to the href link.
This works in Firefox. However in Chrome and Safari the middle click triggers the function and as a result opens the dog link in the same window (on the finished version the links will be the same of course).
Basically all I need is a href that delays on click but still functions normally on middle click. My working solution uses Javascript to open in new tab on middle click but it strikes me that this may override browser settings and is probably a bad idea.
EDIT:
In the meantime I had found this solution using Jquery:
$(document).ready(function() {
$(".delayed").click(function() {
var href = $(this).attr('href');
setTimeout(function() {window.location = href}, 800);
return false;
});
});
...and the HTML:
<a href="http://www.google.com/" class='delayed'></a>
This worked but encountered the same problem with Chrome treating a middle click as a left click and hence opening it in the same window.
I have now modified it to include the content from sransara so that... I think... everything is resolved. Again using Jquery:
$(document).ready(function() {
$(".delayed").click(function(event) {
var href = $(this).attr('href');
if(event.button == 0){
event.preventDefault ? event.preventDefault():event.returnValue = false;
setTimeout(function() {window.location = href}, 800);
}
});
});
Seems to work in all browsers. Hopefully these can be of use to anyone stumbling upon this page in the future.
This is just a quick solution, but I think it mostly fits into your need.
The code of HTML anchor tag:
I am a link
Here is the Javascript:
function delayed(event){
window.stop();
if(event.button == 0){
event.preventDefault ? event.preventDefault():event.returnValue = false;
setTimeout(function(){ window.location = "http://www.yahoo.com"; }, 800);
}
}
There are few simple changes:
I have removed the return false from onclick event, but the new code line event.preventDefault ? event.preventDefault():event.returnValue = false;, prevents default action when left clicked.
And added a button code check to Javascript.
Working demo code is here.
This is a quick solution, some area for improvement is to:
Take out the inline onclick event and add an event listener dynamically with JS.
Looking at other questions here they seem to report setInterval is disabled or slowed down when a tab is hidden. I am seeing a different problem - calls to setInterval appear to "stack" and then all get applied when the tab is shown.
In my case I have a slider which animates an image on the site homepage every few seconds. If I go to another tab for a minute or two then return, the slider goes crazy... all the animations fire one after another until it is caught up.
I tried adding code to stop the animation happening if another is already in progress, but it doesn't work... maybe the timer events get queued in some way that circumvents my test.
setInterval(function(){
if (!rotationQueued) {
rotationQueued = true;
rotate_slide('next');
}
}
So, I want the JS to pause when the tab is hidden - or to act as normal - anything but this!!
You could try something like this:
function runRotate() {
return window.setInterval(function(){
if (!rotationQueued) {
rotationQueued = true;
rotate_slide('next');
}
});
}
var run = runRotate();
window.addEventListener('focus', function() {
run = runRotate();
},false);
window.addEventListener('blur', function() {
window.clearInterval(run);
},false);
You would basically look to see if the browser window is focused or not and then run or disable the setInterval function depending on the event returned.