CODEWITHSUNDEEP
javascripthtmlcssbrowser
Daniel
Daniel

Reputation: 135

How to trigger javascript function when select print preview

I use rangeslider to create a slider component, it looks like belowenter image description here

However, when I ready for print this, in print preview, the slider bar has scale in while slider button position value keep same with the value in html(In html, when window resize, there is a js function to re-calculate the size of bar and postion of slider button).

slider in print preview: enter image description here

So my question is, how to call function to re-calculate slider button postion in print preview, like window.resize event.

Appreciate for any comment!!

Upvotes: 3

Views: 6103

Answers (2)

bakrall
bakrall

Reputation: 633

I was looking for a jQuery equivalent of the solution proposed by @Moishe Lipsker but with no effect.

That is why for jQuery I make the changes on Print Preview once it is visible, with the following code:

$(window).on({
   'beforeprint': () => {
       this.detectPrintPreview();
    },
    'print-preview': () => {
        this.formatDesktopPrintPreview();
    }
});

detectPrintPreview() {
    $('.article-page').trigger('print-preview');
}

formatPrintPreview() {
    console.log('print preview');

    $('.box').appendTo('.example-elem);

}

Upvotes: 1

Moishe Lipsker
Moishe Lipsker

Reputation: 3032

To detect print requests with javascript you can try:

var beforePrintFunc = function() {
    ...
}
//for chrome
window.matchMedia('print').addListener(function(mql) {
    if (mql.matches) {
        beforePrintFunc();
    }
});

window.onbeforeprint = beforePrintFunc;

To detect after print preview event:

var afterPrintFunc = function() {
    ...
}
//for chrome
window.matchMedia('print').addListener(function(mql) {
    if (!mql.matches) {
        afterPrintFunc();
    }
});
window.onafterprint = afterPrintFunc;

However, there may be an easier approach as pointed out by @torazaburo in the comment below as long as you are only making styling changes:

@media print {
    //your print specific styles go here
}

Upvotes: 7

Related Questions