Leggere Altezza finestra e passarla al css

**Il Pazzo** · 19-12-2007, 02:49

Per ora prendo l'altezza dello schermo, no della finestra... ma va bene così... mi interessa solo capire come unire un js ai css..... il codice è questo:

codice:

<html>

	<head>
		<title>TM</title>
	
                <script language="javascript">
		          var s_height ='';
                          s_height=screen.height;
                          document.write('<style type="text/css"> div#container {height:'+s_height+'px; border:dashed #002296 thin;} </style>');
                </script>
	</head>

	<body>
    	
		<div id="container">
	   		
 	 	</div>
</body>
    
</html>

ok... questo funziona... Ora provo a mettere il js in un documento esterno... però non funziona più... ecco il codice:

Codice PHP:


<html>



    <head>

        <title>TMC - Tinteggiatue e Moduli di Cartongesso di Scoglio Daniele</title>

                <script src="Scripts/Immagini.js" type="text/javascript"></script>

    </head>



    <body onLoad="resize();">

        

        <div id="container">

               

          </div>

</body>

    

</html>

E il js:

Codice PHP:


function resize() {



        var s_height ='';

s_height=screen.height;



document.write('<style type="text/css"> div#container {height:'+s_height+'px; border:dashed #002296 thin;} </style>');

}

L'indirizzo del js... è corretto... controllato più volte....

Perchè non funziona??

**Xinod** · 19-12-2007, 04:53

prima di tutto un document.write a pagina completamente renderizzata sostituisce il documento stesso con quanto scritto dal document.write,
in questo caso cio' che resta e' il tuo blocco di stile

poi ti consiglio di creare un elemento style ed appenderlo all' head del documento
cosa trattata di recente qui
http://forum.html.it/forum/showthrea...readid=1192729

ciao

**Il Pazzo** · 19-12-2007, 11:06

Originariamente inviato da Xinod
prima di tutto un document.write a pagina completamente renderizzata sostituisce il documento stesso con quanto scritto dal document.write,
in questo caso cio' che resta e' il tuo blocco di stile

poi ti consiglio di creare un elemento style ed appenderlo all' head del documento
cosa trattata di recente qui
http://forum.html.it/forum/showthrea...readid=1192729

ciao

Perdonami... ho iniziato da poco e non capsico 2 cose:
- Il primo paragrafo della tua risposta; che vuol dire?
- Il secondo paragarafo

cioè... non capisco come quella cosa possa sostituire quello che voglio fare io....

**Il Pazzo** · 19-12-2007, 15:59

Originariamente inviato da Xinod
poi ti consiglio di creare un elemento style ed appenderlo all' head del documento
cosa trattata di recente qui
http://forum.html.it/forum/showthrea...readid=1192729

Ma non capisco, perchè mi hai imandato a quella pagina? Che senso ha fare una cosa di quelle? Cioè... a che serve quel codice lì... mica lo capisco...

**Mega69** · 19-12-2007, 20:17

Se document.write o document.writeln vengono chiamati dopo che la pagina è stata caricata cancellano tutto ciò che c'è nel documento. In pratica ti ritroveresti con una pagina bianca ( con dentro solo il blocco di stile appunto ) .
Quel link che ha postato Xinod è uno script che fa la stessa identica cosa che vuoi ottenere tu senza cancellarti niente

**Il Pazzo** · 19-12-2007, 20:27

Originariamente inviato da Mega69
Se document.write o document.writeln vengono chiamati dopo che la pagina è stata caricata cancellano tutto ciò che c'è nel documento. In pratica ti ritroveresti con una pagina bianca ( con dentro solo il blocco di stile appunto ) .
Quel link che ha postato Xinod è uno script che fa la stessa identica cosa che vuoi ottenere tu senza cancellarti niente

ok grazie per la spiegazione.... intanto mentre provo a risistemare il codice, c'è una cosa ceh non capisco:

Codice PHP:


height = screen.height - (screen.height * 40 / 100);

width = screen.width - (screen.width * 20 / 100);

