I am failing to correctly organize jQuery Mobile components in the following way:
I was trying to build this fixed searchbar, but after many attemps I ended up here, asking for help.
<div data-role="header" data-position="fixed" data-theme="b">
<a data-role="button" class="ui-btn-lft" href="#pgIndex" data-icon="arrow-l" data-theme="b">Back</a>
<h1>Title</h1>
</div>
<div data-role="header" data-theme="b" id="second-header">
<div style="float:left; width: 75%;">
<select name="selCombo1" id="selCombo1" data-mini="true">
<option value="0">Option 0 - All</option>
</select>
<span style="margin-bottom: 3px;"></span>
<select name="selCombo2" id="selCombo2" data-mini="true">
<option value="0">Option 0 - All</option>
</select>
</div>
<div style="float:right; width: 25%;">
<a data-role="button" data-mini="true" data-icon="search" data-iconpos="top" data-rel="back">Search</a>
</div>
</div>
Is there a simple way to archieve this?
The complete code is on jsFiddle:
http://jsfiddle.net/mbarni/rjdt2/
You can achieve a similar effect to a second header level by appending a div with the classes:
class="ui-bar ui-bar-b"
to your header. Here's a simple example using your code.
JSFiddle Example
For more info, check the bottom of this doc
Related
I want to place select menu and input type in a same line.
This is the link to jsfiddle demo.
html
<div class="lin">
<select data-inline="true">
<option>1</option>
<option>hello</option>
</select>
I tried it using style but i didn't get please any one help me.
Just place it in a grid, jQuery Mobile has available solution.
Working example: http://jsfiddle.net/Gajotres/26uph/
HTML:
<div class="ui-grid-a">
<div class="ui-block-a"><input type="text"/></div>
<div class="ui-block-b"><select><option>1</option><option>2</option></select></div>
</div><!-- /grid-a -->
HTML:
<div class="left">
<select data-inline="true">
<option>1</option>
<option>hello</option>
</select>
</div>
<div class="right">
<input type="text" name="txt" value=""/>
</div>
<div class="clear">
</div>
CSS:
.left{
display:inline;
float: left
}
.right{
float:right;
}
.clear{
clear:both;
}
take a look: http://jsfiddle.net/DRs8p/3/
I am using jquery mobile .In my header i have three button i open pop up screen on clicking the button .But the problem is that i click the (+) button pop up size is large (looking fine) But when click the setting button(first one) it size reduce why ? having similar contend .I need to increase the size of pop screen. Here is my code.
http://jsfiddle.net/ravi1989/HesVd/16/
<div data-role="page" id="Home" >
<div data-role="header" data-theme="b" data-position="fixed" >
<h1 class="ui-title" id="hdr" style="text-align:left;margin-left: 20px;">My Cases</h1>
<div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal">
Setting
Add
Edit
</div>
</div>
<!--div data-role="content">
<div id="here_table" class="scrollable" data-scroll="y" style ="height:400px" > </div>
</div-->
<div data-role="content">
<ul data-role="listview" data-inset="true" id="here_table" >
</ul>
<!--- CaseInformationScreen Popup screen---------------------------->
<div data-role="popup" id="CaseInformationScreen" data-close-btn="none" data-overlay-theme="a" data-dismissible="false">
<div data-role="header" data-theme="b" >
Cancel
<h1>Case Information</h1>
Add
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:top;margin-left: 0px;">Case Name:</label>
<input name="text-12" id="text-12" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:left;margin-left: 0px;">Case Date:</label>
<input name="text-12" id="text-12" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="textarea-12">Textarea:</label>
<textarea cols="40" rows="8" name="textarea-12" id="textarea-12"></textarea>
</div>
</div>
<!--- CaseInformationScreen Popup screen End---------------------------->
<!--- User Setting Popup screen---------------------------->
<div data-role="popup" id="UserSettingScreen" data-close-btn="none">
<div data-role="header" data-theme="b" >
Cancel
<h1>User Settings</h1>
Ok
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:top;margin-left: 0px;">IP Address:</label>
<input name="text-12" id="text-12" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:left;margin-left: 0px;">Display Font:</label>
<select name="select-choice-1" id="select-choice-1">
<option value="standard">A</option>
<option value="rush">B</option>
</select>
</div>
</div>
<!--- User Setting Popup screen End---------------------------->
</div>
</div>
Problem with jQuery Mobile is that it has an internal logic of building responsive content.
Unless you specify values manually jQuery Mobile will provide them for you. In your case problem is in text area, its default values are wider then larges element (button) on a previous popup.
That's why it is important to set popup width manually, it is even advised by official documentation.
Working example: http://jsfiddle.net/Gajotres/2752A/
HTML :
<!--- User Setting Popup screen---------------------------->
<div data-role="popup" id="UserSettingScreen" data-close-btn="none" style="max-width:300px !important; width: 300px !important">
<div data-role="header" data-theme="b" >
Cancel
<h1>User Settings</h1>
Ok
</div>
<div data-role="content" data-theme="b" >
<div data-role="fieldcontain">
<label for="text-12" style="text-align:top;margin-left: 0px;">IP Address:</label>
<input name="text-12" id="text-12" value="" type="text"/>
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:left;margin-left: 0px;">Display Font:</label>
<select name="select-choice-1" id="select-choice-1">
<option value="standard">A</option>
<option value="rush">B</option>
</select>
</div>
</div>
</div>
If you take a look I have added a style attribute to popup container:
style="max-width:300px !important; width: 300px !important"
One more thing, popup content is now wrapped into a data-role="content" so that padding can be applied to it.
I can't figure out how to register the taphold event for a Flip toggle switch. I tried as described here with the following code.
<div data-role="fieldcontain">
Sex
<select name="sex" id="id" data-role="slider">
<option value="off">Male</option>
<option value="on">Female</option>
</select>
</div>
$('#id').live('taphold', function(){
console.log("taphold");
});
And, because the actual <select> tag is hidden, and the switch is rendered by following html
<div role="application" class="ui-slider ui-slider-switch ui-btn-down-c ui-btn-corner-all ui-focus">
<span class="ui-slider-label ui-slider-label-a ui-btn-active ui-btn-corner-all" role="img" style="width: 100%">Female</span>
<span class="ui-slider-label ui-slider-label-b ui-btn-down-c ui-btn-corner-all" role="img" style="width: 0%">Male</span>
<div class="ui-slider-inneroffset">
<a href="#" class="ui-slider-handle ui-btn ui-shadow ui-btn-corner-all ui-slider-handle-snapping ui-focus ui-btn-up-c" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" role="slider" aria-valuemin="0" aria-valuemax="1" aria-valuenow="on" aria-valuetext="Female" title="Female" aria-labelledby="eforms_patient_sex-label" style="left: 100%">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text"/>
</span>
</a>
</div>
</div>
Which is a sibling of aboves <select> tag I also tried this
$('#id').parent().find('[role="application"]').live('taphold', function(){
console.log("taphold");
});
But nether did work. So...
How to register the virtual taphold event for jQuery mobile Flip toggle switch?
//edit
I added a onclick function to the <div> tag, via opera dragonfly, and it worked. So It seams that registering the event to the <div> is the right approach. But it does not work, with the code above.
The event is called taphold not tabhold.
This used to work to center the controlgroup in 1.1.0, but now it seems like it doesn't in 1.1.1.
<div data-theme="a" data-role="footer" style="text-align:center;">
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
link1
link2
</div>
<div class="copy">© 2012 bigco</div>
</div>
Probably align="center" attribute of data-role="controlgroup" div could be suitable for that.
<div data-theme="a" data-role="footer" align="center">
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
link1
link2
</div>
<div class="copy">© 2012 bigco</div>
</div>
http://jsfiddle.net/sGFTy/1/
I found the solution on this site:
http://forum.jquery.com/topic/how-to-horizontally-center-a-set-of-grouped-buttons
The CSS:
#navgroup {text-align:center;}
#navgroup div {display:inline-block;}
The HTML:
<div id="navgroup">
<div data-role="controlgroup" data-type="horizontal">
Menu
Specials
FAQ
Facebook
</div>
</div>
Issue still persists if using
$("selector").show();
to display element since it applies 'display:block'.
Instead of using .show(), now use
$("selector").css('display', 'inline-block');
Now I'm on JQM 1.2 and this works for me...
CSS
.center-controlgroup { text-align: center; }
HTML
<div data-role="controlgroup" data-type="horizontal" class="center-controlgroup">...</div>
I have built an app using JQuery 1.1.0 and Phonegap. The problem I have now is that when I input text into a field and I tap on the ios keypad's 'previous" & "Next" buttons, the header moves -momentarily- from its fixed position and appears at different positions on the page. I must add that it is also inconsistent as it doesn't do this on other pages. The headers are marked as fixed, so I have no idea why they would sometimes appear and sometimes not.
This part of a multipage is an example of a page that works 'most of the time', but sometimes the header would slide in an out of the screen as I navigate between fields.
<div data-role="page" id="accident_detail" data-theme="f">
<div data-role="header" data-position="fixed">
<h1>Description</h1>
</div>
<div data-role="content">
<label for="incident_date">Date of Incident:</label>
<input type="date" name="incident_date" id="incident_date" value="" class="required"/>
<label for="incident_description">Description of Incident:</label>
<textarea cols="40" rows="8" name="incident_description" id="incident_description" class="required"></textarea>
<label for="accident_damage">Damage description:</label>
<textarea cols="40" rows="8" name="accident_damage" id="accident_damage"></textarea>
<label for="location_street">Street:</label>
<input type="text" name="location_street" id="location_street" value="" class="required"/>
<label for="location_city">City:</label>
<input type="text" name="location_city" id="location_city" value="" class="required"/></div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
<a href="#accident_menu" data-icon="arrow-l" data-direction="reverse" data-iconpos="left"
style="margin-left: 10px; margin-top: 5px">Done</a>
<a href="index.html" rel="external" data-icon="home" data-direction="reverse" data-iconpos="notext"
style="float: right; margin-right: 10px; margin-top: 5px"></a>
</div>
</div>
Any help would be appreciated.
YOU CAN TRY THIS..
<div data-role="page" id="myPage">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<a data-icon="back" data-transition="none">Back</a>
<h1>PAGE TITLE</h1>
</div>
</div>