Newsgroup: it.comp.lang.javascript
Titolo: Stampa e stili

Ciao a tutti
ho un piccolo problema che non riesco a risolvere, neppure dopo un'ora 
di ricerca con Google.
Dovrei impostare l'altezza di stampa di un oggetto dimanicamente via 
JavaScript.
So già che è possibile usare gli stili, specificando media="print" in 
una forma del tipo:
<STYLE type="text/css" media="print">
DIV#Pippo
{
    height:3cm;
}
</STYLE>
...
<DIV id="Pippo">Ciao!</DIV>
Quello che non riesco a fare è impostare dinamicamente l'altezza per la 
sola stampa via JavaScript: se faccio una cosa del tipo
<SCRIPT type="text/javascript" language="javascript">
function ImpostaAltezza(h)
{
    var p;
    p=document.getElementById("Pippo");
    p.style.height=h+"cm";
}
</SCRIPT>
Il codice mi ridimensiona "Pippo" anche a video, ma io lo vorrei fare 
solo per la stampa.
Certo, potrei definire un CSS con tutte le altezze:
<STYLE type="text/css" media="print">
.Alt1
{
    height:1cm;
}
.Alt2
{
    height:2cm;
}
.Alt3
{
    height:3cm;
}
/* Eccetera */
</STYLE>
ed usare una funzione del tipo
<SCRIPT type="text/javascript" language="javascript">
function ImpostaAltezza(h)
{
    var p;
    p=document.getElementById("Pippo");
    p.className="Alt"+h;
}
</SCRIPT>
Ma:
1) mi sembra abbastanza tedioso e non tanto furbo
2) dovrei prevedere un'infinità di classi (dato che l'altezza potrebbe 
variare da 0.1cm a 100cm
Qualcuno mi sa dare un'aiutino?
Grazie
    Michele

 di ricerca con Google.
Può esserti utile l'evento onbeforeprint / onafterprint? (se sì verifica la
compatibilità, io lo uso solo in intranet-IE). Esegui la tua function
onbeforeprint e la riesegui per riadattare a video onafterprint (a video
non noterai variazioni di layout).
-- 
"Emancipate yourselves from mental slavery;
None but ourselves can free our minds"
									    B.M.

 non noterai variazioni di layout).
Grazie mille per la risposta (e per la rapidità)!
Ho fatto delle prove: con IE6 funziona alla grande, ma né Firefox 1.0 né 
né Opera 7.23 ne vogliono sapere: gli eventi window.onbeforeprint e 
window.onafterprint non vengono generati.
Tanto per provare ho verificato anche 
window.document.onbeforeprint/window.document.onafterprint e
document.body.onbeforeprint/document.body.onafterprint... senza successo 
di nuovo.
Grazie comunque...
    Michele

 window.onafterprint non vengono generati.
Mi spiace ma non mi vengono in mente altre soluzioni
-- 
"E' l' ignoranza che crea l'intolleranza
 di gente cieca e senza coscienza"
									  S.S.S.

