How to get iscrollview to go to top on new display? - 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's not working 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>
<!-- data-role='content' entraine un scroll horizontal -->
<div data-iscroll style='background-color:white;' id='escroll'>
<ul id='econt'></ul>
</div>
</div>

The answer was given by the iscrollview author (works perfectly) :
$("#escroll").iscrollview("scrollTo", 0, 0, 0, false);

Related

How to change div on orientation of mobile with jquery mobile

i am new in jquery mobile. i want to change HTML on landscape. if user in portrait it show image and text (rotate to landscape), if user rotate his mobile then the main content is show.
In your page have a DIV for the message in portrait mode and then a separate DIV for the regular content in landscape mode:
<div data-role="page" id="page1">
<div id="head" data-role="header">
<h1>Page 1</h1>
</div>
<div id="cont" role="main" class="ui-content">
<div id="portrait">
<img src="http://lorempixel.com/300/180/technics/1/" />
<p>Please turn your device to Landscape mode</p>
</div>
<div id="landscape">
You are now ready to go!
</div>
</div>
</div>
Then use the orientationchange event to show the appropriate DIV:
$( window ).on( "orientationchange", function( event ) {
if (event.orientation == "portrait"){
$('#portrait').show();
$('#landscape').hide();
} else {
$('#portrait').hide();
$('#landscape').show();
}
});
$(document).on("pagecreate","#page1", function(){
$( window ).trigger("orientationchange");
});
DEMO
If you run the demo on a PC, resize the window to see it change.

jQuery Mobile - Prevent page navigation after changepage event is triggered

Basically the use case is this:
I have a form that the user is filling out a form and accidentally click another link. In the pagebeforehide event, I want to stop the navigation. I tried to do
event.stopPropagation();
event.preventDefault();
but neither of them stop the navigation from happening. Does anyone have any idea how to do this? It's not immediately clear how to handle this.
event.preventDefault(); should work if all your code is in the right places. Here is a simple example:
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1>My page</h1>
</div>
<div role="main" class="ui-content">
<label for="text-basic">Type 1 to allow navigation:</label>
<input type="text" name="text-basic" id="text-basic" value="" />
<br /><br />
<a class="ui-btn" href="#page2">Go to page 2</a>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<h1>My page footer</h1>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1>My page 2</h1>
</div>
<div role="main" class="ui-content">
page 2
<a class="ui-btn" href="#page1">Go back to page 1</a>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<h1>My page footer</h1>
</div>
</div>
I have 2 pages and only want the user to go to page 2 if he/she types "1" into the text box.
$(document).on("pagecreate", "#page1", function(){
$( "body" ).on( "pagecontainerbeforetransition", function( event, ui ) {
var currPage = $( "body" ).pagecontainer( "getActivePage" ).prop("id");
if (currPage == "page1"){
var val = $("#text-basic").val();
if (val != "1") {
alert("you must enter 1 in the text box!");
event.preventDefault();
} else {
$("#text-basic").val("");
}
}
});
});
In the pagecontainer widget pagecontainerbeforetransition event, I see which page we are currently looking at, if it is page1, then check what the user has entered in the textbox. If I do not find the string "1", prevent navigation and alert the user.
Here is a working DEMO

Change the background color of listview item when its selected in jquery mobile 1.4.0

