I'm having trouble with the JQuery UI accordion widget. I can get the accordion working and the icons showing for a collapsed and expanded accordion, but I get all of the icons and not just the +/- icon.
When collapsed
When expanded
Here is my driver for the JQuery widget
$(function () {
$('.accordion').accordion({
"header" : "h3",
"icons": {
"header": "ui-icon-plus",
"activeHeader": "ui-icon-minus"
},
"heightStyle": "content",
"collapsible": true,
"active": false,
});
});
here is the HTML it is being called on
<div class="accordion">
<h3></h3><!--Left blank to show all the icons showing-->
<div>
<p>This is sample Content</p>
</div>
</div>
The JQuery-UI zip file I downloaded came with 6 files that contained all of the various icons available and it appears like the whole row is showing and gets shifted to the left to hide some icons when the accordion is either expanded or collapsed. Do I have to use the theme roller to roll my own theme and only get the icons I want or if there some height/width/offset settings I need to specify in the driver. I've tried to follow the documentation but it's not been exceedingly helpful.
It turns out there was a css collision between the JQuery UI css
.ui-icon {
width: 16px;
height: 16px;
}
and some css I was using for other parts of the site
.content span {
color : #B47000;
font-size : 1.25em;
width : 100%;
}
Since the <div class="accordion"> was nested within <div class="content"> the css for .content span was overriding the .ui-icon css because JQuery UI inserts <span class="ui-icon ui-icon-plus"> inside the header element to hold the icon.
I changed my css to be more exclusive and that resolved this problem.
/*Adding > fixed the error*/
.content > span {
color : #B47000;
font-size : 1.25em;
width : 100%;
}
Related
How can I load a external html page in a div?
<div data-role="page" id="pageone">
<div data-role="panel" id="myPanel">
<!--Load nav.html here-->
</div>
...
I have tried with following code but it doesn't function.
$( "#myPanel" ).load( "nav.html" );
See: http://plnkr.co/edit/N6xTrvLHWdOMG9Lq?open=lib%2Findex.html
The panel is expecting some markup as content, not a whole HTML page.
This will load Your navigation listview inside the panel:
$(document).on('panelcreate', '#myPanel', function () {
$(this).children(".ui-panel-inner").load("nav.html ul", function() {
$(this).enhanceWithin().trigger("updatelayout");
});
});
The full-width listview is requiring some additional CSS:
/* The left reveal panel shadow is 5px inset and blurred by 5px */
.ui-panel-display-reveal.ui-panel-position-left .ui-listview {
margin-right: -10px;
}
EDIT:
To test Your navigation menu and see if it looks as intended, You may design it directly inside the panel. To allow the framework to create the panelInner, simply put somewhat inside the panel div, i.e. a placeholder div or, as said, even better the static version of Your navigation menu. Thus, it will be then correctly replaced by Your external version.
In one word, instead of <!--Load nav.html here--> write <div>...</div>.
I have a jQuery UI accordion with Markup structure
<div id="accordion2">
<h3>title</h3>
<div>stuff texty</div>
<h3>title2</h3>
<div>stuff texty</div>
</div>
However, the second tab of the accordion is in a plainer format than the first (i.e. it has less pictures and is hence more mobile friendly).
I am want to use a media query to hide the first tab and its contents when screen width is less than 640px. I tried giving the first h3 and the first div tags a class of first and then used
#media (max-width: 640px) {
.first {
display: none;
}
}
To make them disappear... but it didn't work. Does anyone know how I can go about doing this?
try this as a CSS3 option:
#accordion2 h3:first-of-type
{
display:none;
}
if you cannot support CSS3 then give that first heading a class name and target that.
I have the following button in my jQuery mobile 1.4.0 , I want to modify its border radius in order to be as the button in the following image , I have tried the following code but it didn't work for me , How can i modify the button border radius in jQuery mobile 1.4.0? Plese help me ..
<div class="ui-btn ui-input-btn center_BTN " >
<input type="button" id="save" data-inline="true" value=" Save" data-icon="check" />
</div>
CSS
.center_BTN {
text-align:center;
background-color:transparent !important;
border:none;
}
.center_BTN.ui-btn,.center_BTN .ui-input-btn{
border: solid #cccccc 5px;
border-radius:32px !important;
}
Update
jQM has added a new feature which doesn't require any JS intervention. Create a custom class e.g. foo and then add data-wrapper-class="foo" attribute to input itself.
<input type="button" data-wrapper-class="foo" />
Demo
Old answer
jQuery Mobile dynamically wraps input in a div where all CSS styles are added to it, hence it is not possible to style it statically.
Create a custom class with all your CSS and add it after page is created.
$(".selector").closest("div").addClass("custom-class");
Demo
Rounded rectangle button
.ui-btn-corner-all {
border-radius: 1m;
}
Rectangle button
.ui-btn-corner-all {
border-radius: 0m;
}
I'm using the "navbar" data-role for a div inside JQuery Mobile's footer definition. When I add more than 5 items it divides the menu items into two columns. This is default behaviour according to the JQM documentation. I'd like the icons to be scrollable by swiping left or right inside the footer area.
<div data-role="footer" data-theme="d" data-position="fixed" id="divFooter">
<div data-role="navbar" id="divNavBar">
<ul>
<li>Profile</li>
<li>Status</li>
</ul>
</div>
</div>
For reference, I looked at this potential solution: JQM horizontal scroll navbar. It however turns the menu icons into HTML links and works inside the header data-role.
Any ideas?
What you need is the following on your parent div (on your footer div)
overflow: auto;
white-space: nowrap;
The nowarp makes the div contents not overflow to the next line and the overflow auto makes it scrollable in whichever direction it will not fit which in this case is horizontal since we turned off word wrap
You may achieve this with HTML/CSS only:
HTML
<header>
<nav role='navigation'>
<ul>
<li>Home</li>
<li>About</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</nav>
Menu
</header>
CSS
nav {
overflow-x: scroll; /* 1 */
-webkit-overflow-scrolling: touch; /* 2 */
}
ul {
text-align: justify; /* 3 */
width: 30em; /* 4 */
}
ul:after { /* 5 */
content: '';
display: inline-block;
width: 100%;
}
li {
display: inline-block; /* 6 */
}
Comments:
Setting auto will work on some devices, but set this to scroll just
to be sure.
This the magic property that enables the native feel
scrolling.
Setting this to justify creates equally spaced li's which
takes the headache of working out margins.
You must set the width to
a value larger than the sum of all the li's width.
This is text-align: justify's version of a clearfix.
This must also be set for the equal spacing to work.
Should work on the following devices:
iOS 5+
Android 3.0
Blackberry 6+ (didn't check personally)
Windows Phone (IE10) supports momentum scrolling natively
Taken from here: http://hugogiraudel.com/2013/08/23/scroll-overflow-menu/
I have the following collapsible content with jQuery Mobile. How can I stop the heading being shortened?
At the moment the text is cut off so it reads something like 'Really long heading...' Do I need to do this manually with css or is there a JQB setting I can change?
<div data-role="collapsible">
<h4>
Really long heading goes here thats wider than the page width
</h4>
<p>
Content Content Content Content Content Content
</p>
</div>
Here is the documentation
http://jquerymobile.com/test/docs/content/content-collapsible.html
It seems this CSS is causing the behavior. I could overwrite this rule if there isnt a standard JQM method for doing this.
.ui-btn-inner {
white-space: nowrap;
}
You need to remove this css:
white-space: nowrap;
from its inner span (span witch wrap's text). Or replace it with:
white-space: normal;
Or change jQM css file (.ui-btn-inner) but this will also effect every other element using this class.
Or use this line:
$('div[data-role="collapsible"] h4 a span span.ui-btn-text').css({'white-space':'normal'});
There's no other way, or at lease not buy changing some jQM UI element attribute.