Transform Scale Via JQuery/CSS - but for Print

Discussion in 'JavaScript' started by ccoonen, Feb 14, 2018.

0
  1. #1
    Hey guys, I just got done converting my site to fully responsive (http://www.product-manuals.com/) and all is well, in all (most) browsers. My issue is that it uses JS to watch any width() changes to the screen and apply a scale change to content of my content pages (http://www.product-manuals.com/category/tvs/brand/vizo/product/E600I-B3/manualtype/usermanual/). this works GREAT - but how can I apply jquery.css() to a media specific? When you do a print, the scale of the content is way to big for the printer. One possibly idea I had was, instead of writing to the dom element itself the css properties, just alter the html of a div with the new CSS that would be wrapped in media print element - but I think that will take a performance hit. Any suggestions on how to apply media type to a jquery.css() call?

    Thanks!
     
    ccoonen, Feb 14, 2018 IP
  2. ccoonen

    ccoonen Well-Known Member

    Messages:
    1,606
    Likes Received:
    71
    Best Answers:
    0
    Trophy Points:
    160
    #2
    Just for reference, here is how I am transforming the scale of the content

    $(document).ready(function () {
    var oldScale = -1;
    function resizeManualContent() {
    var newScale = ($(window).width() <= 1080)
    ? $(window).width() / 800
    : 1.35;
    if(oldScale != newScale) {
    oldScale = newScale;
    $('#manual-content').css({
    '-webkit-transform' : 'scale(' + newScale + ')',
    '-moz-transform' : 'scale(' + newScale + ')',
    '-ms-transform' : 'scale(' + newScale + ')',
    '-o-transform' : 'scale(' + newScale + ')',
    'transform' : 'scale(' + newScale + ')'
    });
    }
    }
    resizeManualContent();
    $(window).on('load resize', resizeManualContent);
    $('.loading').hide();
    $('#manual-content').show();
    });
     
    ccoonen, Feb 14, 2018 IP