Valutazione 4.87/ 5 (100.00%) 5838 voti

Condividi:        

javascript per posizione layer in base alla risoluzione

Problemi di HTML? Di PHP, ASP, .NET, JSP, Perl, SQL, JavaScript, Visual Basic..?
Vuoi realizzare programmi in C, C++, Java, Ruby o Smalltalk, e non sai da che parte cominciare?
Entra qui e troverai le risposte!

Moderatori: Triumph Of Steel, archimede

javascript per posizione layer in base alla risoluzione

Postdi Dylan666 » 28/12/06 04:46

in questa discussione ho trovato questo javascript per trovare la risoluzione dello schermo e in base a quella specificare i pixel di allineamento sinistro di una layer:

Codice: Seleziona tutto
 <Script Language="JavaScript">
 function CheckResolution(){
 if (window.screen){
 var w = screen.width;
 
 if(w >= 740 & w < 835) {
 CheckResolution() = 800;}
 
 if(w >= 835) {
 CheckResolution() = 400; }
 }}


Il tipo voleva passare il valore direttamente nello sitole del tag DIV in questo mdodo...

Codice: Seleziona tutto
<div id="lyrTest" style="position:absolute; width:96px; height:40px;
z-index:1; background-color: #000000; layer-background-color: #000000;
border: 1px none #000000; left: javascript:CheckResolution();">


...ma non ci riusciva. Allora gli è stato consigliato di provare a far scrivere tutto il codice del layer da javascript... ma a me non viene nemmeno così.
Insomma, come scrivo la parte del layer in modo che riceva il numero 400 o 800?

Grazie ;)
Ultima modifica di Dylan666 su 07/01/07 18:51, modificato 1 volte in totale.
Avatar utente
Dylan666
Moderatore
 
Post: 38040
Iscritto il: 18/11/03 16:46

Sponsor
 

Postdi GAD » 28/12/06 11:08

La vedo dura perche' sei dentro alla stringa dello style, forse qualcosa si puo' fare ma senza dubbi odevi usare la document.write per scrivere in linea allo style del div, non puoi usare solo una funzione che ritorna un valore perche' sto valore va scritto da qualche parte.

Secondo me puoi
1) scrivere l'intero div dentro ad una funzione javascript dove puoi concatenare e quindi personalizzare tutte le variabili a piacimento

var left =100;
document.write("<div id=\"layer1\" style=\"left:"+left+"px\">");

2) mettere un div con dimensioni prestabilite nell'html, poi nell'onload della pagina calcoli la risoluzione esatta e richiami con la getElementById("layer1") tutti glie elementi di cui vuoi variare la dimensione passandogli poi l'attributo da modificare
es:
var e=document.getElementById("layer1");
if(e!=null)
e.style.width = ww + 'px';
Quando l'ultimo albero sarà abbattuto,l'ultimo pesce catturato,l'ultimo fiume avvelenato,
soltanto allora gli uomini si accorgeranno chei soldi non possono essere mangiati
GAD
Moderatore
 
Post: 2184
Iscritto il: 22/09/02 14:36
Località: Nebbiosa

Postdi Dylan666 » 28/12/06 21:29

Mettiamo che mi piaccia la prima idea.
Ho modificato il javascript così, ma senza dubbio toppo qualcosa:

Codice: Seleziona tutto
 <Script Language="JavaScript">
 function CheckResolution(){
 if (window.screen){
 var w = screen.width;
 
 if(w >= 740 & w < 835) {
 CheckResolution() = 800;}
 
 if(w >= 835) {
 CheckResolution() = 400; }
 }}

document.write('<div id="lyrTest" style="position:absolute; width:96px; height:40px; z-index:1; background-color: #000000; layer-background-color: #000000; border: 1px none #000000; left: '+CheckResolution+'"> </div>');
</script>


Dove sta il problema?
Il layer si vede ma non è distanziato a sinistra nemmeno di un pixel...

PS: come faccio a mettere in una variabile il risulato della funzione? È giusto CheckResolution() = ?
E come controllo il valore finale che ha avuto?
Avatar utente
Dylan666
Moderatore
 
Post: 38040
Iscritto il: 18/11/03 16:46

Postdi GAD » 28/12/06 22:17

