The documentation says
The footer bar has the same basic structure as the header except it uses the data-role attribute value of footer.
But this fiddle shows that I can't put controls in the footer the same way as I can the header.
Q: How can I write a footer such that there is text followed by an h1 tag followed by text, and they are all on the same line?
You can use the same classes jQM applies to the header elements (ui-btn-left, ui-title, ui-btn-right):
<div data-role="footer">
<a href="JavaScript:;" class="ui-btn-left" >c</a>
<h3 class="ui-title">Footer</h3>
<a href="JavaScript:;" class="ui-btn-right" >d</a>
</div>
Here is your updated fiddle: http://jsfiddle.net/ezanker/mXjHJ/86/
Related
When creating some clickable dropdowns, I noticed the dropdown menu will hide behind any clickable dropdown buttons if they overlap. Here is an example
How can I fix this? Here is the code used to create the dropdown.
<div class="w3-container">
<div class="w3-dropdown-click">
<button onclick="myFunction()" class="w3-btn">Click Me!</button>
<div id="Demo" class="w3-dropdown-content w3-border">
Link 1
Link 2
</div>
</div>
</div>
I also made a fiddle, but it doesn't seem to be working: https://jsfiddle.net/n2fole00/99d8d7pj/
BTW, would this be considered a bug?
Thanks.
Based on Tony Hensler's comment, it was the z-index.
<div id="<?php echo $course->course_id; ?>" class="w3-dropdown-content w3-border" style="right:0; z-index:1;">
I just added z-index:1 to the w3-dropdown-content div as an inline style for the fix.
Thanks Tony.
I want to animate a collapsible set in jquery mobile 1.4.2. Unfortunately I haven't found anything. All animated scripts use version 1.3.2 oder 1.4.0.
I'm still a newbie and don't know if I just can switch down to 1.4.0 or 1.3.2 keeping my design?
What can I do?
Here is a way to do it:
Instead of a collapsibleset, use a wrapper div with the class="ui-collapsible-set", this gives you the collapsible set styling, but then allows you to implement the logic:
<div class="ui-collapsible-set">
<div data-role="collapsible" class="animateMe">
<h3>Section 1</h3>
<p>I'm the collapsible content for section 1</p>
</div>
<div data-role="collapsible" class="animateMe">
<h3>Section 2</h3>
<p>I'm the collapsible content for section 2</p>
</div>
<div data-role="collapsible" class="animateMe">
<h3>Section 3</h3>
<p>I'm the collapsible content for section 3</p>
</div>
</div>
I have added a class of animateMe to each collapsible for convenience in adding a handler:
$(".animateMe .ui-collapsible-heading-toggle").on("click", function (e) {
var current = $(this).closest(".ui-collapsible");
if (current.hasClass("ui-collapsible-collapsed")) {
//collapse all others and then expand this one
$(".ui-collapsible").not(".ui-collapsible-collapsed").find(".ui-collapsible-heading-toggle").click();
$(".ui-collapsible-content", current).slideDown(300);
} else {
$(".ui-collapsible-content", current).slideUp(300);
}
});
This code is a click handler on each collapsible header. It checks to see if the clicked collapsible is currently expanded or collapsed. If it is expanded, we simply collapse it with the slideUp animation. If it is collapsed, we first collapse any expanded items and then expand this one with the slideDown animation.
If you want to allow multiple items to be expanded at the same time, just remove this line:
$(".ui-collapsible").not(".ui-collapsible-collapsed").find(".ui-collapsible-heading-toggle").click();
Here is a working DEMO
I want to have 2 buttons in the footer, one on the left side and the other on the right side.
With dataposition fixed, however right side button going little outside the page view.
Here is the code.
<div data-role="footer" data-theme="d" class="ui-bar" style="height:30px" data-position="fixed">
<a class="ui-btn-left" data-role="button" data-theme="a" id="approvetm">
Approve
</a>
<a id="sendback" data-rel="popup" data-theme="a" class="ui-btn-right" data-role="button" data-inline="true">Send Back</a>
</div>
Can you please tell me what is wrong in above code.....?
As per jQuery Mobile documentation footer is different than header in terms of buttons accommodation.
The page footer is very similar to the header in terms of options and configuration. The primary difference is that the footer is designed to be less structured than the header to allow more flexibility, so the framework doesn't automatically reserve slots for buttons to the left or right as it does in headers
However, this can be fixed by overriding ui-btn-right style (right position).
.ui-footer .ui-btn-right { right: 35px !important }
Demo
I am using jquery mobile for my mobile app. I want to make a page where data-role=content should be scroll when it is overflow but it is scrolling whole page with header and footer. I want to scroll only content div and header and footer divs should be fixed. I have already seen iscrollview but its only working in iPhone or any other way.
Please suggest how can I make this design.
Just add a data-position="fixed" to your header and footer. Check this example below:
<div data-role="page">
<div data-role="header" data-position="fixed" data-tap-toggle="false">...</div>
<div data-role="content">...</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">...</div>
</div>
Take a look at http://cubiq.org/iscroll-4; it may not be jQuery, but it is a great JavaScript plugin for Mobile Scrolling.
You would add an ID to each UL and attach a scroll to each one separately.
Dynamically injecting buttons into JQM footers seems to be an exercise in frustration. Anyone have a clue how to apply proper formatting for this? Here are several anomalies I found trying to do this:
Multi-column button grids are not properly formatted in the footer
data-corners="false" attribute (to get flush buttons) does not apply to the first and last buttons in the footer
With data-role="controlgroup" data-type="horizontal" for the footer buttons, if there are too many buttons to fit in one row the styling looks weird (since some buttons will have rounded corners, others will not)
If data-role="controlgroup" data-type="horizontal" are omitted for the footer buttons, buttons may be rendered partially off the screen...
In general - argh!!!! Anyone have any success dynamically injecting buttons into a footer? If so, would much appreciate to hear how this was achieved.
Thanks!
Would something like this work:
http://jsfiddle.net/eznh8/7/
JS
$('#addButtonName').click(function() {
var theFooter = $('#addMoreButtons');
var buttonName= $('#newButtonName');
if(buttonName.val() != '') {
theFooter.append(''+buttonName.val()+'');
buttonName.val('');
$('#theHomePage').trigger('create');
}
});
HTML
<div data-role="page" id="theHomePage">
<label for="basic">Button Name:</label>
<input type="text" name="newButtonName" id="newButtonName" value="" />
Add New button
<div data-role="footer" class="ui-bar" id="addMoreButtons">
</div>
</div>
Multi-column button grids are not properly formatted in the footer - this is my response to that.
One thing to check if you are using controlgroup with a href links - make sure your each of the links in the control group has the following CSS;
vertical-align:top;
You will also have to get more control over how the elements look if you are styling them as buttons. I posted a similar discussion over here:
https://forum.jquery.com/topic/jquery-mobile-horizontal-control-groups-creating-a-custom-split-list
https://forum.jquery.com/topic/css-code-to-help-control-entire-button-in-a-jquery-mobile-theme
Hope that helps.