solo per la stampa.
Anche o SOLO a video? Dato che per il video il media e' screen non
sono molto sicuro che ti modifichi il media print che hai definito :-)
Dovresti provare a vedere se modificando i dati degli elementi
<style>, con  media "print" relativi alla "rule" che ti serve, da
javascript poi vengono usati al momento della stampa.
Un esempio su come accedere ai dati degli elementi <style> prendendo
esempio dal tuo codice:
<html>
<head>
<style type="text/css" media="print" title="the printer" id="prn">
div #Pippo{
 height:5cm;
 width:30cm;
}
a{display:none;}
</style>
<style type="text/css" media="screen">
div #Pippo{
 height:40px;
 width:230px;
}
a{background-color:#ffff00;}
</style>
<script type="text/javascript">
function test(){
 var i, j, li, l, cl, rules, lr, cr, s, out;
 var myselector="div #Pippo"; // il selector che ti interessa
 out=document.getElementById("out"); // per visualizzare i dati
 li=document.getElementsByTagName("style"); // elementi style
 l=li.length; // nr. elementi style
 for(i=0; i<l; i++) {
	cl = li[i]; // elemento style corrente
	s="<br/>CSS id= "+ 
cl.id
 + " title = "+cl.title+" media =" +
cl.media + "<br/>";
	if(typeof(cl.styleSheet)=="object"){
		// se e' quel maledetto di IE
		rules=cl.styleSheet.rules;
	} else if(typeof(cl.sheet)=="object"){
		// Mozilla
		rules=cl.sheet.cssRules;
	} else {
		out.innerHTML+="<br/>Impossibile accedere ai dati";
		return;
	}
	lr=rules.length; // nr. di rule
	s+="nr. rules = "+lr+"<br/>";
	try{
	for(j=0; j<lr; j++) {				
		cr=rules[j]; // rule corrente
		s+="rule "+j;
		// selector
		s+=" selectorText: "+cr.selectorText+"<br/>"; 
		// se e' il tuo
if(cr.selectorText.toUpperCase()==myselector.toUpperCase()){
			// visualizza le dimensioni
			s+=" height "+cr.style.height;
			s+=" width "+cr.style.width+"<br/>";
		} else {
			// non e' lui :)
			s+=" is not "+myselector+"<br/>";
		}
	}} catch(e){ s+=e.message+"<br/>"}
	out.innerHTML+=s;
 }
 out.innerHTML+="<hr/>";
}
</script>
</head>
<body>
<div id="Pippo">
pippo
</div>
<br/>
<div id="out">Visualizza CSS<hr/></div>
<a href="#" onclick="test();">Display CSS</a>
</body>
</html>
Funziona con IE 6.0 e Mozilla 1.73.
'bye

  li=document.getElementsByTagName("style"); // elementi style
Perche' utilizzi quest'approccio e non direttamente la styleSheets? Almeno
ti eviti l'if successivo.
E poi per fare quello che richiedeva l'utente, non sarebbe bastato un
codice piu' stringato, tipo (scritto al volo, quindi lascia stare le misure
in px):
<style type="text/css" media="print">
	div#pippo{
		height:20px;
	}
</style>
<style type="text/css">
	div#pippo{
		height:20px;
	}
</style>
</head>
<body>
<script type="text/javascript">	
	var css=document.styleSheets||null,cssRules=null;
	if (css && css[0]){
		cssRules=css[0].rules||css[0].cssRules||null;
	};
	if (cssRules && cssRules[0]){
		cssRules[0].style.height="40px";
	};
 
</script>
?
-- 
ZER0://coder.gfxer.web-designer/
~ Non esistono donne brutte. Dipende solo da quanta vodka bevi.
(proverbio russo)

Grazie mille a tutti!
Sono riuscito a risolvere il problema di ridimensionare un oggetto solo 
su stampa! Ecco come:
<HTML><HEAD>
<STYLE type="text/css" media="print" id="cssPrint">
DIV#Pippo
{
  height:0.7cm;
}
DIV#layAz
{
  display:none;
}
</STYLE>
<STYLE type="text/css" media="all">
DIV#Pippo
{
  border:1px solid black;
}
</STYLE>
<SCRIPT type="text/javascript" language="javascript">
function SetCSS(idCSS, nomeSelector,nomeStyle, valoreStyle)
{
  var oCSS, oRules, oRule, k;
  if(!document["getElementById"]) return(false);
  if(!(oCSS=document.getElementById(idCSS))) return(false);
  if(oCSS["styleSheet"])
   oRules=oCSS.styleSheet.rules;
  else if(oCSS["sheet"])
   oRules=oCSS.sheet.cssRules;
  else
   return(false);
  for(k=0; k<oRules.length; k++)
  {
   if(oRules[k].selectorText.toUpperCase()!=nomeSelector.toUpperCase())
    continue;
   oRules[k].style[nomeStyle]=valoreStyle;
   return(true);
  }
  return(false);
}
function test()
{
  if(SetCSS("cssPrint","DIV#Pippo","height","10cm"))
   document.getElementById("layAz").innerHTML="Eseguito";
  else
   alert("Errore!");
}
</SCRIPT>
</HEAD><BODY>
<DIV id="Pippo">Pippo</DIV>
<DIV id="layAz"><A href="#" onclick="test();return(false)">
Modifica altezza a stampa</A></DIV>
</BODY></HTML>
Non funziona con Opera (v7.23), ma Firefox (v1.0) ed Internet Explorer 
(v6.0) sě, e questo mi basta. Grazie mille a Cristiano, Agostino e Zero!!!
Ciao
    Michele