14

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.

Ricardo Marimon
  • 10,339
  • 9
  • 52
  • 59
  • 1
    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
  • did you try this ? – pixelpalast Feb 12 '18 at 21:54

1 Answers1

1

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.

PoorlyWrittenCode
  • 1,003
  • 1
  • 7
  • 10
  • This does not answer the question of how to trigger the resize event. Unfortunately, in my case, I have a library that sets the height in the HTML style element. I need it to recalculate the height and width of a grid and redraw the contents prior to printing so CSS won't work. – Lee Aug 23 '23 at 18:26