Search jQuery

jQuery Forum

Screen name:
alain.zelink

alain.zelink's Profile

3 Posts

11 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

How to get iscrollview to go to top on new display ?
[4Replies]
- 18-Aug-2013 02:13 PM
- Forum: jQuery Mobile
JQM 1.3 Iscrollview 1.3.1

I 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>

overlap in slide transition Jquery Mobile 1.3.1 (Android)
[0Replies]
- 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 ?

jquery mobile custom 1.3.1 - button icons not showing

[17Replies]

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 »

Response title

Attachments

jQuery Forum

Activity Trend