Develop Reference

Need solution for error after continuously loading a website

I tried making a website that updates or loads a part of it after a few seconds. After I load in the website and a few seconds to minutes later (depends on how long I input the time in the code) of constantly loading a part of the site, it would return:
Aw, Snap! Something went wrong while displaying this webpage.
This is the script I use in constantly loading the page:
setInterval(function(){
refresh() // this will run after every 36 seconds
}, 36000);
function refresh() {
$('#myChart').load(location.href + "#myChart>*","");
}
Honestly, I don't know how the code inside the function refresh() works.
If you would please help me in understanding both things, it would be of great help.

You're causing a stack overflow because the url of your .load() is the same as the page you're on. So it loads the same page into the "myChart" element, which then starts another setInterval. So now you have 2 setInterval running, then when it loads again, you have 4 running, and then 8, and so on.
I'm not sure the purpose of loading the page you're currently on into the page you're currently on. Perhaps you mean to load a different url? If you do that, then you won't have a stack overflow.
Demo
https://repl.it/#AnonymousSB/SO53360989
setInterval(function(){
refresh() // this will run after every 36 seconds
}, 36000);
function refresh() {
$('#myChart').load(location.href + "/path/to/another/page.htm");
}
If you're just trying to auto-reload the page you're on, then try this.
function refresh() {
window.location.reload(true);
}
setTimeout(refresh, 36000);

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

Opening an overlay window after n seconds have passed of page being loaded

My client would like a page on their site to display a pop-up/overlay form a couple of seconds after the page they want it to appear on has finished loading. Being a complete novice when it comes to jQuery and javascript, could someone help me out please? I imagine it should be simple when you know how.

This should help
$(document).ready(function() {
setTimeout(function() {
// here your stuff to display popup
}, 30 * 1000); // 30 is number of seconds after page load
});

javascript refresh self only once

jquery mobile page does not work when clicking prev button in android.
So I searched a lot but I didn't find any results.
So I want to redirect the self page on the first time only.
$(document).ready(function(){
window.location.reload();
//..
}
In that code, the page is reloading forever..
How can I reload the page only once?

you can use local storage. make counter true if page is loaded once.
check this out
$(document).ready(function(){
if(!localStorage.counter) {
window.location.reload();
//..
localStorage.counter = true;
}
}

looking at your code, it seems to be reloading the page as soon as the document is ready... so it's in an infinite loop.
you need to add an interval counter to set a delay.
something like
setInterval(
function () {
var url = '#';
$('body').load(url);
}, 300000)
where 300,000 mS is 5 minutes. that's not platform specific.

Javascript delayed loading blanks page

On a website I'm working on, I need to load a tracking script 10 seconds after the page loads. I found a snippet to do so, but I've hit a snag. After waiting 10 seconds, the page goes white. The URL doesn't seem to change, but the page is no longer visible and the throbber starts spinning.
Here's what I'm using to load the script:
function $import(src){
var scriptElem = document.createElement('script');
scriptElem.setAttribute('src',src);
scriptElem.setAttribute('type','text/javascript');
document.getElementsByTagName('head')[0].appendChild(scriptElem);
}
// import with a random query parameter to avoid caching
function $importNoCache(src){
var ms = new Date().getTime().toString();
var seed = "?" + ms;
$import(src + seed);
}
//
// Tracker options go here...
//
setTimeout(function(){
$importNoCache("http://tracking.code/url");
}, 10 * 1000);
Is there a better way to do this?
EDIT: I stepped through the code in Firebug, and the scripts works like it should. With Firebug's debugger off, it blanks the page as I described above.

This would happen if the script calls document.write.
Can you show us the script that you're loading?

The code looks fine, so the problem is probably in the tracking code. If it contains a document.write() call, it will work fine when included normally, but wipe out the page when included after the page has finished loading.
Edit:
Yep, the tracking script does d=document, then calls d.write() later on... you won't be able to include this script after the page has finished loading.