I've seen some ScrollView examples on the JqueryMobile website. I tried to dowload the required additional css and js files, reference them, and setup a scrollviewer, but it doesn't work (actually, all my website stops working, showing only a white-empty page).
Any idea or alternative?
Thanks!
As alternatives, you can have a look at iscroll and a jquery plugin touch-scroll.
Related
I have a JQM 1.4 + Phonegap 3.3 app in which there is a long text page. I would like it to be scrollable. But the touch scroll doesn't work in Android 2.3.
How to fix this ?
Thanks
CSS overflow scroll doesn't work on android 2.x, so you have to do that by yourself. Some solution here:
use javascript plugin, like iScroll or touchScroll
make scroll button.
You can see my app at kogarah.herokuapp.com
I'm having a problem getting this to look ok in IE8 and I need to make it work with this version of the browser. I suspect it's something to do with container width.
The li in the navbar are all showing underneath each other rather than in a straight horizontal line, and there are similar issues with the main parts of the pages too, where I use bootstrap's grid system.
I have read the bootstrap documentation about IE8 compatibility but have still not been able to solve this.
If anyone can help I'd be very grateful.
Thanks
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.
I'd like to use this upgraded jQuery Mobile dual range slider.
jQuery Mobile dual range slider working but buggy
I need to use it with twitter bootstrap. However, jQuery Mobile doesn't play nice with Twitter bootstrap and is killing the dropdown menu when the javaScript files are placed at the bottom of the page (as per yslow). Here are 3 jsbin examples to illustrate the problem:
with jQuery Mobile added, twitter bootstrap menu fails:
http://jsbin.com/ibecox/1
without jQuery Mobile .js file, twitter bootstrap the menu works fine:
http://jsbin.com/ibecox/2
with all javaScript in the header (bad practice) the menu also works, but I'd need to avoid putting all the javaScript in the header:
http://jsbin.com/ibecox/3
I can see there's a broken link to the twitter bootstrap js, I've fixed it and your sample works fine for me, both the dropdown menu and the progress bar
If all you're trying to do is get jquerymobile's Range Slider to work with Bootstrap, you can use the Custom Download tool to download just the slice that (sort of) makes the Range Slider work.
What you get is unfortunately incomplete, and above all it doesn't self-initialize, so you'll need to do that manually:
$('div[data-role=rangeslider]').rangeslider();
And you'll need to apply some styles of your own to make up for a bit too much being left out in the custom download. But you will get Range Sliders without breaking Bootstrap.
The cause of the Bootstrap break when you use all of jquery mobile is more complex. The Init module applies a ton of classes all over your code, in particular .ui-btn to buttons. That's the main thing that blows up Bootstrap - the nav menu uses a button tag, and that tag gets that problematic class applied, and then in come all the problem styles from jquerymobile.
The hackier way to solve that in the large is to just use jquerymobile without the Init module then Init only what you need - hopefully their buttons aren't one of those things. The best way to solve it is pretty intense: Improve jquerymobile so that there's either no conflict with Bootstrap ever, or, some sort of special noBSconflict() method or something you can run that avoids applying classes that will break Bootstrap but otherwise proceeds as normal.
Here is the link:
http://www.gbin1.com/gbin1/admin/gbin1app.jsp
i'm using jquery mobile to display the page, but it looks jquery mobile is loading the page very slow. and also it's slow if you click navigation bar. How can i improve the performance? If i remove jquery mobile code, it's kind of faster. what's wrong with the jquery mobile?
Thanks a lot!
Maybe if you load some parts of the html with ajax it will be faster.. I don't know the exact size of the page because it stopped after 400KB