Trigger resize event on print

Question

I have a div in which I create a chart using protovis. The div has width: 100% and height: 100% and the code to create the chart uses $('#chart').width() and $('#chart').height() to get the size of the div at render time and fill the page with the chart. I capture the resize event on the window and adjust the div and the chart so that it resizes when the window resizes.

Now I need to print. I would have hoped that when the browser is rendering the page for the printer it issues a resize but it doesn't, at least Safari and Firefox don't. Chrome does something strange in which it resizes only the height but not the width. Is there a way to trigger this behavior just before print?

EDIT. Consider the following html

<html>
  <head>
    <title>Resize</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $('#chart').resize(function() {
          $(this).html('chart size is ' + $('#chart').width() + ' x ' + $('#chart').height());
        })        
      });
      $(window).resize(function() {
        $('.resizable').resize();
      });
    </script>
    <style type="text/css">
      #chart { width: 100%; height: 100%; background: gray; border: 1px solid black;}
    </style>
  </head>
  <body>

    <div id="chart" class="resizable">
    </div>

  </body>
</html>

When I resize the window the content of the div changes. When I print it the render process does not fire the resize event.

Browser support for printing (both in terms of what gets printed, and the process of making printing happen) is generally weak at best. I'm interested to see if anybody suggests a good trick, but I have doubts that what you want is generally possible. — Pointy, Aug 21 '10 at 17:27
Haven't been able to find anything online regarding this issue. I might have to resize the window to something reasonable and then print the page. — Ricardo Marimon, Aug 21 '10 at 17:46

score 1 · Answer 1 · answered May 17 '18 at 03:56

Rather than mutating the chart properties with an event, the @media print css rule might help here. https://developer.mozilla.org/en-US/docs/Web/CSS/%40media

@media print{
  #chart { width: 100%; height: 98%; background: gray; border: 1px solid black;}
}

With this method, these style properties are applied on print, regardless what other changes you've made.

score 0 · Answer 2 · answered Aug 21 '10 at 18:30

0

perhaps

<style type="text/css">
      #chart { width: 100%; height: 100%; background: gray; border: 1px solid black;}
</style>

<style type="text/css" media="print">
      #chart { width: 100%; height: 98%; background: gray; border: 1px solid black;}
</style>

answered Aug 21 '10 at 18:30

mplungjan

134,906
25
152
209

It took me long to check but it didn't work in general. It works only in chrome and it does without the change in the height or width. – Ricardo Marimon Aug 31 '10 at 23:59
downvoted because this doesn't answer the question (how to trigger the `resize` event) – adamdport Aug 07 '17 at 15:38
@adamdport ah you mean answering an X/Y problem with a suggestion that answers the underlying problem deserves a downvote? Well at least you bothered commenting the vote... – mplungjan Aug 07 '17 at 15:46
@adamdport PS: 2010 - really need to visit such old posts and vote them down? – mplungjan Aug 07 '17 at 20:13

Trigger resize event on print

2 Answers2

Linked