[DHTML] Coordinate DIV?

spk · 11-12-2006, 16:19

Ho uno script che crea un menu a tendina, ma questo script chiede di impostare le coordinate giuste x e y, ma questo mi rovina tutto se ridimensiono la pagina, dato che è in formato "larga colonna centrale"

mi servirebbe quindi trovare le cordinate del DIV dove dovrebbe stare, in modo da crearlo lì dentro ad ogni esecuzione

o ancora meglio trovare il modo di eliminare questa prepotenza della posizione statica

AlexGatti · 11-12-2006, 23:10

io per avere le coordinate di un oggetto uso questo:

Codice:

function getAbsolutePosition(el)
{
    var r = {x: el.offsetLeft, y: el.offsetTop};
    if (el.offsetParent) {
        var tmp = getAbsolutePosition(el.offsetParent);
        r.x += tmp.x;
        r.y += tmp.y;
    }
    return r;
}

ti restituisce un oggetto con proprietà x e y che indicano le coordinate assolute di "el".

non funziona sempre e su tutte le pagine, con pagine un po' strane so che può dare dei problemi. A me fin'ora è andata bene.

spk · 11-12-2006, 23:10

ho parzialmente trovato la soluzione

con queste due righette dovrei trovare le coordinate dell'angolo in alto a sinistra del DIV "navigation"

var y= document.all("navigation").currentStyle.top
var x= document.all("navigation").currentStyle.left

queste altre due righe poi posizionano il menù correttamente nella pagina
//Variables to set:
slideMenu.menuy= 120 //The top placement of the menu.
slideMenu.menux= x //The left placement of the menu

ma questo funziona solo con IE...con firefox mi sfascia la struttura della pagina

se provo a mettere un:
document.write(y)
document.write(x)

in IE mi ritrovo scritto "autoauto", eppure funziona...che vuol dire?

spk · 11-12-2006, 23:16

funziona!

ti voglio bene!

però così tipo se ridimensiono dopo devo fare un aggiorna per rimettere il menu al suo posto

qual'è il modo migliore per aggirare questo fastidio?

AlexGatti · 11-12-2006, 23:25

Quote:

Originariamente inviato da spk

funziona!

ti voglio bene!

però così tipo se ridimensiono dopo devo fare un aggiorna per rimettere il menu al suo posto

qual'è il modo migliore per aggirare questo fastidio?

hai usato la "mia" funzione?
In realtà io l'ho copiata altrove. Guarda ti faccio un altro regalo (se non lo conoscevi già)
http://www.google.com/codesearch
cerca in tutto il codice open source, qualsiasi linguaggio (specificabile, per trovare questa funzione ho usato "lang:javascript")

se devi sovrapporre il menu al resto della pagina (come penso) l'unico modo è appunto avere un div con posizione assoluta (come fai già) e dunque devi riposizionare tutto quando la pagina viene ridimensionata.

spk · 11-12-2006, 23:41

fenomenale questo google codesearch!
esatto ho usato proprio la funzione che hai postato sopra

adesso sto cercando qualcosa del tipo onResize() così da spostare il menu ogni volta che c'è il ridimensionamento

EDIT:
<body onresize="location.reload()"> funziona, ma solo su Internet Explorer!
dannazione

AlexGatti · 11-12-2006, 23:50

Quote:

Originariamente inviato da spk

fenomenale questo google codesearch!
esatto ho usato proprio la funzione che hai postato sopra

adesso sto cercando qualcosa del tipo onResize() così da spostare il menu ogni volta che c'è il ridimensionamento

io come riferimento per il javascript uso: http://www.devguru.com/Technologies/...ipt_index.html

e comunque onresize esiste ed è un evento dell'oggetto window, come puoi vedere qui:
http://www.devguru.com/Technologies/..._onresize.html

P.s.: altra possibile guida al javascript
http://developer.mozilla.org/en/docs...ript_1.5_Guide

spk · 11-12-2006, 23:57

devo ancora studiare come funzionano gli event handler in javascript, ma per oggi è abbastanza

sinceramente è la prima volta che costruisco un sito interamente in CSS + DHTML ... ma è per un'associazione di volontariato quindi ci tengo a fare le cose per bene

nel frattempo ti ringrazio per le guide postate, saranno i primi riferimenti!

ciao!

spk · 12-12-2006, 15:33

ho individuato la funzione che mi serve

window.onresize =
function onresize()
{
alert('ciao')
}

così facendo ho il messaggino appena ridimensiono, ma non riesco a spostare il menù poiche l'init dello stesso avviene alla creazione della pagina, e non mi è possibile spostarlo senza un refresh

se riprovo a dare l'init() mi da pagina bianca come in loop

sto cercando di fare un refresh al redimensionamento tramite il metodo reload() come descritto qui http://www.devguru.com/Technologies/...ef/reload.html ma non mi funziona ne in IE nè in firefox

AlexGatti · 13-12-2006, 09:21

Quote:

Originariamente inviato da spk

ho individuato la funzione che mi serve

window.onresize =
function onresize()
{
alert('ciao')
}