I have a list view inside a popup , when the user select a list element I want to change this element "li" background color , I have tried the following code it was working on jQuery mobile 1.3.2 but it didn't work when i upgraded my app to 1.4.0 , How can I change the background color of the list element when the user click on it ? please help me
<div data-role="page" id="index">
<div data-role="header" data-theme="b">Main</div>
<div data-role="content">
Show Popup
</div>
<div data-role="popup" id="MyPOPUP" data-position-to="window" data-corners="false" data- overlay-theme="a" data-dismissible="false">
<div data-role="header" data-theme="a">
<div style="text-align:center;float:center;padding-top:11px;">
<font size="6px" color="white">Countries</font>
</div>
</div>
<div id="scrollContent" class="content" data-role="content" style="background-color: white;">
<ul data-role="listview" id="countrieslist" style="margin: 0 !important;">
</ul>
</div>
</div>
</div>
Java script code
$('#index').on( 'pageinit',function(){
for(var i=1;i<=50;i++)
{
$('#countrieslist').append('<li id="'+i+'">'+''+'<font>'+Country+i+'</font>' +'</li>');
}
$('#countrieslist').listview('refresh');
});
$('#Btn1').on('touchstart', function(){
$(this).css({background: 'white'});
$(this).attr('href','#MyPOPUP');
});
$('#countrieslist').on('click','li', function() {
$(this).css({background: 'blue'});
selected_elem = $(this).attr('id');
alert('you selected' + selected_elem);
$('#MyPOPUP').popup('close');
});
You have a little typo in your loop that creates the countries, but other than that the code seems to work,
Here is a working DEMO
Because pageinit is deprecated n 1.4, I have used pagecreate; and in the for loop the word country after the font tag should be within the single quotes as it is not a variable. Also, in the li click, I reset all other countries to transparent background before setting the newly selected one:
$(document).on( 'pagecreate', '#index',function(){
for(var i=1;i<=50;i++) {
$('#countrieslist').append('<li id="'+i+'"><font>Country' + i +'</font></li>');
}
$('#countrieslist').listview('refresh');
$('#Btn1').on('click', function(){
$(this).css({background: 'white'});
$(this).attr('href','#MyPOPUP');
});
$('#countrieslist').on('click','li', function() {
$('#countrieslist li').css({background: 'transparent'});
$(this).css({background: 'blue'});
selected_elem = $(this).attr('id');
alert('you selected' + selected_elem);
$('#MyPOPUP').popup('close');
});
});

jQuery Mobile dialog and Backbone js

I have a backbone app using jquery mobile. I am trying to use a dialog popup however the problem is when i click the link #popupSuccess it doesn't activate the modal because i assume backbone is trapping it. Any ideas?
This is my modal code
<a class="modalLink" id="modalSuccessTrigger" href="#popupSuccess" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-transition="pop" data-icon="delete" data-theme="b">Success</a>
<div data-role="popup" id="popupSuccess" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:400px;" class="ui-corner-all modalLinkCont">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1>Correct!</h1>
</div>
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content" style="background-color:white">
<h3 class="ui-title">That is correct. Tap to continue to level 2</h3>
Contineu
</div>
</div>
You need to programmatically initiate the popup:
In your backbone view:
events: {
'click #modalSuccessTrigger': 'openPopUp'
},
openPopUp: function(e) {
e.preventDefault()
$('#modalSuccessTrigger').popup('open')
}
for more details refer to doc: http://jquerymobile.com/demos/1.2.0-alpha.1/docs/pages/popup/index.html
To handle this issue I use to prevent the backbone routing and activate the popup handling for links marked as data-rel="popup"
$(document).ready(function(){
($('a[data-rel="popup"]')).on('click', function(event) {
event.preventDefault();
event.stopImmediatePropagation();
var target = $(this).attr("href");
$(target).popup('open');
});
});

JQM 1.3 changePage 'role dialog' fails in Chrome

I need to change to a different page on start up and I want it to be a dialog.
This works in 1.2 and works with IE and FireFox in 1.3.
Chrome displays the dialog then immediately reverts to the first page.
If I remove the "role: dialog" it works with everyone. I've tried a hidden hyperlink that I force a click on ... same result. Chrome (latest version) reverts to page1.
Any ideas on how to fix this?
Here is a simplified fiddle http://jsfiddle.net/stocksp/P4ZWj/3/
div data-role="page" id="page1">
<div data-role="content">
<h6>page one content</h6>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1 class="title">My DIALOG </h1>
</div><!-- /header -->
<div data-role="content">
Dialog Content
</div>
</div>
$(document).delegate("#page1", "pageinit", function () {
$.mobile.changePage('#page2', { transition: 'pop', role: 'dialog' });
});
Quick workaround til this is fixed: wrap the changePage method in a setTimeout...
$(document).delegate("#page1", "pageinit", function () {
setTimeout(function () {
$.mobile.changePage('#page2', { transition: 'pop', role: 'dialog' });
}, 100);
});

Resources