Develop Reference

iPad is crashing after refresh in JavaScript

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();
}

pagescroller javascript issue

I'm using PageScroller plugin to scroll to different sections/pages on my website.
Basically I want the scrolling button to return back to the top of the site once it's reached the last page.
I'm trying something like this but it doesn't seem to be working:
$('#controls .next').bind('click', function(e){
if(pageScroller.current ='3'){
pageScroller.goTo(1);
}
else {
pageScroller.next();
}
});
I'm following API's from here http://pagescroller.com/documentation/
Many thanks

On your if statement you seem to be setting the pageScroller.current to 3, try evaluating instead:
if(pageScroller.current == '3'){

bf cache in chrome and safari

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...

Jquery link effect only works once per page load?

When I click "contact" then "about" the animations work correctly, however, if I then click "contact" again, the animation won't work. The page appears blank.
$(".contact-link").click(function() {
if ($("#contact-page-wrap").is(":hidden")) {
$("#contact-page-wrap").slideDown(400).queue(function() {
$(".contact-block").slideDown(400);
});;
} else {
$(".about-block").slideUp(400).queue(function() {
$(".contact-block").slideDown(400);
});;
}
});
$(".about-link").click(function() {
if ($("#contact-page-wrap").is(":hidden")) {
$("#contact-page-wrap").slideDown(400).queue(function() {
$(".about-block").slideDown(400);
});;
} else {
$(".contact-block").slideUp(400).queue(function() {
$(".about-block").slideDown(400);
});;
}
});
How can I make it run once per click for as long as the page is open?

I'm not sure that I understood completely your intentions, but have tou considered using .slideToggle()?
http://api.jquery.com/slideToggle/
It is a simpler way (if I understand correctly what you're trying to do)
PS: Java is a wrong tag! You should switch it to "Javascript".

jQuery load file function triggers only in one situation

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>