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>
Related
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">
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
I am not sure what is causing the issue with my mobile menu system here.
I have two pages with an identical function to condense the nav systems into a mobile menu (below)
<script type="text/javascript">
$(document).ready(function() {
$('.main_nav nav ul').clone().appendTo('.top_menu');
$('.sec_nav nav ul').clone().appendTo('.top_menu');
$('.bottom-links ul').clone().appendTo('.top_menu');
$('.footer-links ul').clone().appendTo('.top_menu');
$('.rfi_nav').clone().appendTo('.m_form');
// For Menu-----------------
$('.menu, .m_close, .rfi_nav label.title').click(function(e) {
$('body').toggleClass('m_open');
});
// For Menu On window resize------------------
function checkwindowSize() {
var windowSize = $(window).width();
if(windowSize > 320 && windowSize < 1023) {
//$('body').toggleClass('open');
}
else{
$('body').removeClass('m_open');
}
}
checkwindowSize();
$(window).resize(function(){ checkwindowSize() });
// For BT Select DropDown-----------------
$('select').selectpicker();
// For content Scroll bar-----------------
(function($){
$(window).load(function(){
$(".scroll").mCustomScrollbar({
scrollButtons:{enable:true,scrollType:"continuous",scrollSpeed:40,scrollAmount:40},
advanced:{updateOnBrowserResize:true, updateOnContentResize:true, autoExpandHorizontalScroll:true, autoScrollOnFocus:true }
});
});
})(jQuery);
// BT Accordian------------
function toggleChevron(e) {
$(e.target)
.prev('.panel-heading')
.find("i.indicator")
.toggleClass('glyphicon-plus glyphicon-minus');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);
});
</script>
My script works perfectly on my homepage (http://dev.oru.edu) but my internal pages (http://dev.oru.edu/generic-hf.php and http://dev.oru.edu/generic-hfs.php) seem to be conflicting somewhere and I cannot detect where or why.
Can someone please help me identify what is causing the conflict resulting in my mobile menus not loading? I am not familiar with JavaScript so I am fumbling around and don't want to mess the code up from the original developer since it is still working on the homepage.
The furthest I have been able to detect is that the problem is not restricted to only mobile devices but desktop browsers as well when scaled to mobile sizes. At first I thought it may be relevant to the device type but the issue is persistent with the desktop browsers as well.
Looking at the error console is very telling:
Many of your scripts depend on JQuery being loaded before they run. You're loading JQuery, but doing it asynchronously:
<script async type="text/javascript" src="js/1.11.3.jquery.min.js"></script>
Your scripts are then immediately calling window.$ and window.jQuery which haven't been loaded yet.
Remove the async attribute and it should work.
I had an "async" on my primary jquery library which was causing the function to not load the library properly.
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...
I wrote a small script for an eCommerce site that errors an order if certain conditions aren't met. Now I'm trying to write something so the continue button returns the user to their cart. I can't change the button to add a class.
The problem is that this script doesn't work in IE. I'm not overly familiar with the differences in how browsers handle JavaScript. Does anyone have any ideas?
<script type="text/javascript">
jQuery("#shipping-method-buttons-container .button").wrap(function() {
var link = jQuery('<a/>');
link.attr('href', 'http://mywebsite.com/checkout/cart/');
return link;
});
</script>
Update: I have since tested this in IE9 and IE10. I'm getting this problem in all IE browsers.
you can try this:
$("#shipping-method-buttons-container .button").click(function(){
window.location = "http://mywebsite.com/checkout/cart/"
})
This is working in IE and others
jQuery(function(){
jQuery("#shipping-method-buttons-container .button").wrap(function() {
var link = jQuery('<a></a>').attr('href', 'http://mywebsite.com/checkout/cart/');
return link;
});
});
Example.