I'm currently building a responsive website based on the jQuery Mobile framework (version 1.3.2). Everything I need seems to work properly (panel menus, fixed header, AJAX page loading), except for one little thing that's driving me completely nuts: jQuery Mobile makes the page jump 1 pixel on every load. It does not happen in Mobile Safari, but in Chrome and Safari on the desktop.
I did some research online and I found out that
$.mobile.defaultHomeScroll = 0;
solves the 1 pixel problem in Chrome and Safari on the desktop, but creates the 1 pixel problem in Mobile Safari. Is this a common jQuery Mobile problem? Why does it happen and how can I get rid of it on all devices?
Thanks a million!
Related
I've got a large mvc 5 bootstrap web page that's repeatedly causing IE to crash. The page has a large number of bootstrap accordions with jquery datatables in. The page loads fine but if you scroll too fast then a small white rectangle appears in the upper left side of the page and IE stops responding.
The page is fine with a much reduced amount of data, it's fine in chrome and its fine if you tick the "Use software rendering instead of GPU rendering" option in IE.
At the moment my solution is to display a warning on the page to the users that they need to tick that box if I've got more than 100 rows of data but especially as that option requires a restart of IE it's not ideal.
How can I go about fixing this, is it something anyone else has experienced?
ok, fixed but I'm not sure it's applicable for anyone else. I was using a old version of datatables (1.10.7) So I updated to the latest and it stopped happening but the memory usage still built up whilst the page was just sitting there. I removed the flash buttons and changed them to the html5 buttons and everything was much much better.
I am using JQueryMobile to build an application that will mainly run on a Linux-based touch device with Firefox.
My issue is that, with JQM, when page contents cannot fit on the screen, the web browser displays a vertical scrollbar displays a vertical scrollbar
There is no such issue with Sencha and Dojo. They both behave like if they were running on a touch-based device, even with desktop web browser (reduce the height of your browser window) :
Sencha scrolling list
Dojo scrolling list
So, how can I make JQM to be touch-friendly when running on a desktop web browser ?
It seems that there is no really good JS and/or CSS solution for this issue.
Hiding the scrollbars with CSS (overflow-y: hidden;) prevents scrolling and mess JQM touch events.
I found a workaround by using a Firefox plugin (Grab and Drag), which is an acceptable solution since I control the device that runs the browser.
It works fine, but it is not a pure JS/HTML/CSS solution...
I've happily developed a mobile website using JQuery Mobile, and everything works beautifully except for a noticeable delay hiding the browser address bar on the homepage (around 5 seconds on iOS Safari).
AJAX transitions mean it's always hidden from that point on, but on the opening page the site logo is hidden for up to 5 seconds after the page has loaded, giving it a very unbranded and confusing feel for the user.
Can anyone think of any reasons for the delay / ways to speed it up? There are no large images loading on the page, putting an alert in the window load event fires way before the address bar is hidden and the setTimeout delays on the code firing in the JQuery Mobile code are only of the order of 20 ms.
Thanks in advance, Ted
I use Mobile Boilerplate's MBP.hideUrlBarOnLoad() and am not experiencing a five second delay.
Hide URL Bar
MBP.hideUrlBarOnLoad is used to hide the URL bar at the top of mobile
Safari on your iOS. Mobile space is limited and this helps to leverage
every pixel on the screen to maximize display area.
Sadly I've had to resort to a pretty hacky solution to this.
I've added a dummy 60px high spacer div at the top of the page, which pushes down the title, so it is visible at all times. This is then hidden by Javascript after 5 second setTimeout call, which is roughly equivalent to the delay we get on the url bar being auto-hidden by JQuery mobile.
This is only necessary on the start page, and other ones that we've had to load on rel="external" links, due to us making the error of mixing an ASP.net site that requires postback with JQuery mobile, but that's another story...
I've seen this happen when the content is Safari "Reader" compatible (when you see the "Reader" label next to the url on the url bar). I'm not sure but if this is the case maybe you could try to make your content less Reader compatible.
I am trying to open a specific page of a pdf (for example, http://cb.vu/unixtoolbox.pdf#page=14) inside an iFrame. While it works on desktop browsers, it is not working on an iPad.
Also noticing that, this does not work on the iPad even without the iFrame if I want to go the page 14 by typing http://cb.vu/unixtoolbox.pdf#page=14 directly in the address bar of mobile safari.
Has any of you came across this problem? If so, how did you solve it?
Thanks a lot for any help!
I am just finishing off a mobile web application for a client. I have written it using MVC3 and Razor and using jQuery Mobile. Something I hadn't noticed but the client has is that Safari (and only Safari) seems to be able to move around the screen when using the web application. Difficult to explain here but you can slide the whole browser to the left, right, up and down leaving a Grey background behind it, this is not something that other mobile sites do. Does anyone have an idea of what this might be? I don't even know where to start with it! Thanks in advance to all who contribute.
I suppose it has to do with the issue described in this question: jQuery - draggable images on iPad / iPhone - how to integrate event.preventDefault();?
Ok for anyone who comes across this I have found the solution. The css that comes with the jquery mobile framework contains the class ui-body-c (with the c being replaced by other letters dependiong on theme). In this class there is a border: 1px solid #ccc;, removing this has removed the issue without changing any styling on the site.