Modifying @media print using jQuery

Question

Is there a way to manipulate the @media print with jQuery?

I have a table and I want to count the rows and if the number of rows is greater than a specific number I would apply the page-break-after

$('.print').on('click', function () {
    var r = 0;
    $('.invoice table tbody tr').each(function () {
    r+=1;
    if(r == 30){
        if($('.footer').css('display') == 'none'){
            $('.invoice table tbody').css('page-break-after', 'always');
        }
    }
})

Where

the $('.print') is the button that trigger the window.print() action but it doesn't workI hide the footer while printing using @media print in css file
I hide the footer while printing using @media print in css file (the '.invoice table tbody' has also a specific styling in @media print and i want to add the page break property but using jQuery)

charlietfl · Accepted Answer · 2017-01-08 01:28:14Z

1

Use a css style rule for a class and add that class where applicable. Something like:

var numRows = $('.invoice table tbody tr').length;

if(numRows >= 30 && !$('.footer:visible').length ){
   $('.invoice table tbody').addClass('page-break-class')
}

CSS

@media print {
    tbody.page-break-class {page-break-after: always;}
}

edited Jan 8, 2017 at 1:28

answered Jan 8, 2017 at 1:22

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Modifying @media print using jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related