First thing to mention is that my code is working in IE8 and Google Chrome.
It's only under Firefox that I have the problem, tested it under Ubuntu and Win XP same issue with FF.
I'm tryng to display an ajaxloader gif image while I am refreshing the page.
At the very beginning I am using jquery .ready() function to hide the div#refreshing that would display the image.
When we click on the refresh link then I show the div#refreshing. My problem is that the ajaxloader.gif is not turning
like it should be it becomes to be a fix image. But as mentionned it works under chrome and IE.
Any idea why?
HTML:
<div id="refreshing">Refreshing</div>
Refresh
CSS:
#refreshing {
font: 14px Verdana,Arial;
color: #00264b;
background: url("/med/base/img/ajax-loader-blue.gif") center no-repeat;
}
JavaScript:
$(document).ready(
function() {
// hide the ajax loader
$("#refreshing").hide();
}
);
function refreshPage() {
$("input").attr("disabled", "disabled");
$("select").attr("disabled", "disabled");
$("img").attr("onclick", "");
$("a").attr("href", "#");
window.location.href = window.location.href;
$("#refreshing").toggle();
}
One more thing is that the firefox config image.animation_mode is set to normal.
Plus if I look under firebug the image is animated.
thank you everyone.
The reason it doesn't work is because Firefox stops all gif animations on page refresh.
In order to make this work you should load the page (or better yet, only the updated parts) via ajax and overwrite the existing content with the new.
I finally manage to get it to work with a coffee on a good Wednesday morning.
Here is the code, while Firefox was stopping the GIF image to work and I was using it to display
the user that we were refreshing the page, I though it could be just the way I was refreshing the page that was incorrect.
So I search another way of refreshing the page in Javascript some where using window.location.reload();
I tried it, but there was only one problem with this method, my input that I desactivate while refreshing were still disabled on refresh.
I went in the process of reactivating them within a $(document).ready(function() { //activate input });
At the end it was working fine, but I still found the reactivating odd.
I finally search for the difference between window.location.href=window.location.href and window.location.reload()
Got it here -> Difference between window.location.href=window.location.href and window.location.reload()
So by passing the argument true to the reload function we tell the reload function to not post the old POST data and get a fresh copy of the page from the server.
That fixed completly my issue.
I didn't change the HTML code neither the CSS
<!-- JS -->
$(document).ready(
function() {
// hide the ajax loader
$("#refreshing").hide();
}
);
function refreshPage() {
$("input").attr("disabled", "disabled");
$("select").attr("disabled", "disabled");
$("img").attr("onclick", "");
$("a").attr("href", "#");
window.location.reload(true);
$("#refreshing").show();
}
Thank you everyone.
Another sollution is to use a html5 canvas element for animated loaders. It should still work fine on page reload.
This generator works pretty well and is cross browser compatible http://heartcode.robertpataki.com/canvasloader/
Related
I am using jQuery to read the URL of the page to determine which page the user is on and then change the background accordingly. My code works great, sometimes... I've tried using $(window).load(function() to no avail and the only answer I can find here is to use $( document ).ready(function() but that's not much help because that's how I wrote the code to begin with, and it's not working as it should. I also attempted to force the page to reload inside the function but that was pointless as well, ( I didn't have much hope for it anyway). When it doesn't work a simple click of the refresh button will get it to work. I have also tried putting the script tag in the header and footer, no difference. I have implemented the same code on different sites and in both cases, it works fine... I thought that maybe it was a caching issue but multiple hard reloads proved otherwise.
You can see for yourself at http://maisonshowroom.com/ click through the nav and the background is supposed to change for each page. I also have a console.log message that should reflect the URL, sometimes it's correct...but that just raises more questions for me, regardless if it's correct or not it should still have a background image rather than just being blank.
Here's my code
$(document).ready(function() {
//changes background images based on which page user is on//
var currentPage = window.location.href;
console.log(currentPage);
if (currentPage.includes('about')) {
$('.wrapper-inner').css('background-image',
'url(http://maisonshowroom.com/wp-content/uploads/2017/09/maison-
about.jpg)');
}
else if (currentPage.includes('services'))
{
$('.wrapper-inner').css('background-image', 'url(http://maisonshowroom.com/wp-content/uploads/2017/09/maison-service-e1506643269331.jpg)');
}
else if (currentPage.includes('products'))
{
$('.wrapper-inner').css('background-image', 'url(http://maisonshowroom.com/wp-content/uploads/2017/09/maison-product.jpg)');
}
else if (currentPage.includes('contact'))
{
$('.wrapper-inner').css('background-image', 'url(http://maisonshowroom.com/wp-content/uploads/2017/09/maison-contact.jpg)');
}
else {
$('.wrapper-inner').css('background-image', 'url(http://maisonshowroom.com/wp-content/uploads/2017/09/maison-about.jpg)');
}
});
Remove this line:
window.location.reload();
and fix this line :
'url(http://maisonshowroom.com/wp-content/uploads/2017/09/maison-
about.jpg)');
to:
$('.wrapper-inner').css('background-image',
'url(http://maisonshowroom.com/wp-content/uploads/2017/09/maison-about.jpg)');
One single line
All I needed to do was disable the AJAX page transition from the WordPress dashboard. Thanks, Patrick Evans, for pointing out that it was being handled by AJAX, I would have never guessed.
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
});
I've seen the new website of megaupload (mega) and we've got this:
Ok, if I press on left-menu contacts, it only reloads the white part on the image, if I press messages, the same, it only reloads white part. But if I go from contacts to messages and I press browser's back button, it goes from messages to contact and only reloads white part as always.
In my website, I do the same using jquery hide and show, but obviously, if I press browser's back button it doesn't hide the div and shows the other one.
My web site is only one html file and there are 4 div that get shown or hidden depending on the button you press, this is an example:
$("#btn_contact").click(function () {
$("#content_contact").show();
$("#content_home").hide();
$("#content_products").hide();
$("#body_aux").hide() ;
$(this).addClass('visited');
$('#btn_products').removeClass('visited');
$('#btn_home').removeClass('visited');
});
Can anybody tell me how to find this with jquery or whatever I have to use.
I don't know if I've explained myself well, if not, ask me to do it better.
I would appreciate any help. Thanxs a lot.
Maybe it'd be easier for you and more appropiate to make "content_contact.html", "content_home.html", and so on and use .load() function as Ozan Deniz said. You wouldn't have to change margins, positions, etc. and back button would work withouth programming. I think is not appropiate to make the whole website using just one html file, showing and hiding div's, ofcourse you can do this but maybe is not the right way. I'm newbie at this, but that's what an expert told me beacuse I was doing something similar to that.
Hope to help you.
You can use jquery load function to load white part
For example;
$('#result').load('ajax/test.html');
And in back button event you can load the white part
jquery hide and show
window.onbeforeunload = function() { $('#result').hide(); }; or
window.onbeforeunload = function() { $('#result').show(); };
jquery load function
window.onbeforeunload = function() { $('#result').load('ajax/test.html'); };
I'm designing an HTML page which has one button. The user clicks the button and a simple jQuery script animates that div away, revealing lower page content. You can see it here.
I've noticed that it looks/works fine the first time, but if I refresh the page with the browser button, it doesn't fully reset. The initial container is only half on the page. If I enter the URL again and load the page, it resets as expected.
NOTE: This only happens if you scroll down a bit after clicking the initial button... which seems weird.
I had no idea that there was any difference between these two operations, but there clearly is. What is the difference and how can I fix this problem from happening?
Here's my jQuery code, in case it's relevant:
$(document).ready(function(){
var faqs = $("#FAQ");
$("#learnmore").click(
function(){
$("#home").animate({top:'-=1066px'},600);
$("#more").animate({top:'-=1066px'}, 600, function() {$("#background").hide();} );
$("body").css('overflow-y', 'scroll');
//$("#home").slideUp();
console.log("jquery loaded");
}
);
});
It happens because it is cached by the browser.
If you styles are regularly modiefied, then as easy fix is to attach a unique id on the end of the reference, like
<link href="style.css?time=168768234928" ..../>
What it does, it makes the browser think it is a new request everytime it loads.
It happens because browser trying to scroll to the same position, what was before page reload. To check it, try press button and don't scroll to bottom of page and then reload page.
Okey, the reason is clear.
Now we need solution. Try this:
#more {display:none}
in your css. And then use
$("#more").show().animate(...
in your $("#learnmore").click() function. I hope this will solve the problem.
I'm using javascript, so that when a refresh button is clicked it begins to spin around until the refresh is completed. This is my function:
function RefreshHome() {
// Refreshes the home page via the image link.
// Make the refresh link animate.
var refresh = document.getElementById("refresh_button");
refresh.src = "images/refresh_animated.gif";
// Refresh the page.
window.location = "home.aspx";
return false;
}
This worked perfectly for a while then, as far as I can see, inexplicably stopped working! When the refresh button is clicked on now, the image just disappears.
Does anybody know why this might happen?
Just want to mention that this would be much easier in jQuery. You wouldn't need to worry so much about maintaining browser compatibility etc. either. As your project grows your code may become unwieldily, so even if you don't decide to use jQuery you should find a suitable framework for your needs.
var refresh = $("#refresh_button");
refresh.attr("src", "images/refresh_animated.gif");
Also be aware that an image that has no src shows up with a placeholder X on most browsers, and you can hide it with display:none; or using the refresh.hide() and refresh.show() methods in jQuery as needed.