View Constraints and Browser Resize

[drech]

Let's say the canvas is 100% for both width and height. I have two views inside, each 50% of the height ( a relative constraint given I don't know the size of the browser window).

On some arbitrary event, an animation gets triggered which slides both views offscreen (outside of the browser dimensions). However, when the views are offscreen and the browser gets resized, the views return to their pre-animation location.

From what I can tell, this is because the relative constraints used to position the views in the first place get re-read on a browser resize event and the views 'snap' back to those locations, regardless of their current location or status.

Should this really be the behavior? Is there a recommended way of dealing with it?

Thanks,
Dustin

[hipik]

Hi there

post some code and we'll fix it...

Hipik ZM

[drech]

Here's example code. When you click the button, the views slide offscreen. While the views are offscreen, if you resize the browser, splitterBottom snaps back to it's original location because it has a relative position defined for y.

How do I prevent this from happening?


<canvas width="100%" height="100%">

<view id="splitterTop" width="100%" height="50%" bgcolor="0x555555"/>
<view id="splitterBottom" y="50%" width="100%" height="52%" bgcolor="0x000000">
<button align="center" text="Click Me">
<handler name="onclick">
wfOpen.doStart();
</handler>
</button>
</view>

<animatorgroup name="wfOpen" id="wfOpen" duration="2000" start="false" process="simultaneous">
<animatorgroup target="splitterTop">
<animator attribute="y" to="${0 - splitterTop.height - 200}" motion="linear"/>
</animatorgroup>
<animatorgroup target="splitterBottom">
<animator attribute="y" to="${canvas.height + 1}" motion="linear"/>
</animatorgroup>
</animatorgroup>

</canvas>


Thanks!

[drech]

Either I'm doing something incredibly stupid or this is the expected behavior.

I've looked through the docs, and though I may have missed it, they don't go into anything like this.

Do I have to track the location of each view position myself?

[rcyeager]

This is expected behavior. You are defining the splitterBottom y value to always be 50% of the canvas height. The way this works, is that whenever the canvas height changes the y position get re-calculated. The animator changing the y position does not interfere, because the canvas height is not being changed. Once you resize the browser height, though, the constraint implied by the "50%" value will execute and re-calculate the new y value. Run the animation and resize the browser height at the same time to see that the 50% constraint executes with each canvas height change.

I don't know what you are trying to accomplish with the design, but here's how to stop that particular behavior by only calculating the starting y position once:


<canvas width="100%" height="100%">

<view id="splitterTop" width="100%" height="50%" bgcolor="0x555555"/>
<view id="splitterBottom" y="$once{canvas.height/2}" width="100%" height="52%" bgcolor="0x000000">
<button align="center" text="Click Me">
<handler name="onclick">
wfOpen.doStart();
</handler>
</button>
</view>

<animatorgroup name="wfOpen" id="wfOpen" duration="2000" start="false" process="simultaneous">
<animatorgroup target="splitterTop">
<animator attribute="y" to="${0 - splitterTop.height - 200}" motion="linear"/>
</animatorgroup>
<animatorgroup target="splitterBottom">
<animator attribute="y" to="${canvas.height + 1}" motion="linear"/>
</animatorgroup>
</animatorgroup>
</canvas>


Robert Yeager
http://www.qrowd.com
http://www.cooqy.com

[drech]

Exactly what I needed.

Thank You =)

~d