We Keep Coding

When using F5 reload web jQuery progress bar didn't work and my web didn't show any content either

I'm try to add a web loading bar with jQuery on the top of my web, and it's work when I first open this web. But when I press F5 reload web, progress bar won't work and my web didn't show any content either(only show a white background web). Here is my code:
document.onreadystatechange = function (e) {
if (document.readyState == "interactive") {
var all = document.getElementsByTagName("*");
for (var i = 0, max = all.length; i < max; i++) {
set_ele(all[i]);
}
}
}
function check_element(ele) {
var all = document.getElementsByTagName("*");
var totalele = all.length;
var per_inc = 100 / all.length;
if ($(ele).on()) {
var prog_width = per_inc + Number(document.getElementById("progress_width").value);
document.getElementById("progress_width").value = prog_width;
$("#bar1").animate({ width: prog_width + "%" }, 10, function () {
if (document.getElementById("bar1").style.width == "100%") {
$(".progress").fadeOut("slow");
}
});
}
else {
set_ele(ele);
}
}
function set_ele(set_element) {
check_element(set_element);
}
I notice this problem when I editing file, I want check my web and reload the page. I know there's a way using Ctrl+F5, but it's got a little trouble. I want only use F5 can reload my web successfully.
Thanks for anyone answering me.

In your browser, you can also use
CTRL + Shift + R to reload the page and empty the cache.
(⌘ + Shift + R on Mac)
Maybe it will solve your problem ;)

Show and hide on click

I have 4 images, that when I click on them, they each show a specific section on the website and keep the other three sections hidden. This part works great.
When that new section appears, it also has 4 images and when I click on them they too will show their specific section and keep the new three hidden. Here is where the problem lies.
I've tried using console.logs and the inspector and it seems all my content gets hidden. I'm too much of a newb to be able to figure out a solution.
I have kept the entire code off the page because I don't know where exactly the issue stems, but I'm 100% confident it's in my javascript. The whole code to get it to function like my website is over a thousand lines.
Any suggestions/hints/advice on what I can do to solve this please?
I think I need another function (but unsure how to go about creating it) as the first lot of images use AboutBlurbTabsFunction() to hide everything else and the second lot of images, I use the same one.
Here is the website
Here is the jsfiddle
Here is the Javascript code:
jQuery(document).ready(function(){
simpleForEach(document.getElementsByClassName("blurbtabs"), function(tc) {
tc.style.display = "none";
});
jQuery(".blurbclick").click(function(){
jQuery(".blurbtabs").hide();
jQuery("#"+ jQuery(this).attr("data-about") ).show();
console.log(jQuery(this).attr("data-about"));
});
jQuery(".tabimg").click(function(){
console.log("img tab click function");
jQuery(".tabcontent").hide();
jQuery("#"+ jQuery(this).attr("data-about") ).show();
console.log("#" + jQuery(this).attr("data-about"));
});
function simpleForEach(array, callback) {
for (var i = 0; i < array.length; i++) {
callback(array[i], i);
}
};
function AboutBlurbTabsTarget() {
jQuery(document).ready(function(){
var target = document.createAttribute("data-about");
var tclient = document.createAttribute("data-about");
var tshoot = document.createAttribute("data-about");
var tproduct = document.createAttribute("data-about");
var photographer = document.getElementById("bphotographer");
target.value = "sphotographer";
photographer.setAttributeNode(target);
var client = document.getElementById("bclient");
tclient.value = "sclient";
client.setAttributeNode(tclient);
var shoot = document.getElementById("bshoot");
tshoot.value = "sshoot";
shoot.setAttributeNode(tshoot);
var product = document.getElementById("bproduct");
tproduct.value = "sproduct";
product.setAttributeNode(tproduct);
console.log("first function reached the end internally");
});
console.log("first function ran through");
};
function AboutBlurbTabsFunction() {
console.log("function called");
var tabimgs = document.getElementsByClassName("tabimg");
console.log("var tabimgs: " + tabimgs);
<!-- for each tabimg -->
simpleForEach(tabimgs, function(tabimg) {
console.log("simple for each called!");
var aboutSection = tabimg.getAttribute("data-about");
<!-- add the click event listener -->
tabimg.addEventListener("click", function(evt) {
<!-- onclick do: -->
<!-- hide all tabcontents -->
simpleForEach(document.getElementsByClassName("tabcontent"), function(tc) {
tc.style.display = "none";
console.log("hide all tabcontents");
});
<!-- remove the active class -->
simpleForEach(document.getElementsByClassName("tabimg"), function(ti) {
ti.className = ti.className.replace(" active", "");
console.log("remove active");
});
<!-- show the current tab, and add "active" class to the link that opened the tab -->
document.getElementById(aboutSection);
tabimg.className += " active";
console.log("what section is called" + aboutSection);
console.log("what tabimg is at work here: " + tabimg.className);
console.log("what tabimg is at work here: " + tabimg.getAttribute("data-about"));
});
});
//console.log("second function ran through");
};
AboutBlurbTabsFunction();
AboutBlurbTabsTarget();
});

