I am trying to use iScroll for my webpage and it is behaving weird.
My markup looks something like this.
<div id="content">
<div id="some-header">
</div>
<div id="wrapper">
<ul>
<li></li>
</ul>
</div>
</div>
Now both header and wrapper have heights and they both are positioned absolute.
when I try to scroll, it does scroll but its kind of stuck, when I stop scrolling it returns back to the starting point. Weird :(
Any Sugestions.
btw this is on ipad safari.
Thanks
Dhaval
I met the same problem with you.Did you use ajax the render in the scroller element.
Finally I use iscroll pull to refresh to solve this problem.
This is the question I asked : When I am using ajax to render the Scroller part iScroll doesn't work
Related
I am using Framework7 for the first time in a Cordova iOS application and I really like the look of the UI but I have run into an issue where the page will not scroll vertically that I can not figure out. I have attempted to debug the code by replacing 'overflow:hidden' in places with 'overflow:auto' but that does not seem to resolve the issue.
Has anyone else run into this before? Any help wuold be greatly appreciated as I am really stumped on this one.
EDIT: I think I have narrowed down the issue to the overflow:hidden CSS attribute on the .view and .pages classes. If I remove that attribute the page scrolls, but now the header and footer are not attached to the top and bottom of the app.
I was able to figure out that the issue was caused by missing the page-content div. I added this div just after the data-page="index and it started to scroll.
Example:
<div class="pages navbar-through toolbar-through">
<div data-page="index" class="page"> /* this is what I was missing */
<div class="page-content">
/* content here */
</div>
</div>
</div>
i am using iScrollView on my App (PhoneGap, JQM 1.3, Android). Excellent work on this. It's a gem.
Actually I'm testing on a Samsung Galaxy S3.
My first page is large in vertical dimension (round about 6000px) consisting out of a bunch of <div> containers with images (with external src).
These DIV - containers are dynamicly added to the content div, based upon Json-data. Then i'm doing a refresh. Everything is fine so far.
But what i've noticed is, when omitting the data-iscroll attribute in my content <div> , scrolling is much smoother and not choppy at all.
But when adding the data-iscroll attribute to the content-DIV, scrolling is choppy.
I thought it was because of the anchor-tag's or the images, so i replaced the div-containers with spans and put some text to it. I copied about 30 spans and watched how scrolling behaves. It is choppy - even though with spans. Then i took just 15 spans and scrolling was a bit smoother. It has something to do with the amount of containers within the content-div.
My markup looks in a more simplified form like this:
<div data-role="content" data-iscroll class="iscroll-wrapper">
<div class="iscroll-scroller">
<div class="iscroll-content">
<p>This is some content that I want to scroll</p>
<p>This is some content that I want to scroll</p>
<p>This is some content that I want to scroll</p>
<p>This is some content that I want to scroll</p>
<p>This is some content that I want to scroll</p>
<p>This is some content that I want to scroll</p>
<p>This is some more content</p>
... more content up to 6000px in vertical direction
</div>
</div>
</div>
Can anyone confirm this behaviour? Is there a workaround available?
Ok, finally got the answer from Jon Tara himself.
iScrollView is definately only for WebViews with small and not complex markup.
Read here
I have an issue with Jquery mobile persistent navbar. I am developing a mobile app using phonegap to deploy on iOS and Android. I have a navbar to navigate from one page to another. (footer/navbar fixed).
Example on: http://jquerymobile.com/demos/1.2.0/docs/toolbars/footer-persist-a.html
The navigation works, the bar persists when rendered in a browser such as chrome or safari. But when I upload the app to the Android emulator or iOS emulator, clicking a link from the navbar makes the whole screen go white for a sec and then re-appears. (Kind of a flicker)
Can someone help with this?
Here's my code for the footer: (a.html,b.html... are the name of my pages)
<div data-role="footer" data-id="foo1" data-position="fixed" data-tap-toggle="false">
<div data-role="navbar">
<ul>
<li>Info</li>
<li><a href="b.html" data-prefetch rel="external" >Friends</a></li>
<li>Albums</li>
<li>Emails</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
Thank you !
I figured it out. It's a combination of what you said and what I had.
So to stop the Jquery mobile footer from flickering when you upload to Android or iOS, you need to set the following properties in your div:
page1.html:
<div data-position="fixed" data-tap-toggle="false" data-role="footer" data-id="f1">
Page 1 NAV
Page 2 NAV
</div>
page2.html
<div data-position="fixed" data-tap-toggle="false" data-role="footer" data-id="f1">
Page 1 NAV
Page 2 NAV
</div>
The data-id="f1" has to match in both pages so that jquery mobile knows that this is the same footer that was on the previous page therefore it won't render it again.
Let me know if you need help with this.
Regards,
Tony
Same problem here (I was trying to fix it for over 3 hours with no luck trying lots of stuff I found on the web but no luck).
If you remove the entire footer and add a button in the content area the transition works like a charm all of a sudden. So one workaround would be to fake the navbar via buttons from the content area you place at the bottom of the page... Not very pretty though.
<div data-role="content">
<h1>
Page Nav and Dialog Example
</h1>
<a data-role="button" href="index2.html">Page Navigation</a></div>
I'm using this with a custom-scripting.js:
$(document).bind("mobileinit", function(){
$.mobile.defaultPageTransition = 'none';
$.mobile.defaultDialogTransition = 'none';
$.mobile.useFastClick = true;});
Referencing it via:
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script src="custom-scripting.js"></script>
<script type="text/javascript" src="jquery.mobile-1.2.0.js"></script>
Maybe anyone else found a solution for using navbar without flickering?
Without using the navbar in the footer it stops flickering (tested on iPhone4 iOS5). So you can use the footer but don't use navbar inside it :-)
But attention: If you use data-position="fixed" it will start to flicker again...
<div data-role="footer">
<a data-role="button" href="#">Main</a>
<a data-role="button" href="favorites.html">Favorites</a>
<a data-role="button" href="more.html">More</a>
</div>
Hope it helps :-)
I would like to add a button to our Jquery Mobile webapp. I added a screenshot from the FourSquare App which show the upperright 'checkin' button and icon, we would love to implement in our HEADER..
http://www.iclarified.com/images/news/26011/99138/99138.png
We can;t figure out how to imlement this. We now the Navbar is able to get us a button style like the FSQ button, but we would ONLY have one of this button's in our Header, aligned right.
Has anybody already designed something like this and could help us?
Yes it can be done, here is a quick example:
<body>
<div data-role="page">
<div data-role="header">
<h1>Foursquare Like</h1>
Checkin
</div>
<div data-role="content">
<p>This is a test page</p>
</div>
</div>
</body>
See more here: http://jquerymobile.com/demos/1.2.0/docs/toolbars/docs-headers.html
jsFiddle Example: http://jsfiddle.net/Twisty/xWzFt/
Has anyone actually succeeded in doing this it seems like there are so many attempts on line but no one has a definite solution. I've tried plugins that a lot of people suggested but nothing is working.
I just want to have a Google Map go full dimensions (apart from header and footer) and then on another page I want a div to do the same
JQuery-Mobile content area 100% height between head and foot
In the meantime I would recommend to use iScroll [with CSS position:fixed; for header&footer in iOS5 only]
In iScroll you just wrap the content into a wrapper & scroller class, the rest is done by the script. Here's the homepage http://cubiq.org/iscroll-4 and here's some code:
<div id="content" data-role="content">
<div id="wrapper">
<div id="scroller">
your content here.
</div>
</div>
</div>
For iScroll initialization use the documentation provided on cubiq's site.
zY