left = (screen.width - width) / 2.2;

top = (screen.height - height) / 7;



document.write('<style type="text/css">' +

                    'div#container{' +

                        'height:' + height + 'px;' +

                        'width:' + width + 'px;' +

                        'left:' + left + 'px;' +

                        'top:' + top + 'px;' +            

                    '}' + 

               '</style>');

Perchè per centrarlo devo dividere per 2.2 e per 7??? E non per 2?

E poi come posso mettere tutto in un file js e continuare a farlo funzionare??

**Xinod** · 19-12-2007, 20:32

non e' mica obbligatorio dividere per 2.2,
se lo sara' inventato chi ha scritto quel pezzo di codice
in qualsiasi altro script al riguardo sara' diviso per 2

E poi come posso mettere tutto in un file js e continuare a farlo funzionare??

te l' abbiamo gia' detto e ripetuto,
usa quel codice della discussione che ti ho linkato prima.

**Il Pazzo** · 19-12-2007, 22:27

Originariamente inviato da Xinod
te l' abbiamo gia' detto e ripetuto,
usa quel codice della discussione che ti ho linkato prima.

Ah ecco.... non avevo capito.... avevo capito che il motivo di quel codice era un altro... si.. ora mi è più chiaro allora.... grazie

Originariamente inviato da Xinod
non e' mica obbligatorio dividere per 2.2,
se lo sara' inventato chi ha scritto quel pezzo di codice
in qualsiasi altro script al riguardo sara' diviso per 2

No, ma guarda che il codice l'ho scritto io..... il punto è che voglio il container al centro con ogni risoluzione (si lo so, si può fare anche con i CSS... se ho capito bene l'unico modo sono i margini negativi... se così, allora mi hanno dato più problemi che altro)...
Ora leggendo il codice che ho scritto, per logica, il container dovebbe stare al centro se divido per 2... invece se divido per 2, il container mi sta un pochino a destra ed esageratamente troppo in basso.... con quei valori lì (credo illogici e trovati con un paio di prove) mi sta al centro invece...

Ecco il link alla pagina nel caso in cui divido per 2....

Perchè?

**Xinod** · 19-12-2007, 22:56

hai un posizionamento inatteso perche' l' elemento e' in posizionamento relativo,
quindi nel normale flusso di visualizzazione del documento,
quindi dipendente da eventuali margini/padding di elementi che lo contengono (nella fattispecie il body)
che tu non ti sei preoccupato di azzerare

altrimenti settalo in posizionamento assoluto e il problema non sussiste

poi, per questi calcoli e' futile basarsi sullo schermo perche' non e' detto che la finestra venga massimizzata, quindi basati sulle dimensioni della parte visibile del documento (viewport)

ciao

**Il Pazzo** · 19-12-2007, 23:11

Originariamente inviato da Xinod
hai un posizionamento inatteso perche' l' elemento e' in posizionamento relativo,
quindi nel normale flusso di visualizzazione del documento,
quindi dipendente da eventuali margini/padding di elementi che lo contengono (nella fattispecie il body)
che tu non ti sei preoccupato di azzerare

altrimenti settalo in posizionamento assoluto e il problema non sussiste

Ah ok... pensavo non fosse necessario azzerare i margini/bordi/padding del body... pensave che non avendone dati fossero già a 0.... ora provo a settarli a 0, nel caso il problema imane provo con il posizionamento assoluto e ti faccio sapere grazie.....

Originariamente inviato da Xinod
poi, per questi calcoli e' futile basarsi sullo schermo perche' non e' detto che la finestra venga massimizzata, quindi basati sulle dimensioni della parte visibile del documento (viewport)
ciao

Si ci avevo pensato onestamente, però ho anche pensato che se restringo troppo la finestra rischio di avere i contenuti della pagina troppo piccoli.... non so... che dici tu che sei più esperto di me?

Discussione: Leggere Altezza finestra e passarla al css

Strumenti discussione

Ricerca discussione

Visualizza

Leggere Altezza finestra e passarla al css

Permessi di invio