Change css progressively with clicks

Hi is it possible to have styles that change dynamically? i.e a link colour will increase tint by 0.1% everytime it’s clicked. I’m guessing is going to involve some extensive javascript. Any hlep would be great. Cheers

Hi eckul, welcome to the forums,

I’m not sure what you mean by tint. AFAIK a color can have 256 values (00 to FF) so incrementing changes by one thousandths would be impossiible.

But in general, yes, javascript can change property values.

Are you sure you want to change link color? Or is this a “for example” type of question?

[ot]For background on this, here’s the original thread: http://www.sitepoint.com/forums/showthread.php?1188073-Progressive-CSS-does-this-exist

I’m not sure what you mean by tint. AFAIK a color can have 256 values (00 to FF) so incrementing changes by one thousandths would be impossiible.

In the previous thread, @Paul_O_B pointed to this post on HSLa colors.

[/ot]

Hi Thanks for your replies.

Basically I want to make a poll. i.e do you like cats? YES / NO. If people click YES the word cats will start to become green, if people click NO the word will start to turn red. Once the word has a 20 clicks I want the word cats to become either red or green depending on which has the most clicks. I’m not too worried about the increments of colour there might only be 4 different shades of green. I know it’s kind of weird. Let me know if you have nay ideas. Cheers

Sounds like you really need a backend script to me. I’m not sure if JS alone can keep a record of all your users’ clicks. And what’s to stop one user clicking 20 times? A backend script would have a better chance.

Agreed. I see two areas that need to be considered.

Color gradation. i.e. in this image

the left-most is full red, second full red half green, middle full red full green, half red full green, right-most full green

So you could do a transition in twenty steps but are the intermediate colors acceptable to you?

Javascript could use cookies or localstorage per user, but for per page across users the info will need to be stored somehow. It need not necessarily be by using a database, it could be a simple read-write file, but it would need something server-side.

*As Ralph mentioned, if “click cheating” is a concern, that would need to be addressed somehow too.

Thanks, yes intermediate colours are acceptable. It would be good to store click information but I’m also not too worried about click cheating,
it’s more for fun and engagement rather then a competition.

Do you have a server-side language, PHP? Do you have experience working with ether file or database functions?

Hi Sorry about the delay, I do have some PHP experience but I’m by no means an expert. If you have any ideas that would point me in the right direction that would be great. Then I can have a go and let you know where I get to. Cheers

I think the next step is to determine what kind of information you need to save to get this to work.

Maybe something like this would be enough?
button_id click_count

cheers, I’ll start with that and let you know how I go.