Effect.Morph will not change vertical background position

[Diodeus]

Effect.Morph is not working properly when changing the vertical
background position of a CSS background image. (s version:1.8.1, p
version :1.6.0)

I'm trying to build a wipe effect. I'm making it appear as if the
image splits and then wipes away, starting from the center. This
worked well enough with making it split vertically and wipe
horizontally; I make two DIVs (left, right) and reduce the size of
the left to zero. The right div I move right, while moving the
position of the background to the left, so it appears the image is
being wiped away without moving.

The problem arises when I was building the second mode - horizontal
split with a vertical wipe. The background image in the bottom half
did not reposition, it it just appears as if it's sliding down.

I did a test to see if Effect.Morph was the problem and it appears to
be the case.

Vertical split demo: http://jameslab.moveable.com/morph/wipe.htm
Horizontal split demo: http://jameslab.moveable.com/morph/wipe2.htm
Test script: http://jameslab.moveable.com/morph/test.htm

If anyone has some insights I'd appreciate it.

- James.

[sunn]

This
new Effect.Morph('a',{style:'background-position:-50px 0px'})
should probably be like
new Effect.Morph('a',{background-position:'-50px 0px'})
(from your test script - http://jameslab.moveable.com/morph/test.htm)

the second argument is the styles object
http://github.com/madrobby/scriptaculous/wikis/effect-morph

[Diodeus]

Nope, that doesn't work, nor does it explain why horizontal
positioning woks, but vertical positioning does not.

On Jul 30, 12:36 pm, sunn <jo...@kolben.se> wrote:
> This
> new Effect.Morph('a',{style:'background-position:-50px 0px'})
> should probably be like
> new Effect.Morph('a',{background-position:'-50px 0px'})

> (from your test script -http://jameslab.moveable.com/morph/test.htm)
>
> the second argument is the styles objecthttp://github.com/madrobby/scriptaculous/wikis/effect-morph

[kangax]

I know that jQuery has a separate plugin specifically for animating
background position. http://plugins.jquery.com/project/backgroundPosition-Effect
Maybe effects.js is not able to parse the style properly.
Need to look into this.

--
kangax

[Diodeus]

Yup, effect.js is just doing a parseFloat on the paired background
position value, which only returns the first value and tosses the
second. Line 965 in 1.8.1.

> background position.http://plugins.jquery.com/project/backgroundPosition-Effect

[Nick Stakenburg]

It's not that simple to support since it would have to work with
things like 'left center' and '5em 70%'. The jQuery plugin is a nice
attempt though.

[sunn]

I did some testing and same goes for padding: 50px 50px as well.
Guess this affects all "multi-valued" css properties?

[kangax]

On Aug 1, 5:12 pm, sunn <jo...@kolben.se> wrote:
> I did some testing and same goes for padding: 50px 50px as well.
> Guess this affects all "multi-valued" css properties?

Any patches are obviously welcomed : )

--
kangax