1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Transform Scale Via JQuery/CSS - but for Print

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

  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