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.
Related
When I press the browser back button, my dialog shows again. How can I prevent this?
Html
<body>
<div data-role="page" id="page1">
click me
....stuff...
</div>
<div data-dialog="true" data-role="dialog" id="dialog">
go to p2
....stuff...
</div>
<div data-role="page" id="page2">
....stuff...
</div>
</body>
Model:
function UserViewModel() {
self.startEvacuation = function () {
$.mobile.navigate("#page2");
}
};
In my jQuery mobile app for android , I have a long list view inside a popup , I have used iscroll because overflow:auto is not working on android 2.3.6 , and scrolling now is working ok on all android devices after using iscroll , but the problem is that the scroll bar starts from the header of the popup to the end of the popup ( along the popup height) not the list view height "popup content" although i applied the iscroll to the div that contains the listview. How can I fix this problem and make the scroll appears a long the list height? please help me
This is the iscroll.js that i use jsfiddle
<head>
<script type="text/javascript" src="js/iscroll.js"></script>
</head>
<body>
<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>
</body>
JS code
$(document).on( 'pagecreate', '#index',function(){
var scrollObj;
// to make the popup take the screen width ,height
var window_Width = $( window ).width();
var window_Height = $(window).height();
$('#MyPOPUP').css('width', window_Width-30 );
$('#scrollContent').css('width', window_Width-30 );
$('#MyPOPUP').css('height', window_Height-(window_Height/4) );
$('#scrollContent').css('height', window_Height-(window_Height/4)-87 );
scrollObj = new iScroll('scrollContent', { vScrollbar: true, hScrollbar:false,fixedScrollbar : true,momentum: true});
for(var i=1;i<=50;i++) {
$('#countrieslist').append('<li id="'+i+'"><font>Country' + i +'</font></li>');
}
$('#countrieslist').listview('refresh');
setTimeout(function () {
scrollObj.refresh();
}, 0);
$('#Btn1').on('click', function(){
$(this).attr('href','#MyPOPUP');
});
$('#countrieslist').on('click','li', function() {
selected_elem = $(this).attr('id');
console.log('you selected' + selected_elem);
$('#MyPOPUP').popup('close');
});
});
CSS
#scrollContent{
padding: 0 !important;
}
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);
I have a jqueryUI accordion which looks great. I will have around 10 section (headers) which will just fit on the screen. However, on a smaller screen it will cut off some of my section headers. (I can already simulate this by shrinking the browser window). How can I have a scrollbar appear if the accordion headers don't fit vertically?
The accordion is wrapped in a div with no options set. It's as if a need a MIN height for the div to ensure all the headers can appear, with some room for the section content.
My full code is as follows:
<script>
$(function() {
$( "#settingsnavigation" ).accordion({
heightStyle: "fill",
clearStyle: true,
autoHeight: false }
);
});
</script>
<div id="settingsnavigation" style="width:220px">
<h3>General</h3>
<div>
<div class="settingsubsection">User</div>
<div class="settingsubsection">Security</div>
<div class="settingsubsection">Units & Ranges</div>
<div class="settingsubsection">Notifications</div>
<div class="settingsubsection">Vehicles</div>
<div class="settingsubsection">Device</div>
</div>
<h3>Financial</h3>
<div>
<div class="settingsubsection">Balance</div>
<div class="settingsubsection">History</div>
<div class="settingsubsection">Purchase</div>
</div>
<h3>Vehicle: Cadillac Seville STS</h3>
<div>
<div class="settingsubsection">General</div>
<div class="settingsubsection">Units & Ranges</div>
<div class="settingsubsection">Select Reminders</div>
<div class="settingsubsection">Edit Reminders</div>
</div>
</div>
CSS for the container div should be
overflow: auto;
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);
});