Coloring selected li

Hi, can’t find a solution for this. Have a series of

  • 's. When the
    user clicks on one of them, a second series shows in a updated, other
    . Works fine with RJS. But: I'd like to change the background-color for the
  • clicked in the first list, so the user can always see and remember which one of the first list he actually has chosen. Sounds simple, but I can't figure it out. I've tried a few :onclick javascript solutions, but they obviously weren't solutioons at all. :- ( Could anybody give me a few hints or so? Thanks in advance.
  • On Jul 3, 10:02 pm, Rudy [email protected] wrote:

    Hi, can’t find a solution for this. Have a series of

  • 's. When the
    user clicks on one of them, a second series shows in a updated, other

    . Works fine with RJS. But: I'd like to change the background-color for the
  • clicked in the first list, so the user can always see and remember which one of the first list he actually has chosen. Sounds simple, but I can't figure it out. I've tried a few :onclick javascript solutions, but they obviously weren't solutioons at all. :-
  • You could just add a class to the first li (you could do that with
    your rjs). If you show what you’ve tried someone might be able to
    point out where it’s going wrong.

    Fred

    Hi,

    I have a partial with this code

    <[email protected] do |cup|%>

  • <%= link_to_remote(cup.name, :url => {:action =>'add_books_list', :id => cup.id}) %>
  • <%end%>

    lets say whe have 50 cups. There must be an easy way to change the
    backgroundcolor on the one

  • that is clicked on, with as little
    server-activity as possible. I think a javascript-script should do it,
    but I’m afraid I just don’t have enough knowledge of that. I realise
    that in a way I have to update the partial, and I’m trying to find an
    example that could show me, but I just can’t find it. (Or maybe I just
    think it is easy, but it isn’t.)
    Thanks for any help anyway. Really appreciate it.
  • On Thu, Jul 3, 2008 at 2:48 PM, Rudy [email protected] wrote:

    lets say whe have 50 cups. There must be an easy way to change the
    backgroundcolor on the one

  • that is clicked on, with as little
    server-activity as possible.

  • How about none? :slight_smile:

    Briefly tested in FF2/OS X – requires prototype.js –

    .chosen { background-color: red; }

    HTH,

    Hassan S. ------------------------ [email protected]

    On 04 Jul 2008, at 00:21, Hassan S. wrote:

    function choose(e)
    }
    Event.observe(window,‘load’, init);

    .chosen { background-color: red; }

    And even better would be to wrap this code in a Javascript object
    (which prototype conveniently disguises as a Class.create():wink: instead
    of using simple functions (that’s just as bad as most of the hobby PHP
    projects you see out there IMHO) and use event delegation. This method
    will fail as soon as you add list items to the bottom of the list
    using ajax (since the click event won’t be bound to the new element),
    forcing you to call the init method again. Also, you are binding an
    event to each list element, which is quite an expensive operation, and
    it certainly will become a problem if you have tens to hundreds of
    these listitems on a page.

    Best regards

    Peter De Berdt

    Use javascript , get id and assign a class name .

    CJ(JON)

    Absolutely briljant. Many, many thanks.

    On 4 jul, 00:21, “Hassan S.” [email protected]

    On Fri, Jul 4, 2008 at 2:19 AM, Peter De Berdt
    [email protected] wrote:

    And even better would be to wrap this code in a Javascript object (which
    prototype conveniently disguises as a Class.create():wink: instead of using
    simple functions (that’s just as bad as most of the hobby PHP projects you
    see out there IMHO) and use event delegation. This method will fail as soon
    as you add list items to the bottom of the list using ajax (since the click
    event won’t be bound to the new element), forcing you to call the init
    method again. Also, you are binding an event to each list element, which is
    quite an expensive operation, and it certainly will become a problem if you
    have tens to hundreds of these listitems on a page.

    Wildly overkill for the OP’s situation, I think :slight_smile: but a valid point
    for
    some circumstances.

    Still, if you have hundreds of list items on a page, I’d be worrying
    more about the basic IA (or lack thereof)…


    Hassan S. ------------------------ [email protected]