Im using jquery Accordion, i want to align the hearders in the left like a list so that when the user clicks on the header the content should populate in the right.
I couldnt achieve this using the jquery ui accordion. it shows the content below the hearder which i dont need..
Take a look at this
http://jsfiddle.net/qkXUJ/
<div class="accordion">
<h3><a>tab 1</a></h3>
<div>Lorem ipsum dolor sit amet... </div>
<h3><a>tab 2 </a></h3>
<div>Lorem ipsum dolor sit amet... </div>
</div>
h3{
float: left;
}
initially i get the hearder in left but upon clicking the second header it moves up. I want to stay it below the first hearder.
Help me in achieving this.
Thanks in advance
This is likley not an answer to your specific question, and may be better as a comment, but I think you want the jQuery Tabs widget, with a vertical implementation rather than the Accordian.
Try this link and see if that helps:
http://jqueryui.com/tabs/#vertical
Related
This should fairly simple question for a jQuery mobile expert. As you can see in the picture my button label "call" is not centered. How can I move it to the left?
<div class="ui-block-c"> Call<br> </div>
I have the basic bootstrap tabs set up with no dynamically inserted content and print specific media queries in my base stylesheet. When the user prints from the browser I want all the tab content to print, not just the active tab. I know there has to be an easy solution to this, I just can't figure it out.
try this in your print media query:
.tab-content > .tab-pane {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
#Scott's answer didn't work for me, and I think it is because I'm using bootstrap 4.
This is what worked for me in bootstrap 4. I added the display helper classes d-print-block, d-none, and d-print-none where appropriate.
I didn't want the top nav bar to print at all, so I added d-print-none
<ul class="nav nav-tabs nav-bordered d-print-none" role="tablist" id="mainTabs">
I wanted the individual tab-panes to print if on print media, so I added a header to the tab pane's content and added the d-none class so it wouldn't show in the browser, but also added d-display-block so it WOULD should in print media. I also added d-print-media to the tabpanel div itself so that it would show the entire contents in print media.
<div role="tabpanel" class=" fade in show active tab-pane d-print-block" id="myTab">
<div class="header-title d-none d-print-block">My Tab Name</div>
Lorem ipsum dolor sit amet...
</div>
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.
On my jQuery Mobile page, i'm using a horizontal control group for some buttons.
But in some languages the text within these buttons is too long.
Instead of wrapping the text within each button, the buttons themselves wrap onto the next line.
this is the base code:
<div data-role="controlgroup" data-type="horizontal">
short button
really really really insanely long button is really really insanely long. No really, who makes buttons this big?
</div>
and with this css, we convince it to wrap inside the buttons. Otherwise the text is truncated with an ellipsis
.ui-btn-inner{
white-space: normal !important;
}
On the third page of this fiddle the problem is demonstrated
http://jsfiddle.net/koesper/R8Kwe/
Anyone have any ideas how I might tackle this?
Thanks in advance,
Casper
ps. Inspiration for the original fix came from Tosh in Jquery Mobile Multiline Button
You could set widths for the links in your control-group:
.ui-page .ui-content .ui-controlgroup a {
width : 49%;
}
This will keep them on the same line. Here is a demo: http://jsfiddle.net/R8Kwe/6/
Also, just to be thorough, the white-space : normal actually needs to be applied to the .ui-btn-text element which is a child of the .ui-btn-inner element (so it still receives the inherited value).
Trim your long buttons - that's a usability issue. If you have action buttons named that long seems like that just defeats the purpose of an action? Other than that I wouldn't use controlgroups for something like this. I would use a custom data theme & some grids to house my buttons inline.
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.