I use rangeslider to create a slider ponent, it looks like below

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:

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

Appreciate for any ment!!

I use rangeslider to create a slider ponent, it looks like below

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:

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

Appreciate for any ment!!

• javascript
• html
• css
• browser

• Can create jsfiddle jsfiddle to demonstrate ? – guest271314 Commented Sep 2, 2015 at 6:14
• Tak a look at this article. It shows some possible ways how to detect user's request to print. Not sure if you'll be able to alter the appearance of the document afterwards, however. Give it a shot. Nothing to lose, right? – ROAL Commented Sep 2, 2015 at 6:26

2 Answers 2

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 ment below as long as you are only making styling changes:

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

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);

}