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.
Related
I am having a problem with making my mobile app home screen look like the image below, I have tried using grids but everything aligns to the left.
Has anyone successfully used grids in jquery mobile as home screen with icons?
I created a quick example that should help you on how to create such a home screen.The reason everything aligns to the left in your trys might be because you added style="text-align: left" to your grids? Cant really tell without any code from your side. Here is the
Example
I don't know if this is something that can be helped, but when I tap and hold on a web page in mobile safari, or in cordova/phonegap-made apps run in iOS, there is this pretty useless empty "tooltip" popping up close to the top of the viewport, and it only moves horizontally across the screen.
Here is a screenshot of what I'm talking about (that annoying thing circled in red that totally gives away that this is a cordova app)
My question being : is it possible to prevent this behavior, and how ? It seems to not be present on anchor <a> anchor elements but putting anchors all over the place seems like overkill for this.
And if anyone knows, just so I go to bed a little less stupid, what is this feature called and what is it for exactly ?
I already have the following css properties in my body
-webkit-user-select: none;
and
-webkit-touch-callout: none;
to prevent the text selection and the copy and save of images.
I've downloaded other phonegap-made apps from the App Store and they too have this feature, so maybe there's no fixing it.
Anyways, thanks for taking the time to read this.
It's a bug on the UIWebview
It's been fixed on cordova and will be available on next release, but you can use this plugin meanwhile
https://github.com/EddyVerbruggen/cordova-plugin-ios-longpress-fix
I am trying to use the iOS smart app banner on my website. I am currently using jquery mobile 1.3.1 for development. The problem I'm having is jquery mobile automatically hides the address bar on page load. Since the smart app banner appears to be a part of the address bar, the user cannot see the smart app banner unless they scroll up. Is there anyway around this problem? Ideally the page would load and show the smart app banner and not the address bar. However, at this point I would be fine showing both on page load. I know the folks over at HTML5 Boilerplate have solved this issue. See:
Hiding address bar without hiding the smart app banner on iOS 6
The problem with this solution for me is turning off the hide address bar feature in jquery mobile. I can't seem to figure out how to accomplish without altering the jquery mobile core code. I don't really want to alter the jquery mobile code. Mainly because I don't like changing code that I have to update when a new version comes out. Plus I am pulling the jquery mobile file from jquery's CDN. I would like to find another way to solve this problem. Any ideas? Thank.
Add
window.oldScroll = window.scrollTo;
window.scrollTo = function(){return false;};
before you load jquery mobile. This will override Jquery mobile hiding. then you can use the helper.js by reassigning scrollTo after jquery mobile script.
I'm building a mobile app using jQuery Mobile 1.3.0, EaselJs 0.6.0 and TweenJs 0.4.0.
So, when I load the page, some content gets visually duplicated. The DIVs are not really duplicated, it is just visual.
This bug only appears on Safari (Windows + OSX).
If I click and slide to select the page, the bug disappears.
If I switch page (with jQuery Mobile slide transition), it also disappears.
Here is a screenshot:
My code is massive so I cannot really post it fully here. I've just spent 2 hours playing around with my code to try to fix this. I really have no clue.
If you have an idea and need more information, then please let me know.
Not a pretty answer, but a workaround that worked for quite a few:
This sounds like a possible racing-condition, you can try setting a timeout(couple MS) when the page is loaded and then have it re-renderd after that timeout through switching display: none/block on the body.
As we all know, iPad do not support the <frame> element, but both Gmail and Ymail could do something similar by creating a 2pane style , and the navi pane (left one) could scroll (in ipad style). May I ask if anyone do have the idea how it created?
Thank you very much.
I don't actually know for sure how they've done it (I can't seem to reach mobile gmail in a desktop browser, and I can't find a view-source feature on my iPad) but I suspect that it's not as complicated as it looks.
Keep in mind that in a regular browser, when there is too much content we get a scrollbar. That's not how the iPad renders long pages. On the iPad, if there is too much content we never get a scrollbar, scrolling is achieved by sliding the content up and down. So what we should imagine is that this is two panes with scrollbars, because that's how it would show up in a normal browser.
From there, it's a much simpler problem. It's probably just two divs floated in a standard two-column layout, each with their overflow set to scroll. Something super-basic, like:
<div>
{the nav list of emails goes here}
</div>
<div>
{the currently-open email goes here}
</div>
<style>
div {
float: left;
width: 50%;
overflow-y: scroll;
}
</style>
There's probably something fancy in there to make each div consume 100% of the available height (it's probably not as simple as height: 100%) but already if either div contains enough content, we'll get individual vertical scrollbars which the iPad will hide, giving us that neat sliding-scroll gesture instead.
I've tested a few of my own apps which were build back in time with Frames. They all worked "normally" are you sure you didnt use the wrong Doctype for your HTML?
Individual block elements with overflow-y:scroll are only scrollable with two fingers on the iPad. That's just the way it is.
So how does Gmail do it differently? Manually, with JavaScript, reacting to various touch events.
Your best bet at the moment is to use iScroll. This used to be a bit un-smooth (compared to Gmail and others' implementations), but the latest version is really good. Try their demo.
It works on iPad/iPhone, Android, and you can even use it in a normal browser using your mouse. It has the nice elastic effect when you reach the top/bottom of a scrollable area, and it has the iOS-style scroll indicator thing that appears on the right during a scroll. It's almost as smooth as scrolling on a native app.
By the way, if you want to examine an iPad-specific website's source, the easiest way is using Safari (I've tried this on 5.0.3 for Mac, but probably works on other platforms too). Turn on the Develop menu (Safari>Preferences>Advanced), then you can set your User Agent to iPad.
You can do the same thing in Firefox, posing as an iPad, but I often find the websites look completely broken. I think this is because many iPad/Android-specific websites rely on Webkit features that aren't present in Gecko. In fact, Apple's iPad guide site, which also uses a two-pane scrolling technique, simply rejects you if you're not (a) sending an iOS User Agent string and (b) using Webkit. And Chrome doesn't have an easy way to change your User Agent string. So Safari is the easiest way to examine these kind of sites.