Run JS function only on screen (not print)?

Question

I have a DIV with long text and truncate it with a function. That is all good, until someone will print the page. The truncated text won't be readable.

Is there some way I can prevent it?

I have looked for an equivalent for CSS's media print, but all I can find works with screen width. I don't know what is better: to truncate only on for media screen or to remove the truncation on 'print'.

// Truncate the job description
$(function() {
    if ( $('#jetsSearch').length ) {
        $('.job-description').readmore({
            speed: 100,
            collapsedHeight: 50,
            moreLink: '<a href="#">Read more</a>',
            lessLink: '<a href="#">Less</a>',
        });
    }
});

I tried this one, but it doesn't work (still truncated)

if ( $('#jetsSearch').length && window.matchMedia("screen").matches) {

why don't you do the truncation in CSS (using text-overflow: ellipsis)? — Touffy
– Touffy, Commented Oct 23, 2017 at 15:44
I think the OP was looking for this to be done via 3rd party library as he appears to be using ReadMore.js. OP, i'd maybe tag your question with jquery and readmore.js to see if more peeps can come in to help — DMcCallum83
– DMcCallum83, Commented Oct 23, 2017 at 15:45

Robert Wade · Accepted Answer · 2017-10-23 16:41:32Z

1

It looks like you're using the readmore.js jquery plugin.

This is how I've handled the exact same issue. Readmore.js uses javascript to apply an inline style of height (among other things) to your container. The only way to override those inline styles in your CSS it to use the !important rule in your declaration.

So by adding height: auto; to elements with the data attribute of data-readmore with the important rule, you can override this for print styles (I use a print media query in my CSS for this). I also hide the "read more" link because it's irrelevant to printed pages.

@media print {
    [data-readmore] {
        height: auto !important;
    }
    [data-readmore-toggle] {
        display: none !important;
    }
}

edited Oct 23, 2017 at 16:41

answered Oct 23, 2017 at 16:31

Robert Wade

5,0231 gold badge20 silver badges37 bronze badges

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

Collectives™ on Stack Overflow

Run JS function only on screen (not print)?

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