2010-08-21 7 views
9

Tengo un div en el que creo un gráfico usando protovis. El div tiene width: 100% y height: 100% y el código para crear el gráfico usa $('#chart').width() y $('#chart').height() para obtener el tamaño del div en tiempo de renderizado y llenar la página con el gráfico. Capturo el evento de cambio de tamaño en la ventana y ajusto el div y el gráfico para que cambie el tamaño cuando la ventana cambie de tamaño.Desencadenar evento de cambio de tamaño en la impresión

Ahora necesito imprimir. Hubiera esperado que cuando el navegador mostrara la página para la impresora, cambiara el tamaño, pero no es así, al menos Safari y Firefox no lo hacen. Chrome hace algo extraño en el que cambia el tamaño solo de la altura, pero no del ancho. ¿Hay alguna manera de activar este comportamiento justo antes de imprimir?

EDITAR. Considere el siguiente 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>   

Cuando cambio el tamaño de la ventana, el contenido del div cambia. Cuando lo imprimo, el proceso de renderizado no activa el evento de cambio de tamaño.

+1

Compatibilidad del navegador para la impresión (tanto en términos de lo que se imprime, y el proceso de hacer la impresión suceda) es generalmente débil en el mejor. Estoy interesado en ver si alguien sugiere un buen truco, pero tengo dudas de que lo que quieres sea generalmente posible. – Pointy

+0

No hemos podido encontrar nada en línea con respecto a este tema. Podría tener que cambiar el tamaño de la ventana a algo razonable y luego imprimir la página. – rmarimon

+0

¿Has probado esto? pixelpalast

Respuesta

0

quizá

<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> 
+0

Me llevó mucho tiempo comprobar pero no funcionó en general. Funciona solo en cromo y lo hace sin el cambio en la altura o el ancho. – rmarimon

+0

downvoted porque esto no responde a la pregunta (cómo desencadenar el evento 'resize') – adamdport

+0

@adamdport ah ¿quiere decir que responder a un problema X/Y con una sugerencia que responde al problema subyacente merece un voto a la baja? Bueno, al menos te molestaste al comentar el voto ... – mplungjan

Cuestiones relacionadas