I use jquery tablesorter with pager.
I search a way that the printed version of the page show all items (not just the list visible).
example: you got a list of 25 elements. with a pager set to 10 element. On page 1 you will see the first 10 elements. on this page, you call Print. The result is the list of 25 elements.
If you happen to be using my fork of tablesorter, you have two choices:
Set the pager plugin option removeRows to false, then include this in your css stylesheet:
#media print {
table.tablesorter tbody tr {
display: table-row !important;
}
}
This method will also work if the filter widget is active.
Disable the pager plugin before printing as follows:
// use $('table.tablesorter').trigger('enable.pager'); to re-enable the pager
$('table.tablesorter').trigger('disable.pager');
This is reposted from here.
Related
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 an LI with A tag in it.
<li title="LI TEXT" id="test">
ELEMENT WITH HREF HREF
</li>
I want to create jquery tooltip for the LI and default tooltip for its child elements. But this does it both for the jquery elements for LI and its childs.
$("#test").tooltip();
http://jsfiddle.net/k45emuhg/
Okay, what you've described is quite easy with the items option. Simply include a selector restriction for the items you want to show their tooltips, e.g. the same as the original selector that you're calling .tooltip() on:
$("#test").tooltip({items: "#test"});
The question doesn't make this explicit, but you probably also want to show only one (rather than 2) tooltips when you hover over the children element. To do that, you can disable and reenable the parent's tooltip on the mouseenter and mouseleave events. JQuery provides a nice shortcut for that with the hover function:
$("#test a").hover(function() {
$(this).parent().tooltip("disable");
}, function() {
$(this).parent().tooltip("enable");
});
Note that you can use any relevant selector, not necessarily $(this).parent(), depends on how your HTML is structured
Here's the example fiddle updated: http://jsfiddle.net/957r8x51/
I might be on the wrong track, but is there a way to print the table resulted after filtering with tablesorter custom filters available here http://mottie.github.com/tablesorter/docs/example-widget-filter-formatter-1.html ?
If you just use the basic page print, it should print the table as you see it on the screen with the filters applied.
If you want all rows showing, then use a print style to reveal all hidden rows:
#media print {
table.tablesorter tbody tr {
display: table-row !important;
}
}
All the form examples in the docs for jQuery mobile show each form element on its own line. I would like to have a standard button (which will link to another page), to the right of a search input field. Is that possible with jQuery Mobile?
Thanks
Not natively as an inline unit. However, form elements can be used together with the layout grid system reasonably effectively:
http://jquerymobile.com/demos/1.1.0/docs/content/content-grids.html
jQM's UI grids force columns of equal width. In my case, i wanted the submit button to be just the icon to allow the search box more room. i saw <table> mentioned in a couple posts, but discovered that other inputs (notably selectmenu) don't work correctly when they're children of unexpected elements. [1]
So to avoid breakage of the widgets, i managed this:
.ui-grid-a.my-grid-a .ui-block-a.my-block-8515-a {
width: 84.95%;
}
.ui-grid-a.my-grid-a .ui-block-b.my-block-8515-b {
width: 14.95%;
}
It's not bullet-proof, but it can be expanded to additional grid definitions. It uses specificity to get all the grid rules of the existing UI, but then redefine the column widths. No inline styles, no additional tags, and the widgets don't break. And because of specificity, it can be loaded before or after jQM's structure stylesheet.
[1]: https://github.com/jquery/jquery-mobile/issues/6077 jQM Github bug report
With new version you can:
http://view.jquerymobile.com/1.4.0/demos/controlgroup/#Textinputs
The old style solution still works:overwriting the ui-input-search
div.ui-input-search{
width: 55%;
display: inline-block;
}
don't forget to add ui-btn-inline in the class of the a href (if you use the Button markup syntax)
I'm using the Accordion widget from jQuery UI.
Whenever I click a header to expand a section, that header (actually, the link inside the h3 element) is highlighted. In Chrome it has a blue highlight as if it were the currently selected field in a form.
I need to get rid of the blue highlight, so I hacked together the code below, and it seems to work so far.
However, I'm wondering if there's a better/cleaner way to do this in jQuery. Is this right??
$(function() {
$( "#mainnav" ).accordion().blur($('#mainnav'));
});
I didn't need jQuery to fix the problem after all (.blur() didn't seem to work).
jQuery was adding a class = "ui-state-focus" to the html, so I used CSS to indicate that this class shouldn't be outlined/highlighted, like so...
#mainnav .ui-state-focus {
outline: none;
}
For me works this for JQuery UI 1.9.2, Tabs widget:
#mainnav .ui-tabs-anchor {
outline: none;
}