così facendo ho il messaggino appena ridimensiono, ma non riesco a spostare il menù poiche l'init dello stesso avviene alla creazione della pagina, e non mi è possibile spostarlo senza un refresh

se riprovo a dare l'init() mi da pagina bianca come in loop

sto cercando di fare un refresh al redimensionamento tramite il metodo reload() come descritto qui http://www.devguru.com/Technologies/...ef/reload.html ma non mi funziona ne in IE nè in firefox

beh ma questo è un problema del tuo init o di cosa fai in questo fantomatico init.
nell'onresize devi dargli solo le istruzioni per riposizionare il menu, non devi reinizializzare tutto.

Il reload non è affatto una soluzione in quanto ricarica dal server TUTTA la pagina, come se tu premessi il bottone di refresh.
Inoltre se per caso al caricamento della pagina tu cambi le dimensioni della finestra per qualche motivo, fai scattare di nuovo l'onresize che fa il reload che ricarica la pagina e così via a ciclo continuo.
Usare il reload è un problema in più, non la soluzione.

spk · 13-12-2006, 13:11

Quote:

Originariamente inviato da AlexGatti

beh ma questo è un problema del tuo init o di cosa fai in questo fantomatico init.
nell'onresize devi dargli solo le istruzioni per riposizionare il menu, non devi reinizializzare tutto.

Il reload non è affatto una soluzione in quanto ricarica dal server TUTTA la pagina, come se tu premessi il bottone di refresh.
Inoltre se per caso al caricamento della pagina tu cambi le dimensioni della finestra per qualche motivo, fai scattare di nuovo l'onresize che fa il reload che ricarica la pagina e così via a ciclo continuo.
Usare il reload è un problema in più, non la soluzione.

capisco

allora lavoro sull'init, ma ora ti spiego come funziona:
dopo aver importato il sidemenu.js (non altro che un cumulo di funzioni) si apre uno script all'interno della pagina dove si creano due variabili

slideMenu.menuy= 120 //The top placement of the menu.
slideMenu.menux= x //The left placement of the menu

dove al momento x è

var x =getAbsolutePosition(navigation).x (grazie ancora

)

"navigation" è il nome del DIV (il frameset è emulato coi css)

a fine script si da il
slideMenu.init()

ed il menù viene creato all'interno della pagina

se provo a ricrearlo nel resize()...mi da quella pagina bianca che ti dicevo

insomma qua crea l'oggetto
slideMenu = new createSlideMenu("slideMenu")

adesso sto pensando di "distruggere l'oggetto" per poi ricrearlo, tutto all'interno della funzione del resize

AlexGatti · 13-12-2006, 13:56

Quote:

Originariamente inviato da spk

capisco

allora lavoro sull'init, ma ora ti spiego come funziona:
dopo aver importato il sidemenu.js (non altro che un cumulo di funzioni) si apre uno script all'interno della pagina dove si creano due variabili

slideMenu.menuy= 120 //The top placement of the menu.
slideMenu.menux= x //The left placement of the menu

dove al momento x è

var x =getAbsolutePosition(navigation).x (grazie ancora

)

"navigation" è il nome del DIV (il frameset è emulato coi css)

a fine script si da il
slideMenu.init()

ed il menù viene creato all'interno della pagina

se provo a ricrearlo nel resize()...mi da quella pagina bianca che ti dicevo

insomma qua crea l'oggetto
slideMenu = new createSlideMenu("slideMenu")

adesso sto pensando di "distruggere l'oggetto" per poi ricrearlo, tutto all'interno della funzione del resize

ma scusa, quest'oggetto "slidemenu" creerà un elemento sullo schermo, un div o non so cos'altro. tu devi andare a prendere questa cosa e cambiargli le coordinate.

Se lo script che stai utilizzando per caso è questo:
http://www.google.com/codesearch?hl=...lidemenu.js#a0
me lo sono guardato un attimo e sembra che abbia un metodo suo proprio per muoverlo.
Dopo aver assegnato menux e menuy a slideMenu, invece che rifare slideMenu.init() fai slideMenu.cont.moveIt(slideMenu.menux,slideMenu.menuy) e vedi se funzia.
Comunque appunto devi solo muovere quel che c'è già non rifarlo da capo.

spk · 16-12-2006, 14:31

non funziona

ho provato in ogni modo ma pare proprio che quella funzione possa essere richiamata solo dal metodo init() e non dall'esterno

ma come funziona il public e provate in javascript?

AlexGatti · 17-12-2006, 09:32

Quote:

Originariamente inviato da spk

non funziona

ho provato in ogni modo ma pare proprio che quella funzione possa essere richiamata solo dal metodo init() e non dall'esterno

non so cosa dirti

Quote:

ma come funziona il public e provate in javascript?

il public e il private in javascript funzionano benissimo!

... infatti non ci sono, in javascript è tutto pubblico!

spk · 17-12-2006, 11:25

Quote:

Originariamente inviato da AlexGatti

il public e il private in javascript funzionano benissimo!

... infatti non ci sono, in javascript è tutto pubblico!

e allora perchè non funzionaaaaa

