2010-08-21 13 views
9

Ho un div in cui creo un grafico utilizzando protovis. Il div ha width: 100% e height: 100% e il codice per creare il grafico utilizza $('#chart').width() e $('#chart').height() per ottenere la dimensione del div al momento del rendering e riempire la pagina con il grafico. Catturo l'evento di ridimensionamento sulla finestra e regola il div e il grafico in modo che si ridimensiona quando la finestra viene ridimensionata.Evento di ridimensionamento del trigger su stampa

Ora ho bisogno di stampare. Avrei sperato che quando il browser sta visualizzando la pagina per la stampante emette un ridimensionamento, ma non lo fa, almeno Safari e Firefox no. Chrome fa qualcosa di strano in cui ridimensiona solo l'altezza ma non la larghezza. C'è un modo per attivare questo comportamento appena prima della stampa?

MODIFICA. Considerare il seguente codice 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>   

Quando ridimensiono la finestra, il contenuto del div cambia. Quando lo stampo, il processo di rendering non attiva l'evento di ridimensionamento.

+1

Browser supportati per la stampa (sia in termini di ciò che viene stampato, e il processo di fare accadere stampa) è generalmente debole al meglio. Sono interessato a vedere se qualcuno suggerisce un buon trucco, ma ho dei dubbi sul fatto che ciò che desideri sia generalmente possibile. – Pointy

+0

Non sono stato in grado di trovare nulla online riguardo a questo problema. Potrei dover ridimensionare la finestra a qualcosa di ragionevole e quindi stampare la pagina. – rmarimon

+0

hai provato questo? pixelpalast

risposta

0

forse

<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

Mi ci è voluto molto tempo per controllare, ma non ha funzionato in generale. Funziona solo in chrome e lo fa senza modificare l'altezza o la larghezza. – rmarimon

+0

downvoted perché questo non risponde alla domanda (come attivare l'evento 'resize') – adamdport

+0

@adamdport ah intendi rispondere a un problema X/Y con un suggerimento che risponde al problema sottostante merita un downvote? Beh, almeno ti sei preoccupato di commentare il voto ... – mplungjan

Problemi correlati