I have a problem that's driving me nuts - I've found one other question about it, but no conrete solution.
I'm using the following to hide the URL bar on my mobile site:
window.addEventListener("load",function() {
setTimeout(function(){
window.scrollTo(0, 0);
}, 0);
});
This works fine, but there is just a very large gap between when the content jumps to the top, and when the actual URL bar slides up. Has anyone else run into this?
Here's the other question: Jquery mobile - Delay auto hiding address bar
This question points to iOS6's new 'Reader' button as the culprit; is there any forseeable way around it? Hiding Address Bar in Mobile Safari With Reader Button Visible
FYI, unlike the similar question I posted, I'm not using jQuery mobile, just plain old jQuery 1.8.
It might be that you have images or you are using scripts form CDNS that take a while to load, you might try loading the page in a browser and checking with the timeline tab to see if anything is taking a long time to load.
Another idea, the issue might be the the size of your screen is not initially long enough to allow for the scroll? So its possible that it can't scroll till you run additional scripts.
So it is most definitely the 'reader' button that is causing the delay - I was using article tags to display my content; switching to a standard div remedies the problem. FWIW, the delay goes from around 5 seconds with the reader button enabled, to under 1 second without it on iOS 6.
Related
I have looked around for a solution to this problem and although I have come across other people asking the same question , it seems answers for this issue are limited.
The Problem
The issue is that I have a overlay (slide-out from the side) menu which has a search box on it. I need to disable all body scroll so that the user can easily scroll around on the overlay without the body moving all over the place.
Solutions I have tried
The solution I have tried is from the link below
How to disable body scrolling when modal is open IOS only
This solution works great , when the sidebar shows up body scroll stops and when the sidebar disappears body scroll works again.
Whats wrong with the solution I have already found
Well , on Ipad when you click on a search box and the keyboard shows up for some reason body scrolling issue once again appears. If I get rid of the keyboard the problem is once again sorted.
Why is there no code on this page
I work with confidential data and the code is company property therefore this is not something I can post on here. Now I can mock up an example code which shows the issue however it would literally be a side bar with a search box and I dont think that would be useful however I may be wrong in which case I'm sure I can mock something up.
Apologies if the lack of code on this page offends anyone.
I have a problem with a web page I built that in iOS, not sure what versions, but I'm testing it on the new iPhone X(and newest iOS), it's possible to kind of resize the whole webpage.
I checked other regular sites and doesn't seem possible to do that.
So i'm guessing maybe some easy CSS can do that.
It looks like this (this is not my site, just another site that's it's possible to do it with)
It does not change my actual viewing of the site, I can only drag and move it, but when I let go, it goes back to the full screen.
You can see the movie here of how it moves: https://vimeo.com/263628559
I have fixed items on the screen, so it's not any particular div that it's been done too.
It was not that, I found a solution with jQuery
$(window).bind('touchmove',
function(e) {
e.preventDefault();
}
);
Good luck to all :)
I'm working on my first jQuery Mobile site, which is a (prototype for) a Location Based Game in Brisbane, Australia: www.jsjensen.dk/soleil/
My question is based on viewing from a mobile device, but a desktop device have very similar problems. I have tested with Chrome and Safari on iPhone, iPad, and Mac. Same problem everywhere.
I think it's related to how jQuery Mobile loads and displays pages, but I'm not using multiple pages in one HTML document, but have multiple HTML document.
If you go to the website above and then click "QUESTS" in the menu, followed by "Stairway to Knowledge" you will end on /soleil/quest01.html (desktop) and /soleil/#/soleil/quest01.html. That "#/soleil" really confuses me!
In this first try the JavaScript for handling answers in the text input is not loaded. That means nothing happens when you press "Unlock".
Now, if you reload on desktop or edit the address on iOS to /soleil/quest01.html (which is the actual and real file) it will reload the page with the right JavaScript loaded and initialized.
Now I'm able to go back (pressing "QUESTS" in the menu) and then go to another page (e.g. "Citadel of Fun") with the same problem: the JavaScript not loading. If I go back to the other one ("Stairway to Knowledge") the JavaScript is, however, still loaded and working just fine.
So what happens here? I'm pretty sure my linking/coding is correct, but it's just a basic understanding of jQuery Mobile that I'm missing. Can I change something to make this work? It could really be awesome!
So, I found a way to fix it, but not really a solution to the original problem.
I've added rel="external" to the tags pointing to the pages where I had problems. In this way it will not use the AJAX system to load these pages, but do it in a regular way. This solved my problem, but now I can't make any fancy transitions.
I create simple image slider, using jQuery. Tested on all browers. All works fine, but not in WinXP Safari. When i open another tab and load other website, and then focus again on my jQuery slider website tab - Safari crashes. Its happend only when my slider website actually animate images using fadeIn effect. When i try to switch tabs on my site, Safari crashes. I find what causes that, but not find an solution to the problem. Problem is probably with window resize and functions defines of dimensions of images and DIVs. And/or maybe setInterval function. I find many websites with different javascript and jQuery scripts with the same problem and no solutions (i.e. http://www.jssor.com/demos/banner-slider.html).
I find solution. Problem disappeared when i start script from:
$(window).focusout(function() {
if (navigator.userAgent.indexOf("Safari") > -1) {
location.reload();
}
});
I hope, that will help in some other problems with Safari.
Hi I have been using Rokstories, a mootools javascript slideshow in Joomla, I am having a very odd problem with Rokstories in IE . I have uploaded a temp copy to my server to show everyone.
If you click on my link in IE , the page loads and Rokstories works as normal, sliding from left to right every few seconds......click one of the other menu links, then go back to the home page and Rokstories does something very odd, the dots move along to say that it is going between slides, but the actual slide stays put and dont move.
If you clear your cache and reload the page it works fine again until you browse to another menu item and come back, then the problem starts again.
I have tested this with IE8 and get the problem, I have also tried it in Chrome & Firefox and done see a problem.
http://www.key4design.co.uk/test/index.php
The first thing I notice (apart from the Google Maps API key alert) is that IE throws an error:
Line: 989
Error: 'Cufon' is undefined
Looking on Chrome/Safari/Firefox all throw up 404 on cufon-yui.js & /plugins/system/Cufon/key4font_400-key4font_700-key4font_italic_400-key4font_600.font.js
Our experience has been the IE will sometimes fail when JS files aren't in cache when it expects them to be. You might want to fix those first.