Reload page on back button press (mobile, safari) - javascript

so i've been looking around and i've found several questions which are all very similar to this with fixes however none have worked for me because I think they may be outdated.
This is my code:
$(document).ready(function() {
$('body').css('display', 'none');
$('body').fadeIn(5000);
$('.link').click(function(event) {
event.preventDefault();
newLocation = $(event.currentTarget).find('a').attr('href');
$('body').fadeOut(1000, function () { newpage(newLocation); });
});
function newpage(location) {
console.log(location);
window.location = location;
window.onunload = function(){};
}
});
Everything seems to work fine on desktop browsers however the issue is only on mobile. What im asking is how can I refresh the page on the click of the back button so the animations play each time a page is loaded and left.
You can see what I mean here - website

Haven't tested this on mobile but I know this works on my laptop browser.
<script>
$(document).ready(function(e) {
var $input = $('#refresh');
$input.val() == 'yes' ? location.reload(true) : $input.val('yes');
});
</script>
<input type="hidden" id="refresh" value="no">

Related

Javascript only works after first refresh

I know this is by far not the first time this question is asked but I did look through every discussion I could found and none of the approaches was helpful to me (I'll list those solution-attempts further below).
My problems is a Show More/Hide Button-Javascript that only seems to work after the first refresh of the page (interestingly, this only shows up if a non-admin user visits the site - if that makes a difference).
My Code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
var SHOW_MORE = 'Show More'
var COLLAPSE = 'Show Less'
$(window).load (function(){
$('a[href^="#expand"]').each(function(){
var n = parseInt($(this).attr('href').split('-')[1]);
var next_n_divs = $(this).parents('div.sqs-block').nextAll().slice(0,n)
next_n_divs.wrapAll('<div class="extra-gallery" style="display:none;"></div>');
$(this).click(function(){
var target_gallery = $(this).parents('div.sqs-block').next('div.extra-gallery')
if (target_gallery.is(':visible')){
$(this).text(SHOW_MORE);
}
else {
$(this).text(COLLAPSE);
}
target_gallery.slideToggle();
return false;
});
});
});
</script>
I figured out it might be helpful to add a
$(window).load( function() {
// ...
});
but this only seemed to 'crash' the page (maybe I applied it wrong tho).
(Here the links I already took a look at:
Javascript only works after page refresh
Rails javascript only works after reload
Rails javascript only works after reload )
thx for any help
Titus

Show/Hide Menu on mouse out

We have menu which works on onclick/on mouse enter and on mouse leave. All of sudden after chrome got updated the menu is not working.
Especially windows XP/Chrome 40. Strangely not showing any errors is console. Please help us to get out of this.
var menuLeft = document.getElementById('cbp-spmenu-s1'),
showLeft = document.getElementById('showLeft'),
navigationEdge = document.getElementById('navigationEdge'),
navigationMenu = document.getElementById('cbp-spmenu-s1'),
body = document.body;
$("#navigationEdge").mouseenter(function () {
classie.toggle(menuLeft, 'cbp-spmenu-open');
});
$("#cbp-spmenu-s1").mouseleave(function () {
classie.toggle(menuLeft, 'cbp-spmenu-open');
});
showLeft.onclick = function () {
classie.toggle(navigationEdge, 'active');
classie.toggle(this, 'active');
classie.toggle(menuLeft, 'cbp-spmenu-open');
};
Here is the JsFiddle.
Yes, it's a Chrome 40 bug. I reported it yesterday, some functions aren't working (even in Developer Tools, the Toggle Element State isn't working).
Only thing I can say is... let's wait :)
BTW, test your fiddle in Firefox, here in v35 it worked well.

Disabling Javascript Code on Mobile (maybe touchscreen)?

I've seen topics on disabling javascript for mobile but it's a little over my head. I know just enough to be dangerous. I have a hover effect for captions on photos using a script but on a mobile I've set the css so that it displays by default. Only problem is when you click the image to view a lightbox it tries to fire the hover effect. How do I disable that?
<script type="text/javascript">
$(document).ready(function() {
$('.fade').hover(
function(){
$(this).find('.caption').fadeIn(250);
},
function(){
$(this).find('.caption').fadeOut(250);
}
);
});
</script>
You can disable (without much effort or danger) that particular behaviour for touch devices checking the existence of the 'ontouchstart' property on the window object like this:
$(document).ready(function() {
if (!('ontouchstart' in window)) {
$('.fade').hover(
function(){
$(this).find('.caption').fadeIn(250);
},
function(){
$(this).find('.caption').fadeOut(250);
}
);
}
});

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

Categories

Resources