Using Jquery-mobile, the following (abbreviated here) footer
<div data-role="footer">
<a href="#table" data-role="button" data-icon="plus"
data-iconpos="left" class="ui-btn-left">Open</a>
<a href="#" data-rel="back" data-role="button" data-icon="delete"
data-iconpos="notext" class="ui-btn-right">Close</a>
</div>
that exist in a popup, when popped-up, its buttons
are displayed outside the popup-frame, aligned under it.
Why? What am I doing wrong?
The full example is in http://jsfiddle.net/yotam/d0aqmx6m/
I'm beginning to wonder if button footers are not supported in popups. Or at least, not fully supported. From the docs, you need to throw a "ui-title" in there too - it's what will give the footer height (The docs show a span after the button definitions).
I've done that here:
<div data-role="footer">
Open
Close
<span class="ui-title"></span>
</div>
See: http://jsfiddle.net/had4or71/
Of course, it only partially solves your problem, as though they are now in the footer, they don't yet look good. I tried with a navbar in the footer with similarly disappointing results (the navbar was well positioned top, bottom, and left, but ran over the right border pretty badly.
Finally, I did this version real quick as well:
http://jsfiddle.net/ph0e54ee/2/
Which shows pushing the close button into the header like the demos site does, and just presenting your open button inline as a standard button - alas, it's a compromise, and not what you asked for.
On further investigation, it would appear the "ui-btn-left" and "ui-btn-right" classes are not supported in the footer, see:
gh:6331
gh:6872
gh:6137 (comment)
Again, I messed about with the CSS a bit, and managed to get something sort of nice, at least on my test browser of chrome. I suspect your mileage will vary greatly outside of chrome.: http://jsfiddle.net/9crnjakr/
Related
I'm working on a page with four (4) separate DIV elements that all are scrolled independently of each other. Using the answer here: `-webkit-overflow-scrolling: touch` broken for initially offscreen elements in iOS7 I was able to get most of the pages working. There are still a few pages where the DIV holding the main content cannot be scrolled vertically when a side DIV is expanded.
The page structure looks like this:
...
<div id="paneTop">...</div>
<div id="paneLeft" class="expanded">...</div>
<div id="paneCenter">
<div>
<div style="overflow: hidden;">
<div id="mainContent" style="overflow: auto;">...</div>
</div>
</div>
</div>
<div id="paneRight" class="expanded">...</div>
...
Setting the touchstart event listener on #paneCenter worked for most of the pages but those didn't have the extra layer of divs. I have tried setting the touchstart event listener on #mainContent and all the way up the chain but #mainContent will not scroll when #paneLeft is expanded even though it works when #paneLeft is collapsed and it works whether paneRight is expanded or not.
Note: this issue has only been identified on an iPad running iOS7.
This is the correct behavior. If you want it to scroll vertically but hide it horizontally, then target it specifically: overflow-x: hidden (to hide horizontal excess), and don't set anything to overflow-y. This allows for some good control over elements.
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'm trying to learn jquery mobile and have been playing around with it for the past few days and things are going alright, but I'm not so sure if I'm taking the proper approach.
I tried making a site with a similar UI as the facebook app. On the top right and left corners of the page's header are buttons that causes the page to slide out like a drawer.
The top left button will slide the page out to the right to reveal a menu, while the top right button will slide out to the left to reveal a form to fill out.
What I did was create divs outside the page and used javascript to slide out the active page, to reveal the menu or form depending on which button is pressed:
<body>
<div id="my-menu">
<ul>
<li>Menu Item 1</li>
</ul>
</div> <!-- end of my-menu -->
<div id="my-form">
<form method="post" action="form-action.php">
<!-- form elements -->
</form>
</div> <!-- end of my-form -->
<div data-role="page" id="home">
<div data-role="header">
</div>
<div data-role="content">
</div>
</div> <!-- end of home -->
</body>
I used my own CSS to style the menu, but I also noticed my theme wasn't applied to "my-form", but everything in the page "home" had all elements properly styled.
I can't put the form inside the page "home" because I will not be able to do sliding drawer effect that I've done with the menu.
Am I suppose to have my own styling applied to the form outside the page or is there a way to apply the jquery mobile theme to elements outside the page?
Would this be the best approach to implement this kind of user interface or is there a better way using what's available in jquery mobile?
Since this will be my UI for the application does that mean I will just copy the same code to all the pages? Or is there a better way to do this?
I'd like to use the best practice for this use case so please offer any advice!
Thanks in advance for the help!
BTW I did the slide menu based on this blog post:
http://blog.aldomatic.com/facebook-style-slide-out-menu-in-jquery-mobile/
Solution 1:
As I told you in comments, jQM style can not be applied outside of page container but that should not prevent you from using its css.
If you are using firefox, use firebug plugin and take a look at every jQM page element, copy its structure and css. Use it to create styling outside page container.
One more thing, new elements are going to be styled but they will not have functionality, you will need to redo it by yourself.
Solution2:
Have your content inside a data-role="page" div at page-load, let jQuery Mobile style the page, and then move your content div out of the data-role="page" div to be a child of the body tag.
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.
I've got a jquery accordion on site BUT it kinda doesn't work >> when browser loads page accordion looks good (with one first section opened) BUT when I press on some other section, first section closes and none of sections ar opening up, so it kinda stucks with all sections closed! When I reload the page this loop starts from the beginning. Here is the link to the site, click on "Pakalpojumi" to see that accordion.
Here is the html of accordion:
<div id="accord">
<h3><a id="gr" href="#">Griezšana</a></h3>
<div>
<p>
max griešanas garums: 2500mm </br>max loksnes biezums: 4mm
</p>
</div>
<h3><a id="ur" href="#">Urbšana</a></h3>
<div>
<p>
Mēs piedāvājam 3 dažādu veidu stacionārie urbji
</p>
</div>
<h3><a id="lo" href="#">Locīšna</a></h3>
<div>
<p>
max loksens garums: 2000mm, </br>max spiešanas spēks: 65 t
</p>
</div></div>
Adding accordion to accord:
$('#accord').accordion();
Does anyone have any idea of what could be wrong?
The code works fine by itself, see here. On closer inspection of your site, there is a style which is placed on the active div each time the header is clicked (I'm using chrome, it appears as element.style in its css properties) which sets the height, padding-top and padding-bottom to 0px. If I disable those styles, the selected div appears fine. Do you happen to be adding these styles on every click?
Edit
Ok, I found your problem... Does the second tab here look familiar? According to this post it's because when you initialise your accordion, its parent element is hidden (via your 'off' class). So you can get around this issue by defining a height for your divs after initialising your accordian like so:
$('#accordion').accordion();
$('#accordion >div').css('height', '300');
... or by by initialising your accordion once its parent is shown.