- Screen name: alain.zelink
alain.zelink's Profile
3 Posts
16 Responses
0
Followers
Show:
- Expanded view
- List view
Private Message
- 18-Aug-2013 02:13 PM
- Forum: jQuery Mobile
JQM 1.3 Iscrollview 1.3.1I have a list of links to events using data-iscroll. Each event is also a list (title/date-location/description).Each time I click on the event list, the event is displayed. If I scroll down the content, when I go back to the event list and then click on another event, the view scrolls to where the previous view was stopped.I've successfully stopped this by launching an empty() on the event content and then calling updatelayout on the back button of the event content :$("#bhome").on('vclick', function(e) {$('#econt').empty().trigger('updatelayout');$.mobile.loading('show');e.preventDefault();$.mobile.changePage("#page1");});But, of course, android users don't use a back button and use the back key instead.I've tried to empty() and updatelayout on the pagebeforehide event but apparently, the position is saved before that event happens :$('#event').on('pagebeforehide', function(event, data) {$('#econt').empty();$('#econt').trigger('updatelayout');$('#escroll').trigger('updatelayout');});I've also tried to use the silentscroll function but it doesn't either :$(document).on('pageshow', '#event', function(){$.mobile.silentScroll(0);});How can I make sure that on viewing a new event, the position is back to the top ?Here is a snippet of my index.html file :<div id='container'><div data-role='page' id='page1' data-theme="c" style="background: black;"></div><div data-iscroll style='background-color:#ddd;'><ul id="el"></ul></div><div data-role='footer' data-position='fixed' data-theme="a" data-tap-toggle="false"></div></div><div data-role="page" id="event" data-theme="c" style="background:black;"><div data-role='header' data-position='fixed' data-theme="a" style="height:42px;"><a id="bhome" class="ui-btn-left ret" data-icon="arrow-l" href="#" data-iconshadow="false">Back</a><h1 id='eh1'></h1></div><div data-iscroll style='background-color:white;' id='escroll'><ul id='econt'></ul></div></div>- 24-Jun-2013 06:32 AM
- Forum: jQuery Mobile
JQM 1.3.1 - JQ 1.9.1 - Chrome on Android 4.2
I have a home page with a list of 50 items which point to another page.
When I use the slide transition, the first slide out and slide back are perfect. But the second one and all the ones after are a bit different. It looks more like an overlap when going from the list to the event's page. Also, the transition seems a bit faster.
I removed all my css to make sure that none of them were interacting with the transition.
Here is the code (it includes the container id and webkit-backface-visibility:hidden; hacks that many have suggested) :
http://test.wouf.it/slideandroid/
If I look on firebug, the attributes of the events div change after the first call :
Before :
<div id="container" class="ui-mobile-viewport ui-overlay-c">
<div id="page1" class="ui-page ui-body-c ui-page-header-fixed iscroll-page ui-page-active" style="background: none repeat scroll 0% 0% black; padding-top: 44px; min-height: 618px;" data-theme="c" data-role="page" data-url="page1" tabindex="0">
<div id="event" style="background:black;" data-theme="c" data-role="page" data-url="event">
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default">
After :
<div id="container" class="ui-mobile-viewport ui-overlay-c">
<div id="page1" class="ui-page ui-body-c ui-page-header-fixed iscroll-page ui-page-active" style="background: none repeat scroll 0% 0% black; padding-top: 44px; min-height: 618px;" data-theme="c" data-role="page" data-url="page1" tabindex="0">
<div id="event" style="background: none repeat scroll 0% 0% black; min-height: 662px;" data-theme="c" data-role="page" data-url="event" tabindex="0" class="ui-page ui-body-c">
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default">
Could it be a reason for the change ?- 31-May-2013 10:20 AM
- Forum: jQuery Mobile
Hello I'm trying to use jquery mobile custom to remove all the things I don't need (sliders, panels, etc.).
I've downloaded jquery mobile custom 1.3.1 with all the options selected and when I look at the result on a browser, everything works (transition, arrow buttons on listviews) but the back, refresh and home buttons don't show up.
I used firebug to check if I was missing something but everything seems OK.
here is a sample of my code :
- <link rel='stylesheet' href='./extnew/jquery.mobile.custom.structure.min.css'/>
- <link rel='stylesheet' href='./extnew/jquery.mobile.custom.theme.min.css'/>
- <script src='./extnew/jquery.mobile.custom.min.js'></script>
- ....
- <div data-role='page' id='page1' data-theme='c' class='pull-demo-page'>
- <div data-role='header' data-theme='b' data-position='fixed'>
- <a href="#refr" data-icon="refresh" class="ui-btn-left" data-iconpos="notext"></a>
The icons do appear if I use the non custom jquery mobile.
Any pointer on what is missing ?
Thank you.
- «Prev
- Next »
Moderate user : alain.zelink
© 2013 jQuery Foundation
Sponsored by and others.

