Spostare un <DIV> tramite coordinate

Ciao ragazzi,
sapete come si rende compatibile questo codice con firefox!?!?

popup.style.left = window.event.clientX + 5;
popup.style.top = window.event.clientY + 2;

questo funziona solo su Winzozz

On Wed, 30 Mar 2005 11:58:09 +0200, AlterX wrote:

Ciao ragazzi,
sapete come si rende compatibile questo codice con firefox!?!?

popup.style.left = window.event.clientX + 5;
popup.style.top = window.event.clientY + 2;

Secondo specifiche non esiste un oggetto "event" come proprietà di window;
è una cosa fuori standard che ha IE.

Il discorso è molto semplice: quando viene si scatena un evento, se a tale
evento è associata una funzione, ad essa viene passato anche l'oggetto
evento specifico, in quel frangente generato.

Inoltre, se stai usando un doctype corretto devi sempre ricordarti di
assegnare l'unità di misura, altrimenti non funziona.

Velocemente:

<style type="text/css">
#mylayer{
position:absolute;
top:0;
left:0;
width:100px;
height:40px;
background:#eee;
}
</style>

<div id="mylayer"></div>

<script type="text/javascript">
document.onmousemove=function(e){
e=e||event;
var popup=document.getElementById("mylayer");
popup.style.left=(e.clientX+5)+"px";
popup.style.top=(e.clientY+2)+"px";
}
</script>

questo funziona solo su Winzozz

Forse intendevi IE/Win. Anche Firefox ha Windows, tra le sue piattaforme.

--
ZER0

~ The Tangent Universe collapsed 5995 days, 5 hours, 30 minutes and 42 seconds ago.

On Wed, 30 Mar 2005 11:58:09 +0200, AlterX wrote:

Ciao ragazzi,
sapete come si rende compatibile questo codice con firefox!?!?

popup.style.left = window.event.clientX + 5;
popup.style.top = window.event.clientY + 2;

Secondo specifiche non esiste un oggetto "event" come proprietà di window;
è una cosa fuori standard che ha IE.

Il discorso è molto semplice: quando si scatena un evento, se a esso
è associata una funzione, a quest'ultima viene passato anche l'oggetto
evento specifico, in quel frangente generato.

Inoltre, se stai usando un doctype corretto devi sempre ricordarti di
assegnare l'unità di misura, altrimenti non funziona.

Velocemente:

<style type="text/css">
#mylayer{
position:absolute;
top:0;
left:0;
width:100px;
height:40px;
background:#eee;
}
</style>

<div id="mylayer"></div>

<script type="text/javascript">
document.onmousemove=function(e){
e=e||event;
var popup=document.getElementById("mylayer");
popup.style.left=(e.clientX+5)+"px";
popup.style.top=(e.clientY+2)+"px";
}
</script>

questo funziona solo su Winzozz

Forse intendevi IE/Win. Anche Firefox ha Windows, tra le sue piattaforme.

--
ZER0

~ The Tangent Universe collapsed 5995 days, 5 hours, 30 minutes and 42
seconds ago.

[cut]

div id="mylayer"></div

script type="text/javascript"
document.onmousemove=function(e){
e=e||event;
var popup=document.getElementById("mylayer");
popup.style.left=(e.clientX+5)+"px";
popup.style.top=(e.clientY+2)+"px";
}
/script


Ok, ma devo passarlo io come parametro alla funzione legata all'evento?!?

perchè ho anche la guida ufficiale di netscape che, nella vers 1.2, dice
che l'oggetto event esiste, ma non è così!

On Wed, 30 Mar 2005 12:48:27 +0200, AlterX wrote:

div id="mylayer"></div

script type="text/javascript"
document.onmousemove=function(e){
e=e||event;
var popup=document.getElementById("mylayer");
popup.style.left=(e.clientX+5)+"px";
popup.style.top=(e.clientY+2)+"px";
}
/script

Ok, ma devo passarlo io come parametro alla funzione legata all'evento?!?

Dipende da come associ la funzione in questione.
Un modo è quello mostrato nel codice che ti ho scritto. Come vedi, non devi
passare alcunché.

Se invece associ l'event handler da codice di markup, allora devi
esplicitare il passaggio dell'oggetto event:

<div onclick="foo(event)" >click me<div>

"foo" sarà qualcosa del tipo:

function foo(e){
alert(e.clientX+"x"+e.clientY);
}

Come puoi notare, rispetto al metodo precedente c'è una differenza.

E' stata omessa questa linea di codice:

e=e||event

Questo perché utilizzando la prima associazione che ti ho mostrato, i
browser w3c compliant passano l'oggetto event, mentre IE no. Quindi si
trova un parametro "e" non definito. Con quella riga di codice, facciamo in
modo che se tale parametro non è definito, assuma il valore di "event",
cosa che rende crossbrowser il codice.

Nel secondo metodo, invece, questo non è necessario in quanto l'oggetto
event viene reso esplicito nella chiamata della funzione; e quindi sarà
sempre avvalorato, sia per IE che per i browser w3c compliant.

perchè ho anche la guida ufficiale di netscape che, nella vers 1.2, dice
che l'oggetto event esiste, ma non è così!

L'oggetto event esiste (vedasi il secondo metodo), solo che non è gestito
alla stessa maniera di IE (che non segue gli standard).

--
ZER0

~ The Tangent Universe collapsed 5995 days, 7 hours, 6 minutes and 16 seconds ago.

[cut]

Questo perché utilizzando la prima associazione che ti ho mostrato, i
browser w3c compliant passano l'oggetto event, mentre IE no. Quindi si
trova un parametro "e" non definito. Con quella riga di codice, facciamo in
modo che se tale parametro non è definito, assuma il valore di "event",
cosa che rende crossbrowser il codice.

Nel secondo metodo, invece, questo non è necessario in quanto l'oggetto
event viene reso esplicito nella chiamata della funzione; e quindi sarà
sempre avvalorato, sia per IE che per i browser w3c compliant.



perchè ho anche la guida ufficiale di netscape che, nella vers 1.2, dice
che l'oggetto event esiste, ma non è così!



L'oggetto event esiste (vedasi il secondo metodo), solo che non è gestito
alla stessa maniera di IE (che non segue gli standard).



Ho risolto grazie...ho passato event come parametro della chiamata associata

e funziona alla perfezione!!
Grazie