[Pro] Javascript Color Change

Does anyone know how to produce an object with changing colors?? as done in this page… T-shirt Design Lab - Design Your Own T-shirts & More


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If the object in question is an HTML box, then it’s very simple. Make a picker in Freeway with the following options (this list is abbreviated for example purposes):

Choice Value
White #ffffff
Gray #666666
Black #000000

Each color has as its value the hex code for that color, in other words.

Next, while the picker is selected in your layout, click on the third tab from the left in the Inspector, and set the Name field to colorChoice. Next, choose Item / Extended from the main menu, make sure that the Select tab is highlighted, and press New in that dialog. In the resulting sub-dialog, enter:

  • Name: id
  • Value: colorChoice

Okay out of the stack of dialogs, and you’re done for this step.

Now, apply the Protaculous Action to your page, and choose prototype-packed from the Library picker. Click on the item you want to change, and write down precisely what the Title field in the Inspector’s left tab reads. If you haven’t entered your own value, it will say something like item42 by default. You must pay attention to any capital or lower-case letters, as JavaScript is case-sensitive.

Now click on the pasteboard so the page is selected, and click the top Function Body button in the Protaculous Action interface in the Actions palette. In the resulting text dialog, enter the following code – substituting whatever name you got from the previous step for my example name:

$('colorChoice').observe('change', function(evt){
	$('item42').setStyle({
		backgroundColor:
		$F(this)
	});
});

At this point, also make sure that whatever your first option in that picker is, it matches the default color you applied to the item in Freeway. (Also note, any color you applied with the various graphic background options will cover over this HTML background color, so if you don’t see any changes, make sure that the item you’re trying to change has only a basic HTML background color.)

Preview in a browser, and change the picker. You should see the color change. If you don’t, post a link and I’ll help you debug it.

Walter

On Oct 26, 2011, at 9:32 AM, Nate wrote:

Does anyone know how to produce an object with changing colors?? as done in this page… T-shirt Design Lab - Design Your Own T-shirts & More


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options