SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2014
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,237
    Mentioned
    194 Post(s)
    Tagged
    2 Thread(s)
    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?

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Off Topic:

    For background on this, here's the original thread: http://www.sitepoint.com/forums/show...oes-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.

    Last edited by Mittineague; Jan 23, 2014 at 17:11. Reason: fixing link

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2014
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    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.

  6. #6
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,237
    Mentioned
    194 Post(s)
    Tagged
    2 Thread(s)
    Agreed. I see two areas that need to be considered.

    Color gradation. i.e. in this image
    red-to-green.png
    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.

  7. #7
    SitePoint Enthusiast
    Join Date
    Jan 2014
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,237
    Mentioned
    194 Post(s)
    Tagged
    2 Thread(s)
    Do you have a server-side language, PHP? Do you have experience working with ether file or database functions?

  9. #9
    SitePoint Enthusiast
    Join Date
    Jan 2014
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  10. #10
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,237
    Mentioned
    194 Post(s)
    Tagged
    2 Thread(s)
    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

  11. #11
    SitePoint Enthusiast
    Join Date
    Jan 2014
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cheers, I'll start with that and let you know how I go.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •