ugrás a tartalomhoz

CSS érték dinamikus megadása

paal · 2009. Jún. 18. (Cs), 11.33
Üdv,

A Wufoo oldalain található formoknál használt, az éppen aktív form részeket más színnel megjelenő funkciót szeretném Drupal alatt használni.
Egy js hozzárak egy "focused" paramétert az elem kiválasztójához.

Ha jól néztem, a function initializeFocus() függvényrész végzi el ezt a funkciót. Ezt beraktam a Drupal téma mappájában egy script.js-be, ezt elvileg be is tölti, de itt nagyjából véget is ért a js tudásom.


Amit el szeretnék érni, hogy minden 
class="form-item"
kiválasztó kapjon egy 
class="form-item focused"
paraméter, amikor ezen dobozon belül, bármilyen form elemet választ a felhasználó.

Teszt link.

Hogyan lehetne ezt elérni?

Nagyon köszönöm!

Üdv, Pali
‹ Checkbox pipa törlés IE alatt #divegyben lévő #divketto nem takarja #divegyet ›
 ■
1

Amint le is írtad

rrd · 2009. Jún. 18. (Cs), 12.14
Amint le is írtad JavaScripttel. Függ a megoldás attól, hogy használsz-e valami js keretrendszert vagy sem. Lényegében a js azt kellene csinálja, hogy figyeli, hogy a form elem-re rákerül-e a focus és ha igen akor a parentNode-nak ad egy új css classt.
2

Drupal jQuery-t használ

paal · 2009. Jún. 18. (Cs), 13.04
És pont ez a funkciót puskáztam ki az eredeti js fájlból (script.js, mint ahogy azt írtam is):
function initializeFocus(){fields=getElementsByClassName(document,"*","field");for(i=0;i<fields.length;i++){if(fields[i].type=='radio'||fields[i].type=='checkbox'||fields[i].type=='file'){fields[i].onclick=function(){clearSafariRadios();addClassName(this.parentNode.parentNode.parentNode,"focused",true)};fields[i].onfocus=function(){clearSafariRadios();addClassName(this.parentNode.parentNode.parentNode,"focused",true)};highlight_array.splice(highlight_array.length,0,fields[i]);}
else if(fields[i].className.match('addr')){fields[i].onfocus=function(){clearSafariRadios();addClassName(this.parentNode.parentNode.parentNode,"focused",true)};fields[i].onblur=function(){removeClassName(this.parentNode.parentNode.parentNode,"focused")};}
else if(fields[i].className.match('other')){fields[i].onfocus=function(){clearSafariRadios();addClassName(this.parentNode.parentNode.parentNode,"focused",true)};}
else{fields[i].onfocus=function(){clearSafariRadios();addClassName(this.parentNode.parentNode,"focused",true)};fields[i].onblur=function(){removeClassName(this.parentNode.parentNode,"focused")};}}}
csak éppen nem működik.
Ahogy nézegetem, valószínűleg azért, mert nálam mások class-ok nevei.
3

JQuery

carstepPCE · 2009. Jún. 18. (Cs), 13.34
ha jol latom jQuery keretrendszer van nalad. En most sebteben osszehoztam egy kis szkriptet, ami menten elindulhatsz: 
$('#node-form .form-item input').focus( function(){
    $(this).parents('div.form-item').toggleClass('focused');
} )
amit esetleg meg kell majd valtoztatnod az a #node-form. Ez az azonositoja a te formodnak, kerdes a drupal ezt mennyire kezeli. De a focused css-t azert ird meg hozza, most nem lattam az oldalon, de firebug consollal sikerult alert-t csinalnom

szerk. latom a drupal ezt lekezeli, akkor szerintem csak modositsd a classoknak megfeleloen, ha jol lattam form-item classok vannak nalad beallitva.

-cs-
Sanyi
4

Jónak kellene lennie de mégsem

paal · 2009. Jún. 18. (Cs), 14.16
Szerintem ennek jónak kellene lennie, de mégsem működik.

Ez nem azt csinálja, hogy minden olyan input mezőnek, aminek a kiválasztója #node-form .form-item és fókuszba kerül, akkor a szülő div.form-item-nek ad egy focused paramétert?

A class-t amúgy hozzáadtam a css fájlhoz:
.focused {
background-color: #FFF7C0;
}
Köszi, Pali
5

.focused

carstepPCE · 2009. Jún. 18. (Cs), 14.48
tovabbra sem talalom a .focused css tulajdonsagot a css-k kozott, de a fenti kodom a checkboxok kivetelelvel teljesen jol mukodik.

szerk. kozben meglett

lehet kicsit modositani kellene a kodot a kovetekezore:
 $('#node-form .form-item input').focus( function(){  
     $(this).parents('div.form-item:first').toggleClass('focused');  
} )
bar ez meg nem tunteni el focusveszteskor a regit, de mar kozelit :-)

szerk.: 
 $('#node-form .form-item input').focus( function(){  
     $('#node-form div.form-item').removeClass('focused');
     $(this).parents('div.form-item:first').toggleClass('focused');  
} )
talan ez

-cs-
Sanyi