The problem probably lies here.
<!-- show the current tab, and add "active" class to the link that opened the tab -->
document.getElementById(aboutSection);
tabimg.className += " active";
You tried to get the next element but didn't do anything about it. Changing it to something like this should work.
<!-- show the current tab, and add "active" class to the link that opened the tab -->
var nextSection = document.getElementById(aboutSection);
nextSection.style.display = 'block';
tabimg.className += " active";

document.location enacted after subsequent code

Hello lovely people of StackOverflow.
I'm trying to create a dynamic page using JavaScript AJAX and PHP.
I have created a list of images which have unique ids numbers 1-12. When one is clicked it should pass that id onto a function which changes the page, then uses the id number to load in content to the new page.
My problem is that when I use document.location to change the page (or window.assign) it does not change the page before enacting the following code which loads in the content. Therefore it tries to load the content to a div which doesn't exist on the current page, then changes the page. Does anybody know why this is? And how I can solve it?
I have tried putting the document.location and innerHTML code in separate functions, but the next function is still called before the page changes. I have also tried putting an if statement ahead of the content load but that is also called before the page changes.
Here is my code:
function output (bookList){
for (var i = 0; i < titles.length; i++) {
document.getElementById("insertBooksHere").innerHTML += "<ul class=\"bookItem\">";
for (var t = 0; t<position.length; t++){
if (t==position.length-1)
{
x = bookList[i][0];
document.getElementById("insertBooksHere").innerHTML += "<img class=\'books\' id = \'" + x + "\' src=\'" +bookList[i][t]+ "\' onClick=\'getBookDetails("+ x +")\'>";
}
else
if ( t == 1 || t==2){
document.getElementById("insertBooksHere").innerHTML += "<li>"+bookList[i][t]+"</li>";
}
}
document.getElementById("insertBooksHere").innerHTML += "</ul></div>";
}
}
function getBookDetails(id){
bookID = id;
for ( var t = 0; t<12; t++)
{
bookDetails[t] = bookList[bookID-1][t];//grab details about specified book from array using x as the value for i.
}
loadBookPage(bookID, bookDetails)
}
function loadBookPage(bookID, bookDetails){
console.log(window.location.href);
}
function loadBookDetails(){
if ( document.location == 'books/'+bookID+'.php')
{
x = bookID;
console.log(bookDetails);
document.getElementById("book").innerHTML += "<ul class=\"bookItem\">";
for (var t = 0; t<position.length; t++){
if (t==position.length-1)
{
document.getElementById("book").innerHTML += "<img class=\'books\' id = \'" + x + "\' src=\'" +bookDetails[t]+ "\'>";
}
else {
document.getElementById("book").innerHTML += "<li>"+bookDetails[t]+"</li>";
console.log("for loop");
}
console.log(bookDetails[t]);
}
document.getElementById("book").innerHTML += "</ul>";
document.getElementById("book").innerHTML += "HELLO!!!";
}
}
And you can see my work here: http://itsuite.it.brighton.ac.uk/rlr17/bookClub/home.php
Thanks guys! Really appreciate your help.

My problem is that when I use document.location to change the page (or window.assign) it does not change the page before enacting the following code which loads in the content.
That is how JavaScript (when running client side, embedded in a webpage) works.
It runs in that page.
If the page goes away (because you loaded a new page) then its execution environment goes away and it stops running.
If you want to do something in the next page then you have to pass some data to that page and have code in the new page read that data and act on it.
Ideally, you would do this using server side code (as it is more reliable, and rarely has an additional runtime cost when you are loading a new page anyway).

Can't change iframes onload listener in IE9

