Set widget position depending on coordinates

Hi
I want to modify a element while having another one moved.

In the demo file, I want to have buttons in a selected state while clicking on the arrows : https://3ok3qe.axshare.com/#g=1&p=home

The selection of the 2 first buttons (btn1 and btn2) is done with a onLoad variable applied on the blocs in the dynamic panel :
if “[[This.x]]” is greater than or equals “-30”
and “[[This.x]]” is less than or equals “274”

It works for the first Two but not for the following.

Do you know how to have the buttons selected while moving the “blocs” group?

Thanks for your help!

demo-slideshow.rp (67.9 KB)

Using coordinates in Axure is tricky, especially inside dynamic panels. I don’t know what all of your requirements are but I would trigger the button selection using the “area of widget”/“is over” condition.

If the area of widget “bloc1” is over area of widget “background widget” select “Btn1”, etc.

SelectVisible.rp (71.5 KB)

You also might want to consider using a repeater instead of moving a group of widgets and take advantage of the built-in paging functionality.

Hi @nabert,

Since your conditions to check the coordinates and set the selected states were set up in the OnLoad event, they will only fire when the widget first loads.

I set up a hidden hotspot called “set button states” that checks the position of each widget, and sets the selected states that you want.

Then I modified the actions on the arrow buttons. Whenever the user clicks the arrow button, first it moves your widgets, then waits, then moves that hotspot, which triggers the actions to check the position and set the button states.

Here is the modified file: demo-slideshow-modified.rp (73.6 KB)

Is this what you were trying to accomplish?

-skb

Thanks, that’s perfectly doing the job. One question though: why do you add a “Move set button states” on the left and right arrows? What for?

The “set button states” widget is acting almost like a function—I put all the actions that are checking to see if the widgets are in the right place into the OnMove event. Then I used a “Move” action on the arrows. You could just as easily set it up using an OnClick event on the “set button states” widget, and then use a “Fire Event” on the arrows instead. Just need to have a way to trigger all those actions that are inside the “set button states” widget.

Does that make sense?

Thanks Huban. A clever solution.
I’m discovering the “Fire” property. I’ll dig in what you mentioned about the repeater and its built in funct. Thanks for the insight.

To trigger its actions. Makes perfect sense. Thanks.

Hi Huban,

I’ve been using a repeater instead of a group like you recommended. In the context of this carousel, what do you mean by “the advantages of the built-in paging functionality”?

P.

If you click the “Style” table the repeater’s Inspector panel, there’s a section in there called “Pagination.” You can set how many pages you want and how many repeater items you want per page.

You can use the “Repeater Actions” in the Case Editor to set what page to skip to, items per page, filters, etc.

Unfortunately, I forgot that the built-in pagination doesn’t include animation so, if that’s a must, you’ll have to do it a different way.

You can’t use the “is over widget” trick with a repeater; everything inside a repeater is treated as one thing to the widgets outside of it. Basically, the repeater would always “be over” the background, regardless of what items inside look like they are or not.

You can still use a repeater if you want, but you’ll be triggering the animations and button selections with…position math. The thing you asked about originally and I told you to avoid if you could…heh…

So here’s a way you can do it: SelectVisible_repeater_v2.rp (139.5 KB)

It’s way more complicated than the “is over” method but will work with a repeater.

Ok, Thanks. How should we understand the .left?

Does:

if “[[This.left]]” is less than or equals “[[Background.left]]”

mean:

if This.x less than or equals Background.x ?

And does:

and “[[This.right]]” is greater than or equals “[[Background.right]]”

mean:

the x value of the right side of “This” is greater than the x value of the right side of “Background” ?

And does:

if “[[Repeater.left - 20]]” is less than or equals “[[Background.left]]”

mean:

if the x value of the repeater less 20 is less than the x value of the left side of Background ?

I guess all these are an alternative to the is over / is not over area?

I can’t figure if it brings something more in terms of possibilities, as they still position one item / another.

Yeah. You got it.

Axure uses a form of jQuery which has built in position methods (top, right, bottom, left).

I’m not a javascript/jQuery expert so I can’t officially comment on if there is a difference between “This.x” or “This.left” but, at least in this case, they are the same. If you’re interested in seeing the numbers involved just have the text on some widget update with the positions you want to see.

Like I said before, I’d only use the “math method” if I absolutely had to use a repeater for the list of things. The “is over/not over” method is a lot quicker.

Why positioning math sucks: