Fire javascript function when ctrl+p is pressed

Question

I need to destroy a jQueryUI tabs when somebody tries to print the page. I can't hide it with CSS as I need the data from these tabs.

Can anyone help/point me in the right direction with this? Perhaps there are other ways of achieving the same results?

By destroy i mean:

$('#tabs').tabs("destroy");

This has to work on IE7/8, as that is the browser used in the company.

Solution (Thanks to @Phil ):

//Destroys the tabs for print
window.onbeforeprint = destroyTabs;

//Remakes tabs after printing
window.onafterprint = makeTabs;


function makeTabs() {
    $('#tabs').tabs();
}

function destroyTabs() {
    $('#tabs').tabs('destroy');
}

So by "destroy" you mean undo the tabs effect but retain the data? — Pekka, Jul 05 '12 at 17:07
I don't understand why hiding it with CSS would destroy the data. If you set `display: none;`, the data in the tabs is still accessable from JS... isn't it? — Jack M, Jul 05 '12 at 17:08
You may be interested in [this](https://github.com/tzuryby/jquery.hotkeys). — Tyler Crompton, Jul 05 '12 at 17:09
`onbeforeprint` and `onafterprint` will only work in IE and Firefox 6+ so don't rely on them. See my answer for more details. — TJ VanToll, Jul 05 '12 at 17:43

Phil · Accepted Answer · 2012-07-05T17:19:35.127

3

This might work:

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

This is another shot in the dark (i haven't tried it) but:

<script type="text/javascript">
     window.onbeforeprint = destroyTabs;

     function destroyTabs(){
       $('#tabs').tabs('destroy').tabs();
     }
</script>

edited Jul 05 '12 at 17:19

answered Jul 05 '12 at 17:08

Phil

10,948
17
69
101

This hid the styling of the nav but it still prints just the tab that is visible not all of them (i forgot to mention that). – Drakkainen Jul 05 '12 at 17:11
This works if I remove the .tabs(); I just googled documentation for that function (as i've never seen it) and found onafterprint. So i made a function to make the tabs after print is done. Thanks a lot! – Drakkainen Jul 05 '12 at 17:26

score 1 · Answer 2 · answered Jul 05 '12 at 17:42

1

There is no way to do this in JavaScript in a cross browser friendly way.

The onbeforeprint and onafterprint methods will only work in IE and Firefox 6+. You can combine them with window.matchMedia to add support for Chrome 9+ and Safari 5.1+. I've written about how to implement this at http://tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/.

answered Jul 05 '12 at 17:42

TJ VanToll

12,584
4
43
45

Thankfully it only has to work on IE in this case. But your link is most definitely going into my bookmarks in case i need this cross-browser. – Drakkainen Jul 05 '12 at 17:49

score 0 · Answer 3 · answered Jul 05 '12 at 17:08

0

$(document).keypress("p",function(e) {
  if(e.ctrlKey)
    alert("Ctrl+P was pressed!!");
});

answered Jul 05 '12 at 17:08

Lowkase

5,631
2
30
48

This will not catch the use of the "print" icon. Or "File > Print". Or a changed printing hotkey. Or `window.print()`. – Pekka Jul 05 '12 at 17:09
@pekka this is, however, the answer to the question asked – Dave Jul 05 '12 at 17:11
I'm not worrying about the File>print just yet. And for some reason this didn't fire. I pasted it exactly as is. – Drakkainen Jul 05 '12 at 17:19

Fire javascript function when ctrl+p is pressed

3 Answers3

Linked