I have the following code within an external javascript file.
jQuery(function ($) {
//////////////////////UPCOMING EVENTS JSON SERVER START///////////////////////////
var eventList = $("#eventList"); //cache the element
$.getJSON("/JsonControl/Events.json", function (jsonObj) {
val = "";
for (var i = 0; i < jsonObj.events.length; ++i) {
val += "<p>" + jsonObj.events[i].dateMonth + "/" + jsonObj.events[i].dateNumber +
"/" + jsonObj.events[i].dateYear + " - <span id='EL" + i + "' class='link' " +
"onclick=plotEvent(" + i +")>" + jsonObj.events[i].title + "</span></p>";
}
eventList.html(val);
});
//////////////////////UPCOMING EVENTS JSON SERVER END/////////////////////////////
});
function plotEvent(index)
{
$.ajax({
url: "/JsonControl/Events.json",
dataType: 'json',
async: false,
success: function (jsonObj)
{
var eventBox = window.frameElement;
alert("This alert fires in all browsers, including IE9")
eventBox.onload = function ()
{
alert("This alert doesn't fire in IE9.")
window.frameElement.onload = null; // unset it so it only fires once
eventBox = eventBox.contentDocument || eventBox.contentWindow.document;
eventBox.getElementById("title").innerHTML = (jsonObj.events[index].title);
eventBox.getElementById("content").innerHTML = (jsonObj.events[index].explanation);
eventBox.getElementById("dateHolder").innerHTML = (jsonObj.events[index].dateMonth + "-" + jsonObj.events[index].dateNumber + "-" + jsonObj.events[index].dateYear);
};
eventBox.src="/Event htms/Event.htm";
}
});
}
The page that loads this script is in the iframe itself. A very similar function called in a different external js file, from the main page outside of the iframe (for a different but similar purpose) works in all browsers just fine. The only difference is that with this code I have to target the onload of the iframe from within the iframe, instead of just grabbing the iframe by id. I then attempt to change, the onload of said iframe, for use with the next internal iframe page (which is why I need to preserve the json array index [i] when dynamically writing the first iframe page's innerHTML.
Sorry if that was a bit wordy, and/or confusing, but suffice it to say that with using the above-pasted code, I have no problems... except with IE (tried in IE9). I have tried dozens of examples and supposed solutions, but nothing has worked. Using IE9.
Here's what I mean when I say 'it doesn't work in IE9':
This part of the code within plotEvent() doesn't fire:
eventBox.onload = function ()
{
alert("This alert doesn't fire in IE9.")
window.frameElement.onload = null; // unset it so it only fires once
eventBox = eventBox.contentDocument || eventBox.contentWindow.document;
eventBox.getElementById("title").innerHTML = (jsonObj.events[index].title);
eventBox.getElementById("content").innerHTML = (jsonObj.events[index].explanation);
eventBox.getElementById("dateHolder").innerHTML = (jsonObj.events[index].dateMonth + "-" + jsonObj.events[index].dateNumber + "-" + jsonObj.events[index].dateYear);
};
Is there any solution to this problem, or is this sort of thing why iframes aren't used more often (that is, that IE doesn't fully support them)?

Try eventBox.contentWindow.onload or maybe $(eventBox).load(function)

Bitly API - JavaScript function to open new window

I am using a script i found here to dynamically generate short link for my Tweet buttons and it works perfectly well, but the only thing i cant seem to do is create the link to open in either a new tab or preferably a popup window.
I have tried several variations of the window.location section of the script but so far I've had no luck. If anybody could point me in the right direct I'd be very grateful.
This is the script I am using...
<script>
var TweetThisLink = {
shorten: function(e) {
// this stops the click, which will later be handled in the response method
e.preventDefault();
// find the link starting at the second 'http://'
var url = this.href.substr(this.href.indexOf('http:', 5));
BitlyClient.shorten(url, 'TweetThisLink.response');
},
response: function(data) {
var bitly_link = null;
for (var r in data.results) {
bitly_link = data.results[r]['shortUrl'];
break;
}
var tweet_text = "Text for the Tweet goes here"
window.location = "http://twitter.com/home?status=" + encodeURIComponent(tweet_text + ' ' + bitly_link + " #Hashtag1 #Hashtag2");
}
}
jQuery('.tweetlink').bind('click', TweetThisLink.shorten);
</script>
Many thanks in advance :)

Normally you could just do window.open:
window.open("http://twitter.com/home?status=" + encodeURIComponent(tweet_text + ' ' + bitly_link + " #Hashtag1 #Hashtag2");
BUT, since you are doing an ajax call before this happens, chances are that this window popup will be blocked by the browser, since the window.open command is no longer associated with the click (browsers allow a certain time before a window.open command falls under non-initiated "popup").
A solution would be to first open the window on click (in your shorten function):
var win = window.open('about:blank');
And then redirect in your response function:
win.location = 'http://twitter.com/etc...';
Demo: http://jsbin.com/usovik/1

Perhaps you're looking for
window.open("http://example.com");