Search jQuery

jQuery Forum

tabs and the print stylesheet

in Using jQuery UI • 2 years ago

just wondering how i would "disable" tabs for a print style sheet, so that the content of all tabs would be listed and print.

roxstyle

Replies(4)

kbwood.au

Re: tabs and the print stylesheet

2 years ago

Try this:

@media print {
.ui-tabs-nav { display: none; }
.ui-tabs .ui-tabs-hide { display: block !important; }
}

sorin_pos..

Re: tabs and the print stylesheet

6 months ago

Hello guys,

The quick fix from above doesn't work anymore in jquery-ui 1.9, because it seems that the tabs are now hidden explicitly with <div style="display:none">
Can any of you tell me which is the preferred way to print all tabs when using jquery-ui 1.9 ?

Thanks!

sorin_pos..

Re: tabs and the print stylesheet

6 months ago

My solution for the moment was the following: I added a "Print" button inside the page and I attached some javascript handler to it:

$("#printButton").click(function(){
   // Before printing show all the tab panel contents
   $('.ui-tabs-panel').show();
   // Print the page
   window.print();
   // After printing hide back all the tab panel contents which are supposed to be hidden
   $('.ui-tabs-panel[aria-hidden=true]').hide();
});

But of course this solutions will not work if the user presses Ctrl+P or it they use the Print buttons from the browser menus...