Re: Dynamic Style Changes with Prototype?

Dan Dorman
Fri, 30 May 2008 21:38:12 -0000

On Fri, May 30, 2008 at 2:08 PM, Amiri
<amiribarksdale-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
>
> Am I right to try to select the body id and apply the styles to it?

Works for me, in the tests I whipped up. Event.addBehavior isn''t
"stock" Prototype (I believe it hails from LowPro?), but I
can''t tell
what event handler you''re trying to hook onto with that second method.

My code doesn''t use Event.addBehavior, and I''m using more
modern
Prototype idioms, but here''s my code to do what you''re trying.

document.observe(''dom:loaded'', function() {
    // your first function
    document.observe(''mousemove'', function() {
        console.log($F(''color-picker''));
        $(''color-preview'').setStyle({ backgroundColor:
$F(''color-picker'') });
    });

    // your second function
    $(''color-picker'').observe(''keyup'',
function() {
        console.log($F(this));
        $(''color-preview'').setStyle({ backgroundColor:
$F(this) });
    });
});

and the relevant HTML:





Both methods do the exact same thing, and they both work. (They also
work fine if $$(''body'').first() is used in place of
$(''color-preview''), so adding an id attribute to the body tag
isn''t
even strictly necessary--though useful for other reasons.

My suggestion is to make sure you''re passing correct hex values, i.e.,
they have a leading # followed by either three or six hex digits, or
they will be ignored by the browser.

Good luck!

:Dan