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;
}
Related
I have a set of 2 very basic pages in jQuery Mobile:
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
Header 1
</div>
<div data-role="content">
Content 1
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<button>next</button>
</div>
</div>
<div data-role="page2" id="page">
<div data-role="header">
Header 2
</div>
<div data-role="content">
Content 2
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<button>next</button>
</div>
</div>
On buttonclick I do a page-transition to the other page:
$("#page1 button").on("click", function(){
$.mobile.changePage($("#page2"), {transition: "slide", reverse: false, changeHash: false});
});
$("#page2 button").on("click", function(){
$.mobile.changePage($("#page1"), {transition: "slide", reverse: false, changeHash: false});
});
But while the transition is running, the footer jumps out of position and moves almost out of the page at the bottom of the page.
How can I avoid that sideeffect?
Beside your typo here: <div data-role="page2" id="page"> which shall be <div data-role="page" id="page2">, i think your question is interesting, because i believe you would like to explore the features of the fixed external toolbars of JQM 1.4.5:
From JQM documentation here Fixed external toolbars:
External toolbars are outside of the page they are not effected by
transition
Here is a simple example of navigation with an external toolbar, with just one header, one footer and one navigation button where the navigation link and page title are set dynamically:
$(function(){
$("[data-role='header'], [data-role='footer']").toolbar({
theme: "a",
position: "fixed",
tapToggle: false
});
});
$(document).on('click', '#btn-next', function () {
var pageId = $(":mobile-pagecontainer").pagecontainer("getActivePage").prop("id");
var pages = {"page2": "#page1", "page1": "#page2"};
$(":mobile-pagecontainer").pagecontainer("change", pages[pageId], {
transition: "slide",
reverse: false,
changeHash: false
});
});
$(document).on("pagecontainerchange", function() {
$("[data-role='header'] h2" ).text($(".ui-page-active").jqmData("title"));
});
.footer-button-left {
position: absolute !important;
margin: 0 !important;
top: auto !important;
bottom: 0.24em !important;
left: 0.4em !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="header">
<h2>Header</h2>
</div>
<div data-role="page" data-title="Header 1" id="page1">
<div data-role="content">
Content 1
</div>
</div>
<div data-role="page" data-title="Header 2" id="page2">
<div data-role="content">
Content 2
</div>
</div>
<div data-role="footer">
<h2>Footer</h2>
<button id="btn-next" class="ui-btn ui-corner-all ui-btn-inline ui-mini footer-button-left">next</button>
</div>
</body>
</html>
Please note, initial text in header & footer is required as placeholder, as well a bit of custom styling for the button inside the footer.
html :
<div data-role="page">
<div data-role="header" data-position="fixed" data-fullscreen="true" >
<div data-role="content" class="ui-content" id=""#article-page">
...
I'd like to prevent header/footer show up when swipe left/right or click a certain element in contents;
Otherwise, let header/footer show.
i tried preventDefault, not working.
$("#article-page").bind("swipeleft", function(evt){
evt.preventDefault();
navidown();
});
Test this.
<div data-role="header" data-position="fixed" data-fullscreen="true"
data-tap-toggle="false">
data-tap-toggle added.
$( "div[data-role=header]" ).toolbar( "hide" );
API
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');
});
});
I am creating a collapsible set dynamically. Like below
div = '<div data-role="collapsible" data-inset="false" data-iconpos="right" data-collapsible="true" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d"><h3>'+
row1["name"]+'<span class="ui-li-count ui-btn-up-c ui-btn-corner-all" data-iconpos="right">'+count+'</span></h3></div>';
Now i need to add a button to the each collapsible set and upon clicking on the button i need to get the collapsible element content but collapsible list should not expand.
How can i do that?
Thanks:)
Example
Working example: http://jsfiddle.net/Gajotres/z3hsb/
Description
What you need to understand here is how to use:
e.stopPropagation();
e.stopImmediatePropagation();
Your current problem is that click event is propagating through button and hitting collapsible, which in turn opens/closes it. It can be prevented with if functions stopPropagation() and stopImmediatePropagation() are used.
Code
HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<div id="List" data-role="collapsible-set" data-theme="b" data-content-theme="d">
<div id='ListItem' data-role='collapsible' data-content-theme='b' data-collapsed='true'>
<h3><p>Title</p>
<div id="button-set">
<input type='button' data-theme='b' value='Settings' data-mini='true' data-inline='true' data-icon='gear' data-icon-pos='top' id="show-content"/>
</div>
</h3>
<p>CONTENT</p>
</div>
</div>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
Javascript:
$(document).on('pagebeforeshow', '#index', function(){
$('#show-content').on('click', function(e) {
alert($('#ListItem').find('h3 p').text());
e.stopPropagation();
e.stopImmediatePropagation();
});
});
CSS:
#button-set {
float:right;
margin-top: -20px;
}
I create a list view dynamically, but i have no clue on how i get the data from the selected list to appear in the dialog box. I have tried several ways but all failed. The only thing i have got going correctly is calling the dialog on click.
I want to display the whole message in the pop up dialog box
my code
<body>
<div data-role="page" id="messages">
<div data-theme="a" data-role="header">
<a data-role="button" href="index.html" data-transition="slide"
data-icon="arrow-l" data-iconpos="left" class="ui-btn-left">
Back
</a>
Refresh
<h3>
Alerts
</h3>
</div>
<div data-role="content">
<script type="text/javascript">
$(document).on("pagebeforeshow", "#messages", function() {
var uid = $.cookies.get( 'uid' );
if(uid == null){
$.mobile.changePage( "account-login.html", { transition: "slide"} );}
$(function(){
$.getJSON("ajaxResponder.php?method=messages",function(data){
var htmlString ="";
$.each(data.messages,function(index,item){
htmlString +='<li data-name='+item.msgid+'><a href="#">'+
'<h3 class="topic">'+item.subject+'</h3>' +
'<p>From: '+item.sender+'</p>' +
'<p>Date: '+item.added+'</p>' +
'<p>'+ item.message +'</p></a></li>' ;
});
$('#list').html(htmlString);
$('#list').listview('refresh');
});
});
});
</script>
<ul id="list" data-role="listview" data-theme="d"></ul>
</div>
<script>
$('#list').on('click', 'li', function() {
$.mobile.changePage("#dialog", {
role: "dialog"
});
});
</script>
</div>
<div data-role="page" data-rel="dialog" id="dialog" data-theme="c" data-close-btn="right">
<div data-role="header" data-position="fixed" data-theme="b">
<h1>New values added!</h1>
</div>
hello
<!-- display item.message here -->
</ul>
</div>
</body>
</html>
updated
Based on your comment, to read any data of the parent element, use .closest().
Just read the text of <a> button and append it to the dialog. I used div #msg for demo purposes.
Demo
$('#list').on('click', 'li a', function () {
var text = $(this).closest('li').attr('data-name');
$('#msg').empty();
$('#msg').append(text);
$.mobile.changePage("#dialog", {
role: "dialog"
});
});