Dynamic Style Changes with Prototype?

Amiri
Fri, 30 May 2008 20:08:04 -0000

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