Hai fatto un po' di casotto!
Richiami ricorsivamente la stessa funzione che scrive nella document.write...
e la funzione che dovrebbe scrivere non la richiami mai nel body

prova questo:
Codice: Seleziona tutto
<Script Language="JavaScript">
<!--
 function WriteDiv()
 {
 if (window.screen)
 {
    var w = screen.width;
    var left=0;

    if(w >= 740 & w < 835)
    left=800;

    if(w >= 835)
    left = 400;
 }

document.write('<div id="lyrTest" style="position:absolute; width:96px; height:40px; z-index:1; background-color: #000000; layer-background-color: #000000; border: 1px none #000000; left: '+left+'px"> </div>');
}
-->
</script>
<body>
<Script Language="JavaScript">
<!--
WriteDiv();
-->
</script>
</body>
Quando l'ultimo albero sarà abbattuto,l'ultimo pesce catturato,l'ultimo fiume avvelenato,
soltanto allora gli uomini si accorgeranno chei soldi non possono essere mangiati
GAD
Moderatore
 
Post: 2184
Iscritto il: 22/09/02 14:36
Località: Nebbiosa

Postdi Dylan666 » 29/12/06 02:14

A me infatti pareva scritto "strano" quel codice ... :P
Comunque ora funziona alla grande, grazie ;)
Avatar utente
Dylan666
Moderatore
 
Post: 38040
Iscritto il: 18/11/03 16:46

Re: javascript per posizione layer in base alla risoluzione

Postdi Dylan666 » 30/03/09 01:26

Riesumo il topic per un piccolo miglioramento in quel codice. Per piazzare il layer, che in questo caso è una fascetta che va sull'angolo, non va presa in considerazione la risoluzione dello schermo in senso assoluto, ma in senso relativo. Mi spiego: lo schermo è largo tot, e centrato orizzontalmente c'è il sito. Per far capitare la striscetta sempre sullo spigolo a qualunque risoluzione si prende la larghezza dello schermo e la si divide per due; ora è chiaro che se la tabella è centrata e larga per es. 400px bisogna spostarsi di 200 pixel a destra dal centro per trovarsi sullo spigolo. Così però la figura andrebbe esternamente rispetto alla tablella. Quindi ai 200 va tolta la largezza dell'imagine stessa della fascetta.

In poche parole:

Codice: Seleziona tutto
<script>
function WriteDiv()
{

var larghezza_schermo = screen.width;
var larghezza_tabella = 760;
var larghezza_immagine = 90;
var posizione = larghezza_schermo/2 + (larghezza_tabella/2 - larghezza_immagine);

document.write('<div align="center" style="position:absolute; width:90px; height:90px; z-index:1; left: '+posizione+'px;" id="Layer1"><img src="img/striscetta.gif" width="90" height="90" align="middle"></div>');
}
</script>
<body>
<Script Language="JavaScript">
<!--
WriteDiv();
-->
</script>
</body>
Avatar utente
Dylan666
Moderatore
 
Post: 38040
Iscritto il: 18/11/03 16:46

Re: javascript per posizione layer in base alla risoluzione

Postdi Triumph Of Steel » 01/04/09 23:02

scusa Dylan, ma il sito è al 100%?
perchè se è centrato, ed è largo tipo 800px, il JS è pressochè inutile.

in teoria ti basta posizionare un DIV con "position:relative", largo quanto il sito, e al suo interno, un DIV "position:absolute"

tipo, se la freccia va in alto a destra
Codice: Seleziona tutto
<div id="container" style="position:relative;width:800px">
    <div id="arrow" style="position:absolute;left:98%">FRECCIA</div>
</div>


aggiungi anche "top" se ti serve posizionarlo un po' più in basso rispetto al bordo superiore del div

oppure, puoi usare il "float" se usi SPAN invece che div
una cosa del genere
Codice: Seleziona tutto
<span style="float:right;">FRECCIA</span>


tutto dipende anche come è strutturato l'HTML.
Avatar utente
Triumph Of Steel
Moderatore
 
Post: 7852
Iscritto il: 22/08/01 01:00


Torna a Programmazione


Topic correlati a "javascript per posizione layer in base alla risoluzione":


Chi c’è in linea

Visitano il forum: Nessuno e 3 ospiti