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.)