Javascript: Div in primo piano sempre fermo allo Scroll Di PAgina

lunedì 09 giugno 2008 - 09.46

Elenco Threads

Stanze Forum

Aggiungi ai Preferiti

Cerca nel forum

ridaria Profilo | Expert

905 messaggi | Data Invio: lun 9 giu 2008 - 09:46

Ciao Amici,

ho la necessità di tenere sempre fermo il div che apro sull'Intera pagina.

Vorrei in fondo che se l'utente fa lo scroll di pagina il div resti sempre nella stessa posizione.

Grazie a tutti.

Riccardo
Ridaria

Wamba Profilo | Expert

722 messaggi | Data Invio: lun 9 giu 2008 - 09:50

Ciao,
Hai provato con i css?

position: absolute;
top: distanza dal margine superione px;
left: distanza da destra px;
-----------------------------------------------------------
Solo chi ha il Caos dentro può generare una stella danzante
Wamba
http://blogs.ugidotnet.org/WamBlog/
http://www.intellimaker.com

gene_old Profilo | Junior Member

55 messaggi | Data Invio: lun 9 giu 2008 - 10:01

Prova dare al div la proprietà position:fixed tramite css con le relative coordinate.

AndreaKpr Profilo | Senior Member

265 messaggi | Data Invio: lun 9 giu 2008 - 10:32

Buondi. Per un problema simile ho usato javascript...

Premessa uso il Framework "ProtoType", creo il Div con " {position:relative}; "

>>> $('NomeDelTuoDiv').setStyle({top:DocumentHeightScroll()-24+'px',position:'absolute',width:DocumentWidth()+'px',left:'0px'});

>>> function DocumentHeightScroll() {
>>> var h;
>>> if(document.innerHeight){ h=document.innerHeight;
>>> } else if(document.documentElement.clientHeight){ h=document.documentElement.scrollHeight;
>>> } else if(document.body){ h=document.body.clientHeight; }
>>> return h;
>>> }

>>> function DocumentWidth() {
>>> var h;
>>> if(document.innerWidth){ h=document.innerWidth;
>>> } else if(document.documentElement.clientWidtht){ h=document.documentElement.clientWidth;
>>> } else if(document.body){ h=document.body.clientWidth; }
>>> return h;
>>> }

Ovviamente il div si posiziona sempre a piè di pagina indipendentemente al contenuto ed allo scrolling ...

gene_old Profilo | Junior Member

55 messaggi | Data Invio: lun 9 giu 2008 - 11:05

Perchè utilizzare javascript quando con una semplice regola in un foglio di stile riesci ad ottenere lo stesso risultato?
Alla fine avrai un codice meno invasivo e sicuramente più leggero.

AndreaKpr Profilo | Senior Member

265 messaggi | Data Invio: lun 9 giu 2008 - 11:13

Perchè sullo scroll della pagina il div si posizione dempre in basso alla pagina.
Il div è relativo alla dimensione del browser e non dell contenuto delle pagina...
Ho pensato anche io ad una regola css, ma non ne venivo a capo...

Ciauz.

gene_old Profilo | Junior Member

55 messaggi | Data Invio: lun 9 giu 2008 - 11:27

@ridaria: Puoi postare il codice di esempio?

@AndreaKpr : In questo caso ci deve essere un elemento che deve stare fisso allo scroll della pagina da quello che ho capito. Questo si può fare tramite regole css indipendentemente da altri fattori come "dimensioni del browser" ( immagino intendessi le dimensioni della finestra del browser).
Per quanto riguarda il posizionamento di un elemento in basso in base alla risoluzione, se intendi questo dovrebbe essere già stato affrontato:

http://css.html.it/guide/lezione/64/il-problema-del-footer/

A meno che io non abbia capito male il problema =)

AndreaKpr Profilo | Senior Member

265 messaggi | Data Invio: lun 9 giu 2008 - 11:36

@gene => Grazie per la dritta ci darò un occhiata. Sicuramente meno js c'è meglio è !!! ;o)

ridaria Profilo | Expert

905 messaggi | Data Invio: mar 10 giu 2008 - 09:12

ho provato così ma il div che sovrattongo alla pagina su muove insieme allo scroll!"!!!!!
#divAnteprima{
position :absolute ;

left :0px;
top:0px;
visibility:hidden ;
height :500px;
width:900px;
/*background-color:Gray;
filter:alpha(opacity=100);
opacity:1;*/
background-image: url(http://www.irc.it/images/overlay.png);
}

Il div in questione lo apro all'evento click che lancia questa funzione:

