Menu
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.
417
The resize event fires when the document view (window) has been resized. This event is not cancelable and does not bubble. In some earlier browsers it was possible to register resize event handlers on any HTML element.
jQuery resize() MethodThe resize event occurs when the browser window changes size. The resize() method triggers the resize event, or attaches a function to run when a resize event occurs.
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.
76
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
