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