document.getElementsByClassName non funziona

[PHP]

Non riesco a capire perchè questo script semplicissimo non funziona:

	document.getElementsByClassName('prova').setAttribute("style", "background: white;");

Se provo a farlo per id funziona:

	document.getElementById('prova').setAttribute("style", "background: white;");

ma visto che per id dovrei crearne uno per ogni elemento non va bene. Dove sbaglio?

 

[Fez Vrasta]

Semplicemente perché non va usata così la funzione.

http://jsfiddle.net/TacsC/

 

[PHP]

Grazie della risposta, adesso funziona ma mi dà un piccolo problema che non avevo previsto.
Andando sul primo link, si attiva la funzione prova a tutti gli elementi che presentano quella classe. Se si và con il mouse sul primo elemento cambia colore, ma lo fanno anche il 2o e il 3o ad esempio. Come blocco questa catena?

 

[Fez Vrasta]

Tu vuoi che solo l'elemento selezionato cambi colore?

 

[PHP]

Esatto, avevo pensato di dare ad ognuno un id diverso, ma visto che devono avere gli stessi attributi avevo pensato ad una classe, ma è uscito quest'altro problema.

 

[Fez Vrasta]

Non potresti usare JQuery? E' mille volte più semplice...

http://jsfiddle.net/RmNyM/

O direttamente usare i CSS senza Javascript, che sarebbe la soluzione migliore:

http://jsfiddle.net/mUPp4/

 

[PHP]

Ti spiego, io ho fatto il menù da 0 con i css, poi ho creato javascript per tenere selezionato('solo come effetto ottico') la voce del menu principale che aveva aperto i sottomenu sui quali adesso si è spostato il mouse.
Alla fine ottengo due effetti hover, uno sul menù principale e uno sul sottomenu selezionati.
Come mi hai fatto tu l'effetto ottengo quello di partenza che avevo con i css, e quello con jquery mi sembra un'alternativa ai css(che in effetti ottengo con molto meno codice di javascirpt, ma non era tutto il contrario?)
Comunque ho capito che il problema è che avendo la stessa classe tutti gli elementi vengono influenzati con lo stesso effetto contemporaneamente, cosa che non succederebbe con l'id ad esempio, ma vorrei evitare di creare 4-5 id diversi per poi fare copia e incolla e cambiare solo il nome, visto che devono avere lo stesso effetto.
Non è possibile fare una specie di array e distinguere tutte le chiamate che vengono fatte sulla stessa classe? In questo modo metterei [0], ecc e risolverei il problema.

 

[PHP]

Forse ho capito, devo trovare il modo di estrarre solo l'array del menu corrispondente e non estrarre tutto $i.
Provo poi ti faccio sapere, nel frattempo dimmi se sei d'accordo o meno

 

[Fez Vrasta]

Puoi fare tutto con i CSS...

http://jsfiddle.net/NfzAe/

 

[PHP]

Perfetto, non conoscevo questa dicitura nel css ">", funziona alla grande, propio quello che cercavo. Grazie a te javascript l'ho ridotto all'osso, adesso fà in modo solo che il menù non scompaia subito se si esce per sbagli con il mouse fuori dal menu.:byebye:

 

[Fez Vrasta]

Non serve javascript neanche per quella funzione:

http://jsfiddle.net/NfzAe/3/

 

[Fez Vrasta]

Ti ho sistemato un'attimo la funzione del delay raggruppando tutto in un'unica riga per browser.

http://jsfiddle.net/NfzAe/9/

 

[Fez Vrasta]

Scusa c'era un bug che ho corretto:

http://jsfiddle.net/NfzAe/12/

 

[PHP]

Grazie della risposta, ho provato i tuoi esempi, ma non ottengo lo stesso effetto che ho con javascript (riesco a ritardare l'entrata del menù agendo sull'hover, ma non la sua scomparsa). Ho cercato su google e ho provato a rifarlo, basandomi sul css che mi hai dato e ho provato ad aggiungere anche "ease-in-out" su alcuni comandi. Farò altri entativi prima di abbandorare questa strada, perchè credo che se funzioni sia meglio un css per una cosa del genere che javascript. Grazie per l'aiuto che mi stai dando.

 

[Fez Vrasta]

Scusa funzionava solo su Chrome, questo va dappertutto da quanto ho visto:

http://jsfiddle.net/NfzAe/17/

Ho anche aggiunto una parte di codice per fare in modo che sparisca subito il submenu se si va su un'altra voce di menu.

 

[PHP]

Grazie per la correzione, adesso riesco a vedere l'effetto, ma non riesco ad adattarlo a #prova. Ho provato ad usare nav dentro il menu, ma non mi dà l'effetto voluto, o meglio lo dà, ma mi crea sproporzioni, prima il menu mi dà l'effetto, ma mi stampa solo 4 campi, invece di 10 e lo stesso solo all'effetto "out" crea magicamente i menu mancanti e poi scompare al termine dei secondi prestabiliti, poi se stampa tutti i valori, all'effetto out la composizione si rovina, cambiando da un effetto "colonna" ad uno "riga", quando ho specificato ovunque l'effetto display: block, e visto hc eho levato ogni altro displai diverso non sò propio da dove prenda il valore che causa la sproporzione, poi ho provato a cambiare "<div id=prova><nav>.." semplicemente in <nav>, dando a nav i valori di prova e niente, poi ho provato a integrare nav dentro prova togliendolo lasciando così solo <div id=prova>, ecc.
Ci sono stato due ore e mezza circa:crying:. Come devo fare? Dimenticavo, ovviamente non ho cambiato solo il nome tra nav e #prova, ma ho riscritto pure la sintassi del css per renderla compatibile, altrimenti non stampa nulla ovvio. Scusa per la seccatura, questa è l'ultima cosa che ti chiedo sull'argomento.

 

[Fez Vrasta]

Non ho capito niente, cosa vuoi ottenere?

 

[PHP]

Cambiare nav in #prova.

 

[Fez Vrasta]

sostituisci tutti i "nav" con "#prova" e sostituisci <nav> con <div id="prova">

comunque è meglio tenere nav, è l'elemento pensato apposta per i menu

 

[PHP]

Se faccio delle sostituzioni di nav con #prova, il menu comincia a sballarmi gli elementi. Comunque credo di aver capito il problema. Ho applicato ovunque una transiione, per vedere dove funzionava e dove non, e il risultato è che funziona ovunque tranne che quando si esce fuori dal menu con il mouse.
Ho visto nel tuo esempio che è "nav > ul > li > ul" ad influenzare la scomparsa del menu dopo i ltempo specificato, ma con me questo non funziona. Se al posto di "nav >ul > li > ul" metto "#prova ul li ul", l'effetto che ottengo è solo quello di ritardare l'effetto al passaggio del mouse, quindi ottendo un ritardo di un hover, non di un out.