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;
Related
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.
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.
<div class='parent'>
<div class='children'>1234</div>
<div class='children'>5678</div>
<div class='children'>9101</div>
<div class='children'>I WANT TO BE FIRST</div>
</div>
js
$('.parent').sortable({
axis: "y",
containment: "parent"
});
There is a problem dragging an element to the first position if containment is set to parent. I need this settings but I also need to move some elements to the top. But it seams that there is no space enough to do it. Sometimes it is possible but mainly - it's not.
I tried with adding top/bottom padding/margin to the parent - without success.
Any workaround?
Here is jsfiddle
you can try adding a 'hidden' element above, like so:
<div class='parent'>
<div class='children hidden'></div>
<div class='children'>1234</div>
<div class='children'>5678</div>
<div class='children'>9101</div>
<div class='children'>I WANT TO BE FIRST</div>
</div>
with this for css:
.hidden {
visibility: hidden;
height: 0;
}
It won't release if dragged above the invisible element though.
here's a jsfiddle
Can you add a containing div and set the containment to it? e.g.:
<div id="outer">
<div class='parent'>
<div class='children'>1234</div>
<div class='children'>5678</div>
<div class='children'>9101</div>
<div class='children'>I WANT TO BE FIRST</div>
</div>
</div>
along with:
$('.parent').sortable({
axis: "y",
containment: "#outer"
});
and
#outer {
padding-top: 1px;
}
That seemed to work with the fiddle.
In JQuery Mobile you can easily group buttons horizontally by:
<div data-role="controlgroup" data-type="horizontal">
1
2
3
</div>
and vertically by
<div data-role="controlgroup" data-type="vertical">
1
2
3
</div>
but how can I make them group both horizontally and vertically?
Thank you!
Use a jQuery Mobile GRID.
<div class="ui-grid-b" >
<div class="ui-block-a">1</div>
<div class="ui-block-b">2</div>
<div class="ui-block-c">3</div>
<div class="ui-block-a">1</div>
<div class="ui-block-b">2</div>
<div class="ui-block-c">3</div>
<div class="ui-block-a">1</div>
<div class="ui-block-b">2</div>
<div class="ui-block-c">3</div>
</div>
Then if you want to get rid of the space between the buttons, add CSS to eliminate the margins:
.ui-block-a .ui-btn, .ui-block-b .ui-btn, .ui-block-c .ui-btn {
margin: 0 !important;
}
Here is a DEMO
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;
}