Newsgroup: it.comp.lang.javascript
Titolo: Cambiare Background dei Radiobutton

o anche dei Checkbox, è uguale :)
In generale ho necessità di cambiare tramite DOM/Javascript l'attributo
style degli elementi delle form. Non necessariamente lo sfondo, qualcosa
che comunque mi permetta di evidenziare il particolare elemento.
Ho provato con
.style.backgroundColor = "rgb(255,255,0)";
oppure
.style.backgroundColor = "#FFFF00";
Ma funziona solo per i bottoni Submit, per le Textarea e per i TextField.
Con i Radio Button e i Checkbox, invece, funziona solo su Explorer. invece
io ho necessità che funzioni su Mozilla e Gecko.
Qualcuno ha mai provare ad interagire con lo stile degli elementi delle
Form su Gecko ?
Grazie! 
-- 
Cathàll - 
www.interisti.org
HT: Djurgårdens IT (233519)

 <label id="idTag"> <input type="radio"> </label>.
Purtroppo ho necessità di lavorare solo sull'attributo style del tag input.
Posso cambiare qualunque cosa, purchè funzioni su Gecko e, ovviamente,
riesca ad evidenziare l'elemnento della form (colorare i bordi, aumentare
dimensione, sfondo.. qualsiasi cosa, purchè funzioni -_-)


 addentando una fetta di polenta
ma la polenta si mangia a fette? io credevo che fosse incoerente...
-- 
E' stata una fortuna che tu sia nata alla fine degli anni '70.
Fossi nata piu' tardi avresti le orecchie sforacchiate e tutta
una serie di anelli in posti che adesso non posso dirti.

 genere tu vada poco lontano. Sentiamo comunque gli altri.
Questioni universitarie :)
Per semplificare molto, immagina che ci siano due bottoni (Avanti e
Indietro) che ti fanno scorrere all'interno degli elementi dalla Form, dal
primo all'ultimo.
Ad ogni passo, nel mio caso, ho necessità che l'elemento X venga
evidenziato per far capire effettivamente qual'è quello considerato.
Background sarebbe stato perfetto, ma purtroppo su Gecko non funziona (su
IE si, come detto). Per i campi testo non ci sono problemi, il problema
sorge coi radio e i checkbox.


Form su Gecko ?
Alcuni stili, tipo il background-color, sono definiti in
resource://gre/res/forms.css con "! important" e dubito che si
riescano a modificare da pagina web.
'bye

 In Campania come si mangia? (Perché sei campano, vero? :-) )
no, qui ci sono cannoli di ricotta, sarde a beccafico, melanzane, cous
cous... ma polenta proprio no :)


 riescano a modificare da pagina web.
Ho avuto un'idea alternativa.
Nel momento in cui mi posiziono con il mouse sopra il checkbox o il radio
button c'è una specie di effetto che va ad evidenziare i bordi, mettendoli
in rilievo. 
C'è un metodo particolare che simula questo passaggio del Mouse ? oppure è
qualcosa che lavora proprio a livello di sistema ?


 Anche. E anche a fette fritte, 
Ah, la polenta a fette fritte.. che bona.. non è proprio un piatto estivo,
forse, ma l'è proprio bona.. :D
-- 
ZER0
~ .. six thousand and fifty one days, one hours, forty four minutes, twenty eight seconds.
That is when the world ended.

 riescano a modificare da pagina web.
Esatto, come da specifiche w3c. Se ne parlņ tempo addietro:
http://groups.google.it/group/it.comp.lang.javascript/msg/2b2981a164ae9368?hl=it
-- 
ZER0
~ .. six thousand and fifty one days, two hours, eight minutes, seventeen seconds.


 Form su Gecko ?
Si, ma si deve modificare il forms.css per fare cose di questo genere; e
funziona solo localmente (ovviamente).
Inoltre, su IE non è che ti colora esattamente il background dell'elemento.
Se così fosse, avresti l'interno del radio e delle checkbox colorato;
invece ti colora "l'esterno".
Che sia magari ciò a cui miri tu, è un conto.. ma il background di un
elemento radio, è l'area circoscritta dai bordi, così come in una textarea.
Quindi, se anche funzionasse su Gecko, otterresti due effetti diversi.
-- 
ZER0
~ .. six thousand and fifty one days, two hours, twelve minutes, thirty three seconds.


 Quindi, se anche funzionasse su Gecko, otterresti due effetti diversi.
Ok, capisco.
Come ho già detto prima, immagina che io abbia due bottoni (Previous e
Next, per dare un idea) che permettano di scorrere gli elementi di una
Form.
Ho necessità che l'elemento X scandito in quel momento rimanga evidenziata
(bordatura, sfondo, una qualsiasi cosa che faccia capire "ora sei su
quest'elemento"). Non ho vincoli. Posso fare qualcosa?
Nel caso in cui l'unica soluzione sia modificare il FORMS.CSS, dov'è che
devo di preciso mettere le mani ?
Grazie ancora.


 
http://www
.  il mio cognome in minuscolo   .it/iclj/cathall/
Effettivamente è esattamente ciò che mi servirebbe. Se ho inteso bene il
sorgente, semplicemente hai racchiuso radio button e checkbox all'interno
di <label> e hai cambiato il background di Label invece che di Radio.
Corretto?
Proverò a utilizzarlo, il problema è che io ho bisogno di qualcosa di
generale, per cui una scelta di questo tipo mi obbliga a modificare in
maniera sistematica il DOM. Non è bello, ma se non ho alternative.. :)


 maniera sistematica il DOM. Non è bello, ma se non ho alternative.. :)
