Undesired behavior when modifying the "left" attribute of a container using NMorphStyle

[Steffen]

Hi,

the following code is used to simultaneously move several divs
attached (div1, div2, ...) to another div, called "slider". The slider
div is in turn attached to another div, called "anchor". By modifying
the left-attribute of the slider div, div1, div2 are moved to the one
or other side...

<div id="anchor" style="position: relative; font-size:800px">
<div id="slider" style="position: absolute; top: 0px;
left: 0em">
<div id="div1"></div>
<div id="div2"></div>
...

In order to make the move a bit more fancy, I used the NMorphStyle
class (I also set the TransitionType to EaseInOutTransitionPhysics):
NMorphStyle move = new NMorphStyle(slider, new Rule("start{left:
0em;}"), new Rule("end{left: " + targetPos + "em;}"));

From my understanding, setting the start-Rule to "left: 0em" ensures
that the morph starts at its initial position. The parameter targetPos
is updated accordingly.

When executing the effect the first time, everything seems to work
fine. Once the effect has finished execution, the left-attribute is
set to left: 1em. However, when executing the effect a second time, it
seems that the slider div jumps back to the initial position, in this
case left: 0em, starting the effect at this position and ends in left:
2em. I am wondering why this happens because the left-attribute is
correctly set at left: 1em after the first execution.

A reason for this oberservation could relate to the fact that the
position-attribute of the slider div changes to "relative" after the
first execution. On the other side, if this would cause the undesired
behavior, there should be a flip of the slider back to its intial
position immediately after first execution has completed.

I did not dive into the librariy code so far, but hope anybody can
help with this issue...

Thanks very much! Steffen

[Adam T]

Hi Steffan,

You are right when you say:

"From my understanding, setting the start-Rule to "left: 0em" ensures
that the morph starts at its initial position. The parameter targetPos
is updated accordingly"

and this is what it does. It calculates in relative terms, so 0em is
always going to be the start of your anchor. What you need to do is
change the start value as well as the end, i.e.

NMorphStyle move = new NMorphStyle(slider, new Rule("start{left: " +
startPos + "em;}"), new Rule("end{left: " + targetPos + "em;}"));

Or, you could let the library try and calculate the start position,
i.e.

NMorphStyle move = new NMorphStyle(slider, new Rule("start{}"), new

Rule("end{left: " + targetPos + "em;}"));

(I've not tried the last approach in this case, but I know the code
should see there is no marching start "left" for the end one, and try
and calculate what the start should be - keep an eye on the log
outputs though as sometimes a browser can through a repsonse of "auto"
back which the library can't translate as a position, and so reports
that)

//Adam

[Steffen]

Hi Adam,

calculating and setting the startPos as well solved the problem... I
also tried to let the lib calculate the start position by setting
start{} but this approach doesn't seem to work, at least not in my
situation. In this case, the slider div is not moving but rather just
shows up at the (correct) end position...

Anyway, thanks for the good work!

Steffen