11-12-2006, 16:19	#1
spk Senior Member Iscritto dal: Jul 2002 Città: Hampstead, London Messaggi: 2449	[DHTML] Coordinate DIV? Ho uno script che crea un menu a tendina, ma questo script chiede di impostare le coordinate giuste x e y, ma questo mi rovina tutto se ridimensiono la pagina, dato che è in formato "larga colonna centrale" mi servirebbe quindi trovare le cordinate del DIV dove dovrebbe stare, in modo da crearlo lì dentro ad ogni esecuzione o ancora meglio trovare il modo di eliminare questa prepotenza della posizione statica __________________ stabilmente instabile

11-12-2006, 23:10	#2
AlexGatti Senior Member Iscritto dal: Sep 2001 Città: Pesaro Messaggi: 921	io per avere le coordinate di un oggetto uso questo: Codice: function getAbsolutePosition(el) { var r = {x: el.offsetLeft, y: el.offsetTop}; if (el.offsetParent) { var tmp = getAbsolutePosition(el.offsetParent); r.x += tmp.x; r.y += tmp.y; } return r; } ti restituisce un oggetto con proprietà x e y che indicano le coordinate assolute di "el". non funziona sempre e su tutte le pagine, con pagine un po' strane so che può dare dei problemi. A me fin'ora è andata bene. __________________ "Vedi, molte delle verità che affermiamo, dipendono dal nostro punto di vista" "Se coloro che vi guidano vi dicono: «Ecco! Il Regno è nel cielo», allora gli uccelli del cielo vi saranno prima di voi. Se essi vi dicono: «Il Regno è nel mare», allora i pesci vi saranno prima di voi. Ma il Regno è dentro di voi ed è fuori di voi"

11-12-2006, 23:10	#3
spk Senior Member Iscritto dal: Jul 2002 Città: Hampstead, London Messaggi: 2449	ho parzialmente trovato la soluzione con queste due righette dovrei trovare le coordinate dell'angolo in alto a sinistra del DIV "navigation" var y= document.all("navigation").currentStyle.top var x= document.all("navigation").currentStyle.left queste altre due righe poi posizionano il menù correttamente nella pagina //Variables to set: slideMenu.menuy= 120 //The top placement of the menu. slideMenu.menux= x //The left placement of the menu ma questo funziona solo con IE...con firefox mi sfascia la struttura della pagina se provo a mettere un: document.write(y) document.write(x) in IE mi ritrovo scritto "autoauto", eppure funziona...che vuol dire? __________________ stabilmente instabile

11-12-2006, 23:16	#4
spk Senior Member Iscritto dal: Jul 2002 Città: Hampstead, London Messaggi: 2449	funziona! ti voglio bene! però così tipo se ridimensiono dopo devo fare un aggiorna per rimettere il menu al suo posto qual'è il modo migliore per aggirare questo fastidio? __________________ stabilmente instabile

11-12-2006, 23:41	#6
spk Senior Member Iscritto dal: Jul 2002 Città: Hampstead, London Messaggi: 2449	fenomenale questo google codesearch! esatto ho usato proprio la funzione che hai postato sopra adesso sto cercando qualcosa del tipo onResize() così da spostare il menu ogni volta che c'è il ridimensionamento EDIT: <body onresize="location.reload()"> funziona, ma solo su Internet Explorer! dannazione __________________ stabilmente instabile Ultima modifica di spk : 11-12-2006 alle 23:53.

11-12-2006, 23:57	#8
spk Senior Member Iscritto dal: Jul 2002 Città: Hampstead, London Messaggi: 2449	devo ancora studiare come funzionano gli event handler in javascript, ma per oggi è abbastanza sinceramente è la prima volta che costruisco un sito interamente in CSS + DHTML ... ma è per un'associazione di volontariato quindi ci tengo a fare le cose per bene nel frattempo ti ringrazio per le guide postate, saranno i primi riferimenti! ciao! __________________ stabilmente instabile

12-12-2006, 15:33	#9
spk Senior Member Iscritto dal: Jul 2002 Città: Hampstead, London Messaggi: 2449	ho individuato la funzione che mi serve window.onresize = function onresize() { alert('ciao') } così facendo ho il messaggino appena ridimensiono, ma non riesco a spostare il menù poiche l'init dello stesso avviene alla creazione della pagina, e non mi è possibile spostarlo senza un refresh se riprovo a dare l'init() mi da pagina bianca come in loop sto cercando di fare un refresh al redimensionamento tramite il metodo reload() come descritto qui http://www.devguru.com/Technologies/...ef/reload.html ma non mi funziona ne in IE nè in firefox __________________ stabilmente instabile

16-12-2006, 14:31	#13
spk Senior Member Iscritto dal: Jul 2002 Città: Hampstead, London Messaggi: 2449	non funziona ho provato in ogni modo ma pare proprio che quella funzione possa essere richiamata solo dal metodo init() e non dall'esterno ma come funziona il public e provate in javascript? __________________ stabilmente instabile

Strumenti
Mostra una versione stampabile Invia questa pagina per email