I used this technique on the ratings of css galleries page and if i did that by hand it would have been a pain especially with reshuffling…
example…
-
yeah i rock …
i am so important i get lots of respect… i am sure you want to click me …
-
still interesting…
I may not be number 1 … but you better click me because i still rule …
-
middle child syndrome…
I am not the eldest nor the youngest … i fit no where … sob sob sob …
-
what not interesting …
Oh no … why am i here … please please please help me …
-
no one loves me…
Why oh why doesn't anyone see me … click me … click me …
lets play … (click on each)
reset all | color p | color link | size li
the explanation …
I am sure some of the libraries out there do this kind of stuff, but i find doing it your self is the best way to learn… the code is well commented, so i will just explain how to use it … feel free to ask any questions…
// function do_step_style
// @container
// @element_to_style
// @sub_element_to_style
// @start_val
// @end_val
// @style_prop
// @reset
- container
- The container ID that has all the things you want to be styled
- element_to_style
- The element you want to have the styled applied to
- sub_element_to_style
- A sub element to apply style to (a child of element_to_style … null if none)
- start_val
- Starting value if color then 6 digit hex (#333333) or if fontSize then em unit (1)
- end_val
- Ending value if color then 6 digit hex (#333333) or if fontSize then em unit (1)
- style_prop
- Property to style (color or fontSize) - you may want to add more…
- reset
- Optional … remove styles … set to true
the usage …
- do_step_style('progressive','li','p','#666666','#cccccc','color') - color p
- Find container "progressive"
Find all the "li" tags inside container
Find the FIRST "p" tag inside "li"
Color from #666666 to #cccccc - do_step_style('progressive','li',null,'1.5','.9','fontSize') - size li
- Find container "progressive"
Find all the "li" inside container
Decrement "li" size from 1.5em to .9em - do_step_style('progressive','li','a','#cf852c','#cccccc','color',true) - reset ONLY a
- Find container "progressive"
Find all the "li" tags inside container
Find the FIRST "a" tag inside container
Remove the color property