Setting styles / style attributes in an interaction (Repeater)

advanced-prototyping
#1

Hi there,

is it possible to manipulate certain style attributes of a widget in an interaction?

I want to use a Repeater to display a color palette. Each Item represents one color and they are listed in a table which shows the color, its name and RGB value.

Any suggestion? (No, loading an image per color is not an option :wink: )

Thanks in advance!

Sebastian

#2

I can think of two ways you can achieve what you want:

  1. Donā€™t know if it falls into the ā€œcheatingā€ method similar to using pictures, but you could use a dynamic panel. Each state would be a different color and you use content in the repeater to set the desired state.

  2. You can directly manipulate the DOM elements in the repeater but itā€™s a pain-in-ass. The only way I know how to do it is with some clunky JavaScript injections and awkward trigger events.

Dynamic_Color.rp (157.8 KB)

Someone else in the forums might have already found a more elegant way of implementing/importing an external color picker, but Iā€™ve never needed one myself so I donā€™t know.

BTW: Iā€™m using De Jongh.dkā€™s JavaScript injection method: http://dejongh.dk/wiki/doku.php?id=interaction:axure_javascript

#3

Uhhh! :persevere: :exploding_head: JavaScript injection. :wink:

Thank you very much for your suggestions and help. Iā€™ll give it a try ā€¦ but Iā€™m a little scared :flushed:

#4

{Chuckle} Itā€™s not as scary as it sounds. Lotā€™s of people on the forums do it, itā€™s just not officially supported by Axure. De Jonghā€™s documentation should give you everything you need to get it setup in your project.

The biggest trick is actually knowing JavaScript, of which, I am an amateur at best. (Lots of Googling for me.)