function zoomImage(idControlloImmaginePiccola, idDivContenitoreImmagineZoom, idControlloImmagineZoom) {
//document.getElementById("immagine").src="/images/error.gif"
var top;
var pathImmagine
var altezzaDiv;
var larghezzaDiv;
var w;
var h;
var largDivContImageZoom;
var altDivContImageZoom;

pathImmagine = document.getElementById(idControlloImmaginePiccola).src
//alert(pathImmagine)

if (IE) { // Se è explorer IE l'istruzione a destra del segno piu è per prendere la posizione della scroll Bar, ma questa è solo per IE per gli altri poi si vede
w = document.body.offsetWidth;
h = document.body.offsetHeight;
//alert(h)

top = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop)
document.getElementById("divAnteprima").style.visibility='visible';
document.getElementById("divAnteprima").style.top=top
document.getElementById("divAnteprima").style.left='0px'
document.getElementById("divAnteprima").style.width=w+"px"
document.getElementById("divAnteprima").style.height=h+"px"
document.getElementById(idControlloImmagineZoom).src=pathImmagine

largDivContImageZoom = document.getElementById(idDivContenitoreImmagineZoom).offsetWidth
//alert(largDivContImageZoom)
altDivContImageZoom = document.getElementById(idDivContenitoreImmagineZoom).offsetHeight

//alert((w/2)-parseInt(largDivContImageZoom))
document.getElementById(idDivContenitoreImmagineZoom).style.left = ((w/2)-(largDivContImageZoom/2))+'px'
document.getElementById(idDivContenitoreImmagineZoom).style.top = ((h/2)-(altDivContImageZoom))+'px'

//altezzaDiv=document.getElementById("divAnteprima").style.height

//alert(altezzaDiv)

//alert(w/2)
//alert(h)

} else { // se non è explorer
w = window.innerWidth;
h = window.innerHeight;
top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop
document.getElementById("divAnteprima").style.visibility='visible';
document.getElementById("divAnteprima").style.top=top+'px';
document.getElementById("divAnteprima").style.left='0px';
document.getElementById("divAnteprima").style.width=w+'px'
document.getElementById("divAnteprima").style.height=h+'px'

document.getElementById(idControlloImmagineZoom).src=pathImmagine;

largDivContImageZoom = document.getElementById(idDivContenitoreImmagineZoom).clientWidth;
//alert(largDivContImageZoom)
altDivContImageZoom = document.getElementById(idDivContenitoreImmagineZoom).oclientHeight;

//alert((w/2)-parseInt(largDivContImageZoom))
document.getElementById(idDivContenitoreImmagineZoom).style.left = ((w/2)-(largDivContImageZoom/2))+'px'
document.getElementById(idDivContenitoreImmagineZoom).style.top = ((h/2)-(altDivContImageZoom))+'px'

//altezzaDiv=document.getElementById("divAnteprima").style.height

//alert(altezzaDiv)

//alert(w)
//alert(h)

//alert (parseInt(document.getElementById(idOggetto).style.height))
}
}
Mi date una MAno???

Riccardo
Ridaria

gene_old Profilo | Junior Member

55 messaggi | Data Invio: mar 10 giu 2008 - 13:29

Il posionamento assoluto fa sì che un elemento rimanga in una certa posizione rispetto al diretto genitore con position:relative. In caso di scroll entrambi accompagnano il contenuto.

Come ti ho detto nel post precedente la proprietà position:fixed "fissa" un elemento in una posizione precisa non sensibile allo scroll della pagina. Prova utilizzare questa proprietà.

ridaria Profilo | Expert

905 messaggi | Data Invio: mer 11 giu 2008 - 09:48

ho provato così ma non accade nulla il div si muove insieme allo scroll!

#divAnteprima{
position :fixed ;

left :0px;
top:0px;
visibility:hidden ;
height :500px;
width:900px;
/*background-color:Gray;
filter:alpha(opacity=100);
opacity:1;*/
background-image: url(http://www.irc.it/images/overlay.png);
}

Sei certo di quello che dici?
Riccardo
Ridaria

gene_old Profilo | Junior Member

55 messaggi | Data Invio: mer 11 giu 2008 - 10:29

Le proprietà css non le ho inventate io =), forse il problema è il supporto, dipende su che browser testi il tuo sito.
L'esempio di codice che ti riporto fa un esempio di quello che ti dico:

 Il codice sorgente non è stato renderizzato qui
perchè non c'è sufficiente spazio.
Clicca qui per visualizzarlo in una nuova finestra

dove #posizionato è equivalente al tuo div.
Ora bisogna vedere dove testi il tuo sito, perchè su IE inferiori alla versione 7 position fixed è supportato solo per l'elemento body.
Ci sono cmq degli escamotage per renderlo compatibile anche su questi browser:

http://tagsoup.com/cookbook/css/fixed/

Se lo testi su mozilla e altri browser standard-compliant e continua a scrollare insieme alla pagina, immagino che il problema sia da qualche altra parte.

Torna su

Stanze Forum

Elenco Threads

Partecipa anche tu! Registrati!

Hai bisogno di aiuto ?
Perchè non ti registri subito?

Dopo esserti registrato potrai chiedere
aiuto sul nostro Forum oppure aiutare gli altri

Consulta le Stanze disponibili.

Registrati ora !