In verità, alternative ci possono essere.
Ad esempio, potresti evitare di sporcare il codice, utilizzando un solo
elemento HTML che ti fa da "evidenziatore", e spostarlo sull'elemento form
corrente tramite JS.
In questo modo separi la logica applicativa dal contenuto.
-- 
ZER0
~ .. six thousand and fifty two days, seven hours, six minutes, fourteen seconds.


 corrente tramite JS.
Cioè? Non mi è molto chiaro cosa hai in mente.


 Cioč? Non mi č molto chiaro cosa hai in mente.
Appena ho un attimo ti metto online un esempio.
-- 
ZER0
~ .. six thousand and fifty three days, five hours, forty two minutes, forty two seconds.


 Cioč? Non mi č molto chiaro cosa hai in mente.
Eccoti l'esempio:
 
http://beats.daily.it/iclj/form-pointer-test.htm
Tralascia magari l'aspetto "giocoso" dell'evidenziatore in questione, sono
io che mi diverto cosě.. ^_^
Cmq il concetto č questo.. Avrei voluto dare una rifinitura al codice di
script, comunque se vedi non "sporchi" in alcun modo il codice di markup,
rimanendo bello pulito. E' tutto javascript che si preoccupa di creare
l'elemento che funziona da evidenziatore, e spostarlo alla bisogna.
Per come ho scritto il codice, l'evidenziatore appare sull'elemento
corrente; quindi puoi "spostarti" sia tramite i pulsanti sottostanti, che
tramite semplice click sull'elemento o tab.
-- 
ZER0
~ .. six thousand and fifty three days, seven hours, twenty seven minutes, fifty two seconds.


 tramite semplice click sull'elemento o tab.
Molto bello, e fa esattamente a caso mio.
Ho provato a copiare tutto in locale, e funziona perfettamente.
O provato a copiare le funzioni nell'estensione Firefox che sto scrivendo,
ma, purtroppo, la funzione lavora correttamente (infatti vedo il focus che
si muove) ma non riesce il caricamento dell'immagine, che poi sarebbe la
cosa fondamentale :/
Ho provato sia a metterla come
src="cursor.gif"
src="chrome://xxxxx//cursor.gif" <- Sintassi di Firefox
src="http:/xxx/cursor.gif" <- caricando un immagine qualsiasi dal Web
Molto strano.. :(


cosa fondamentale :/
Uhm, estensione... in che namespace stai "lavorando"? XHTML/HTML o
XUL?
'bye

 XUL?
Devo darci un occhiata. Da dove lo controllo? :/
Il problema è che l'estensione carica altre due immagini (mediante
chrome://indirizzo) e lo fa correttamente. Con il Cursore di Zer0 non va.
Bah..


Bah..
Prova a specificare direttamente il namespace nella creazione
dell'object immagine:
imageObj=document.createElementNS("
http://www.w3.org/1999/xhtml
","html:img");
imageObj.setAttribute("src","chrome://tuaestensione/content/fileimmagine.estensione");
Se l'immagine e' nella "skin" modifica l'URL nel src
Probabilmente usando document.createElement non e' in grado di
definire in che namespace crei l'elemento e quindi non lo gestisce
(c'e' ma lo scarta perche' non lo considera come HTML o XUL), con
document.createElementNS definisci anche il namespace html e quindi
non dovrebbe avere problemi.
Ad ogni modo puoi anche usare un elemento XUL:
imageObject=document.createElementNS("
http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul
","xul:image");
Quindi:
 imageObject.setAttribute("style","list-style-image:
url('chrome://tuaestensione/content/fileimmagine.estensione');");
Oppure
 imageObject.setAttribute("class","classetuaimmagine"); 
e definisci nel CSS della skin:
.classetuaimmagine{
list-style-image:
url('chrome://tuaestensione/content/fileimmagine.estensione');
}
'bye

 cosa fondamentale :/
Hai provato quello che ti ha suggerito Agostino? L'elemento "img" viene
creato dinamicamente, è probabile quindi che necessiti del corretto
namespace - o, in alternativa, creare direttamente un oggetto image XUL - .
-- 
ZER0
~ Legge dell'Inadeguatezza Militare, Corollario
Se un solo robot o astronave combatte contro un intero esercito, l'esercito
perde.(La Fisica nei Cartoni)

 sviluppato in XUL.
Questi strumenti ci sono. Hai altre idee ? :)
Con le modifiche suggerite da Agostino effettivamente funziona, ma non
perfettamente, nel senso che a volte sfasa troppo il layout di pagina e non
si capisce più a che elemento va a posizionarsi.
Ora purtroppo non ci sto sbattendo molto la testa xkè non ho tempo, ma
appena ci tornerò un po' su proverò a vedere come sistemarlo.
Se comunque hai altre idee sarò felice di leggerle, perchè fino a questo
momento i tuoi spunti sono stati utilissimi.
Grazie ancora!


 momento i tuoi spunti sono stati utilissimi.
Guarda, così alla "cieca" non so che dirti, i suggerimenti di Agostino
avrebbero dovuto farti funzionare tranquillamente il tutto anche come
estensione, però se mi dici che c'è questo problema di "sfasamento",
probabilmente c'è da "riequilibrare" un po' tutto il codice. Dovrei vedere
esattamente cosa intendi, così che possa capire dove metter le mani.
-- 
ZER0
~ Legge del Riconoscimento debole.
Mettersi un costume, anche senza maschera, è più che sufficiente per
diventare del tutto irriconoscibile anche ai parenti e agli amici più
stretti.(La Fisica nei Cartoni)