I have got a website that is reloading in JavaScript when $(window).width() > 1000px and after changing it to $(window).width() <= 1000px
I just want to reload my page after switching between mobile and desktop views.
After changing orientation on iPad 4 (iOS 10.3) for a few times - browser says that Problem occured and the page was reloaded. And iPad is stucking in infinite loop of reloading not by my script but by it's Safari.
$(window).resize(function() {
if($(window).width()>mobileBreak) {
if(device==='mobile') {
setTimeout(function() {
refresh();
},200);
}
}
else {
if(device==='desktop')
setTimeout(function() {
refresh();
}, 200);
}
}
});
function refresh() {
window.location.reload();
}
at the beginning of course i'm checking $(window).width() and setting up variable device.
It is working great on PC's, but not well on tablets with IOS.
Don't ask me why i have to reload page each time on view change. I just have to.
I found answer to my question! When i'm refreshing page on orientation change - Safari thinks that it's some kind of loop and showing error. I had added hidden form and each time when I'm changing orientation i'm setting random value of input inside this form and sending POST to current location. It works awesome, no bugs, no problems! Mayby this will help somebody with this problem in future.
Using resize may be the real cause of the issue, it may be getting called a few times when the size is changed. You can use jquerymobile throttled resize event for that purpose instead of window.resize().
https://api.jquerymobile.com/throttledresize/
$(window).on('throttledresize', function() {
if($(window).width()>mobileBreak) {
if(device==='mobile') {
setTimeout(function() {
refresh();
},200);
}
} else {
if(device==='desktop')
setTimeout(function() {
refresh();
}, 200);
}
}
});
function refresh() {
window.location.reload();
}
Related
Being semi-JS illiterate, I am unable to write my own code—can I get some help here?
What I am trying to do: stop a page from showing content until after a 3-second forced refresh.
I have a HubSpot thank-you page that shows personalized data based on a form filled on the previous page (I know I can customize the HubSpot JS code to do this, but since the page is already built, I cannot place custom form code.) The problem is that the personalization data doesn't come in until well after the page loads (so users see the default values first).
I've got some JS code that forces the refresh after 3 seconds, but I cannot figure out how to coordinate hiding the default content until that forced-refresh:
console.log(document.referrer);
console.log(document.location.href);
if (document.referrer !== document.location.href) {
setTimeout(function() {
document.location.reload()
}, 3000);
}
I tried adding this CSS: body { opacity: 0; }, along with this JS: document.body.style.opacity="100";
... by adding it after the setTimeout, by adding it after the the document reload, and by adding it as a new function to the reload. The best result was a flash of visible content at 3 seconds, then all content gone permanently.
I then just decided to write a whole separate setTimeout function outside the IF statement (in the hopes that it would just sync), but it still just shows blank content to everyone:
window.onload = function() {
setTimeout(function(){
document.body.style.opacity="100";
},3000);
};
I am sorry that I don't know enough about JavaScript to paint my way out—can anyone help me get closer to the correct way to hide content until a force-refresh?
This is my final code—at least it seems to work:
<style>
#hs_cos_wrapper_widget { opacity: 0; }
</style>
<script>
function showContent() {
document.getElementById("hs_cos_wrapper_widget").style.opacity = "1";
}
setTimeout("showContent()", 4000);
console.log(document.referrer);
console.log(document.location.href);
if (document.referrer !== document.location.href) {
setTimeout(function() {
document.location.reload();
}, 3000);
}
</script>
The only thing I don't like is that the page now takes more than 9 seconds to load (a preloader would be nice.) A more elegant solution is more than welcome.
I'm trying to make a button that takes the user back two pages, but I've noticed something odd about Safari. Here is my working function:
jQuery(function(){
jQuery('.go-back').click(function(e) {
if(jQuery.browser.safari) {
window.history.go(-3);
} else {
window.history.go(-2);
}
});
});
Does anyone have an explanation for why the indexing is off by 1 in Safari?
I'm building a website and I'm using media queries to make the website responsive for mobile devices. On the desktop version of my website, I'm using the following Javascript to make 2 divs fade in/out once 100px have been scrolled down.
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 100) {
$('#firstHeadingLeft, #firstHeadingRight').fadeIn(3000);
} else {
$('#firstHeadingLeft, #firstHeadingRight').fadeOut();
}
});
Now the problem is, I don't want this javascript to be active on my mobile device, I want the 2 divs to be always present. I done some searching and found this
How to disable JavaScript in media query
One of the suggestions was to add an event listener using this code
window.addEventListener('resize', function(){
if(window.innerWidth > 568){
...execute script
}
});
However because I'm not fluent in javascript I'm unsure how to correctly wrap my code into the event listener code.
If someone could give me a hand that would be appreciated! -- Thank you!
This should work but I have no way to test it. Tell me what happens :)
window.addEventListener('resize', function(){
disableScript();
});
window.addEventListener('load',function(){
disableScript();
});
function disableScript(){
if(screen.width > 568){
//...execute script
}
}
I have a problem with the back/forward-button on my mobile site. First I have to mention, that I want to show a loading-page-gif with that code if pageload needs more than a half second:
$(document).on('pageinit',function(e,data){
setTimeout(function() {
if (!$('#loading_image').hasClass('schnell')) {
$('#loading_image').addClass('loading_image');
$(window).load(function(){
$('#loading_image').fadeOut(1500);
});
}
}, 500);
});
$(window).load(function(){
$('#loading_image').addClass('schnell');
});
This works fine but not on one special site with google maps (with an iframe) when the user goes to the page by the back-button and uses safari or google chrome(in firefox on a desktop computer it works): Then the page-load-gif doesn't stop.
To get that fixed I used the following code:
$(document).on('pageinit', '[data-url="/anfahrt/"]', function (e) {
$(window).on("pageshow", function(event) {
if (event.originalEvent.persisted) {
alert("From bf cache.");
location.reload();
}
});
});
On my iphone the alert shows not until "wake up from standby". Does anybody know how to fix the problem? Thank you!!
PS.: At the moment I use the following code so that the users doesn't get shown the loading image all the time but get hidden that at least after 5 seconds at the iframe-page:
$(document).on('pageinit', '[data-url="/anfahrt/"]', function (e) {
setTimeout(function() {
$('#loading_image').fadeOut(1500);
}, 5000);
});
At the page http://m.alstaetter-tc.de/bilder/verschiedene everything works fine, so I think it has to do with the iframe...
My jQuery script below works perfectly on all devices and PC except Windows Phone. I think it's a pretty standard coding but it gives me a problem. The #feed with the engine.php in it, does not update when I press refresh. ( only on Windows Phone)
A workaround I found is that if I cap +=1; on the #refresh click function then it works.
I am using the latest jQuery.
How can I fix this? Is there anything special about Windows Phone to make use of it ? It seems that there is something like cache, because when I refresh the page it does not chaneg. When I close the tab and open it again it takes me to the updated page.
<script type="text/javascript">
var cap = 18;
$(function() {
function loadfeed() {
$('#feed').load('engine.php?cap=' + cap, function() {
$("#loadmore").val('Show More');
});
}
loadfeed();
$("#refresh").click(function() {
loadfeed();
});
});
</script>
<div id="nav_bar">
refresh
</div>