Howdy folks.
I am trying to set up a "page preview" thing, using the page on which
the form resides. I basically want someone to be able to mae a change
in the form and have it immediately applied to the page. I have tried
the following two methods to try to dynamically change the background
color in real time:
// Background color preview
Event.addBehavior({
''body#colorpicker'': function() {
Event.observe(document, ''mousemove'', function(event) {
console.log($F(''cp1_Hex''));
$(''colorpicker'').setStyle( { backgroundColor:
$F(''cp1_Hex'') } );
});
}
});
I put on mousemove just to try to force the issue. cp1_Hex is the id
of the field that contains the hex value the user changes while
filling in the form. Nothing happens, though, other than my console
filling up with hex values. The background color is never set. Here is
my second method:
Event.addBehavior({
''input#cp1_Hex'': function() {
console.log($F(''cp1_Hex''));
$(''colorpicker'').setStyle( { backgroundColor:
$F(''cp1_Hex'') } );
}
});
Am I right to try to select the body id and apply the styles to it?
This works as a one-shot basis in Firebug, but not on the actual
server.
Any insight into making these sorts of dynamic preview things?
Amiri
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
Wow. I figured this out, and figure I should share it: the first
method was correct, excpet I was missing the ''#'' mark before
the
$F(''cp1_Hex''). Go figure.
// Background color preview
Event.addBehavior({
''body#colorpicker'': function() {
Event.observe(document, ''mousemove'',
function(event) {
console.log($F(''cp1_Hex''));
$(''colorpicker'').setStyle( {
backgroundColor:
''#''+$F(''cp1_Hex'') } );
});
}
});
Amiri
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
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: <body id="color-preview"> <form><input id="color-picker" /></form> </body> 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 --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---