I have a simple loading div on my page that fades out when the whole page has been loaded.
I am using a simple code snippet as follows :
$(window).load(function(){
$('#loading').fadeOut(500);
});
this code is working fine in all my desktop browsers and in my mobiles chrome, but it won't work with my ipod 3g's ios5 safari browser.The loader won't go away thus the webpage is useless.
What can I do to solve this problem?
ps: I don't want to use document.ready here because what I'm trying to do happens when the page has been COMPLETELY loaded.
You should do this:
$(function(){
$('#loading').fadeOut(500);
});
So I figured it out by myself that using javascript's native load event will solve the problem :
window.addEventListner('load', function(){
//do the stuff
});
cheers
Related
I am not a JS developer, I am just a Web Designer dealing with simple JS interaction most of the time.
I am using jquery-1.11.3 and jquery.mobile v1.4.5 with just core features and slider capability.
As tablet I have a kindle with the firefox (beta) browser and an ipod with safari browser.
I am having a problem in understanding some JS behaviours of tablets and browsers regarding the click event function and document ready
$(function(){
$('.menu-ham').click(function(){
alert("test")
});
});
the click event doesn't work on tablets but it works perfectly on web browsers.
Instead if use this outside the document ready
$(document).on('click', '.menu-ham', function(){
alert("test")
})
it works like a charm. Only that I am not sure if this it would create problem with the browser because not inside document.ready
I tried to use as well
$(function(){
$('.menu-ham').on('click', function(){
alert("test")
});
});
inside or outside the document ready and nothing works.
"menu-ham" it is a button with that class. I read about a lot of topics, who said to use cursor:pointer, who said to use ".on('click'" instead of the normal click event, or vclick, or bind or touchstart but none really worked a part the solution that I offered, and now I am very confused about the whole thing on why is working and the other are not when I read a lot of comments that the other solution should work.
Any help would be very much appreciated, thank you!
I found the problem! it was all fault of Phalcon debugbar. On the mobile devices was generating an error that it wasn't happening on the normal browser. This error was making any jquery or selectors working.
Thank you for your help and support!
I am having huge problems with the jquery mobile pack, it broke my entire page by making links go to ajax and showing the loading div etc. I tried fixing them all and I somehow managed it with tons of excess code (I don't know what part exactly hid the loading part and which part undid the ajax).
Basically JQuery mobile made a mess of my page, and all I need is the swipe event, I found the github repository of jquery mobile (Here), but I honestly have no idea which parts to take so I can use the swipe event.
I know people want code, but there is no problem in my code here, JQuery mobile simply wants to open all links in ajax, and because I am using bootstrap and I don't use JQuery mobile for anything else but swipes, I won't be pasting anything.
If anyone can tell me which parts I need to take/modify to make it work that would be awesome.
I tried by only copying the events/touch.js but it didn't work.
If you want to navigate page without using ajax then you should add tag rel=external
Or data-ajax="false"
you can find more information for Jquery mobile HERE
EDITED
I have Another solution but I pesonally not prefer but I also having same issue before so I tried this solution
$(document).ready(function(){
$("a").click(function (){
window.top.location = $(this).attr("href");
return false;
});
});
Try this I hope its work for you too..
this function will force change document location when user click on any Hyperlink
I'm trying to use a script on my website who pop a navbar. There is a declaration on this script :
(function($){
$.cookieBar = function(options,val){
....
};
some other stuff here
})(jQuery);
We can see this script here it's working without any problem on all of my website called with :
$(document).ready(function(){
$.cookieBar();
});
In just one webpage there is a bug (css and js are include) :
TypeError: $.cookieBar is not a function
$.cookieBar();
I don't understand why. If anyone have any idea. On this webpage there is one major script who is working normaly without this cookie-nav-script but because of this bug nothing work at all.
I don't use any experimental stuff from this script and I attached this cookies-bar at the body.
I'm using jquery mobile 1.3.1 to develop a iphone mobile app, and while there is a page transition from A to B , page B on load function ie $(document).ready is not getting invoked
while if i use window.location.href to navigate from A to B, the function is getting called without any issues.
I have to use the page transition for my application and any suggestion on how to resolve this issue would be greatly appreciated
$('#page_id').on('pageshow', function(event) {
//Your script logic
});
In jquery mobile its not suggested to use document.ready.since it loads only page divs while executing.(<div data-role="page" id="page_id">) here we can use page.on function.
Note:jquery mobile does not work smoothly with page transitions even if we are using latest release of jquery mobile.For time being we can turn them off (page-transition="none") up till the release of jquery mobile next version.If transitions are working properly with the script being executed then I won't suggest to turn them off.
Take a look at the jQuery Mobile FAQ:
http://view.jquerymobile.com/1.3.1/dist/demos/faq/dom-ready-not-working.html
I have done locally a rating bar with the help of jQuery and I only use .css method and events like click, mouseup, mousedown and mousemove in javascript.
This works like it should locally (offline) but when I am uploading it up on a server it seems to do nothing...
I have tried to see with firebug what is wrong and it seems that online firebug doesn't see the javascript file with the slider but locally it does. Although when I try to view the javascript from the html pagesource(in firefox) it seems to be ok and the javascript fle its there..
Why the slider it doesn't work and why does firebug not seeing the script?
Thank you!
I have solved the problem, I had wrapped the listeners in
$(document).ready(function() {
//my code here
});
And now it works just fine.. I don't know why it worked locally but on the host not but now it works :D
Thanks for help anyway!