Develop Reference

jQuery working only upon reload

On this WordPress site, I use a site-wide script to add information to outgoing links.
However, it only works if the page is reloaded or the user navigates to any second page.
Assuming it was a jQuery loading time issue, I added a timer to wait for it, but it doesn't make any difference: the message "jQuery loaded!" appears but the click function seems not to be working.
When the page is reloaded, the click function works as expected.
Here is the code:
var jQloaded = setInterval(function() {
if (window.jQuery) {
console.log("jQuery Loaded!");
clearInterval(jQloaded);
jQuery(document).on('click', 'a[href*="/external/"]', (function(e) {
e.preventDefault();
alert('ok');
}));
}
}, 50);
I tried everything I could think of without success. Can you tell me what's wrong?
PS: to replicate the behavior it's necessary to open a fresh incognito/private window. Emptying the cache + hard reload isn't enough.

Try wrapping your code within the document.ready method
$(document).ready(function() {
// code here
});

Periodically reload a page in Rails 4 using Turbolinks

I have a page that displays some status information. This page runs on a PC without any user input and needs to refresh each few minutes.
I can get it to refresh with the meta tag but this seems crude. It forces the refresh of all the assets and causes that ugly flicker. Turbolinks does a nice job everywhere else with smarter page loading. Can I get this to work with an automatic refresh?
I'd appreciate any advice on how I can make this work better.

Here is what I recently used under Turbolinks 5. Had to add some variables to stop it from reloading once the user browsed away from the page, etc.
<script>
if(!window.reloadTimer) {
var SECONDS = 30;
window.reloadTimer=setTimeout(function(){
console.log("Reload!");
window.reloadTimer=undefined;
Turbolinks.visit(location.toString(),{action: "replace"});
}, SECONDS * 1000);
document.addEventListener("turbolinks:visit",function() {clearTimeout(window.reloadTimer);window.reloadTimer=undefined;});
}
</script>

Try this:
$(document).on('ready page:load', function() {
var SECONDS = 5;
setTimeout(function(){
Turbolinks.enableTransitionCache(true);
Turbolinks.visit(location.toString());
Turbolinks.enableTransitionCache(false);
}, SECONDS * 5);
});

Trying to remove this code without the need to put it in a seperate page

My index.html page has a fancy animation to begin with it is essentially this code below...
$(document).ready(function() {
setTimeout(function() {
$("#loader-wrapper .loader-section, #textbit, #logo, #wrapper").hide("slow");
$("#wrapper").unwrap();
}, 11000);
});
..... so once this code has run its 11 seconds it all gets unwrapped and thats great... Problem is I have an a tag to get back to the index page at any time and I don't want people to have to wait for the intro animation to run before getting to the homepage every time....
I will not accept any answer that says .."do the animation on a seperate page" - the code has to be on the index page itself.
I was hoping there was some sort of jquery that will remove the code until the browser page has been refreshed, something like that.. Really appreciate any help here.
EDIT -- Getting some initial feedback that this is unclear ... in step for ...
User goes to index.html
the above code begins and lasts for 11 seconds.
then it gets unwrapped and disappears.
Seperatly while the user is enjoying the site they click on the "home" logo.
this takes people back to the index.html page
Unfortunately they have an 11 seconds wait every time and i want this to stop unless they refresh the browser or something.

You could use something like localStorage or cookies on your server side to manage this.
Here's the local storage example:
$(document).ready(function() {
if( !window.localStorage || !window.localStorage.getItem('hpAnim') ) {
setTimeout(function() {
$("#loader-wrapper .loader-section, #textbit, #logo, #wrapper").hide("slow");
$("#wrapper").unwrap();
}, 11000);
if( window.localStorage ) {
window.localStorage.setItem('hpAnim', true)
}
}
} );
So now (in IE8+) the second and future pageloads will not run the animation.
On the other hand if you've got a single page JavaScript app and you want it to re-run only after page refresh (as per comments on question), then you can skip local storage and simply set a global variable on window:
window.hasSeenAnimation = true
And then check that condition before running the animation again. After a page refresh that variable will be gone.

Set a cookie the 1st time that the users waits 11 secs
Can use https://github.com/carhartl/jquery-cookie or with native javascript code.
As well you can use a localstore var or url query
$(document).ready(function() {
if ($.cookie("index_viewed") == 1) {
return;
} else {
setTimeout(function() {
$("#loader-wrapper .loader-section, #textbit, #logo, #wrapper").hide("slow");
$("#wrapper").unwrap();
$.cookie("index_viewed", 1);
}, 11000);
}
});

You can set a $_GET variable and then check for this. If it's there, it must be an internal link so don't load the animation:
Home
<?php
if (!isset($_GET['noAnim']))
{
?>
<script>
// your animation script goes here....
</script>
<?php
}
?>

Assuming that you only want that animation to run at "startup" (when directly pointed) you could check the tab history count:
history.length
This will return a value higher than 1 only if any navigation took place on the tab (going to index from any other page).
This is not a perfect solution though:
Cross browser issues (some return 0, others 1)
Every navigation on this tab will produce history, hence, if you navigate to your website after checking any other page, history will return a value higher than the initial. (you can also check the document.referrer to ease this issue)
If you can't afford to skip the animation on those conditions you must persist the fact that the animation had already ran, and you should aim for Local Storage, for example (as mentioned earlier) http://www.w3schools.com/html/html5_webstorage.asp

Stop auto tab switching in javascript on click

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.

Reload a url in each seconds with jquery

I want reload a url in each seconds with jquery, i try as following code, this code reloading url only once. How do i do?
setInterval(window.location = $('#thisLink').attr('href'), 1000);
DEMO: http://jsfiddle.net/QBMLm/

If it's your page, you can use this in the head :
<meta http-equiv="refresh" content="1;url=/">
of course, this only works for the page it's embedded in, and won't keep reloading some other external site?

setInterval is not persistent between browser reloads. Also, it takes a function as first argument. You can try something like:
setTimeout(function() {
window.location = $('#thisLink').attr('href');
}, 1000);
It will wait 1sec before redirecting. If the page you are redirecting to have the same code, it will do the same.

Once you re-load the url (window.location change) the context (and scope) of that setInterval become moot (the page is discarded and the next is loaded). The script's then reloaded and setInterval reassigned.
Oh, and syntactically that code is invalid. You probably want to wrap the window.location portion in a function(){}, e.g.
setInterval(function(){
window.location = $('#thisLink').attr('href')
}, 1000);
otherwise it's not actually executing in an interval fashion, but immediately.

Look that these which may help you:
JS setInterval executes only once
setInterval with jQuery.html only updates once?
http://www.google.com/search?q=jquery+setinterval+only+running+once&aq=0&oq=jquery+setinterval+only+running+once&sugexp=chrome,mod=1&sourceid=chrome&ie=UTF-8

It's reloading only once, since once you change window.location you leave your page.
You need to open the link in new named window or embed the child page in an iframe.
setInterval(function() {
window.open($('#thisLink').attr('href'), 'mywindow', '');
});​