Help! Fx.Scroll not working in IE?

[Ami]

Please help! I'm at my wits end trying to figure this out.

I used the Fx.Scroll effect on a website I recently developed, and it
works beautifully in Firefox, but on every version of IE the effect is
shaky and a little nauseating to watch. Can anyone give me some sort
of clue as to why this happens and what I can do to fix it?

I've tried removing all the images (its a very image heavy site), as
well as removing the other scripts I have running on the same page,
all to no avail.

The site URL is http://www.3wayevents.com. It's just one page, so
viewing the source will reveal any and all of my code besides the
unaltered javascript libraries.

Thanks in advance!

[Roman Land]

Hi,

Your code looks good (except maybe that you are creating new event to stop bubling... but that does effect the scrolling issue).

I would try playing with the FPS value http://www.docs.mootools.net/docs/core/Fx/Fx
My guess that a lower value (default 50) will resolve this issue, but maybe a higher one :)

Please update if this helped..

--
---
"Make everything as simple as possible, but not simpler."

- Albert Einstein

[Ami]

No luck. :( Tried lower (all the way down to 1 fps) and higher (all
the way to 1500fps) and it changes frequency, but it's still very
obvious.

...Any other ideas?

This is so strange!!

On Dec 17, 4:22 pm, Roman Land <roman.l...@gmail.com> wrote:
> Hi,
>
> Your code looks good (except maybe that you are creating new event to stop
> bubling... but that does effect the scrolling issue).
>

> I would try playing with the FPS valuehttp://www.docs.mootools.net/docs/core/Fx/Fx

> My guess that a lower value (default 50) will resolve this issue, but maybe
> a higher one :)
>
> Please update if this helped..
>
>
>
> On Fri, Dec 18, 2009 at 12:06 AM, Ami <annema...@go9media.com> wrote:
> > Please help! I'm at my wits end trying to figure this out.
>
> > I used the Fx.Scroll effect on a website I recently developed, and it
> > works beautifully in Firefox, but on every version of IE the effect is
> > shaky and a little nauseating to watch. Can anyone give me some sort
> > of clue as to why this happens and what I can do to fix it?
>
> > I've tried removing all the images (its a very image heavy site), as
> > well as removing the other scripts I have running on the same page,
> > all to no avail.
>

> > The site URL ishttp://www.3wayevents.com. It's just one page, so

[Roman Land]

You could try (for testing at least) removing tracking scripts you included (google and some other ones), I see in their code that they are watching for events

[Ami]

Nope...this problem was happening before any of those scripts were
added, unfortunately.

I ended up having to give up on it for a while for times sake and
finish out the site despite the weird issue. >.< Sorry.

Thanks so much for trying to help, you're the first and only one so
far (across 3 different forums). Any other possible tricks up your
sleeve?

[Roman Land]

if I recall correctly I had better performance with absolute positioning (with left: (n)px top: (n)px) instead of using offset with FX, I cant explain it but it helped. (maybe the browser renders absolute position movement better then offset..

Let me know if you've tried it!

[Ami]

Nope, I haven't tried that. Bear with me for a second here, because
I'm still relatively new to this, what code would I change to make
that work?

[Roman Land]

Tried it with your site but I am getting the same results.

Did you try the smoothscroll plugin? http://mootools.net/docs/more/Fx/Fx.SmoothScroll

HTH

[Roman Land]

By the way, using absolute positioning works a bit better, if you want to try what you need to do is add "position: relative" to your id=container, then you init two fx classes (one to do x-axis, another for y-axis)

var _myFx1 = new Fx.Tween(document.id('wrapper'));
var _myFx2 = new Fx.Tween(document.id('wrapper'));

// 0,0 is the top left position of the page, moving to the right is thus negative left (move the "wrapper" inside the "container")
// to feel how the scrolling goes assign this function to some button

scrollTest = function() {

_myFx1.start('left', - 2000);
_myFx2.start('top', - 2000);

}

If this works out better for you, you will need to find the offset of elements you want to scroll to, so build a little class the does this, using:
(to find the destination element offset inside the wrapper)
document.id('content4').offsetHeight
document.id('content4').offsetWidth

put those values as negatives as parameters to the two FX classes we created earlier.

[Ami]

Attempted to implement SmoothScroll, but it broke all of the links.

What I'm gathering from the docs is that SmoothScroll doesn't work
with elements, right? I'd have to restructure the site?

On Dec 17, 6:12 pm, Roman Land <roman.l...@gmail.com> wrote:
> Tried it with your site but I am getting the same results.
>

> Did you try the smoothscroll plugin?http://mootools.net/docs/more/Fx/Fx.SmoothScroll

[Roman Land]

Never tried that plugin.. did you try the absolute positioning? its easier to integrate

If I have time tomorrow I will look into this plugin and try to help you.

[Ami]

I'm headed out of the office right now but will try it first thing
tomorrow morning and keep you posted. Thanks so so much, again, all
of the help is much appreciated.

[Ami]

Alright, attempted to implement the absolute positioning method...and
it almost works. :)

In firefox the transition is smooth, but in IE the div just "jumps" to
the position specified. Is there any way to set a duration, or fps
for this like you can for Fx.Scroll? It's really important that you
be able to see the images etc. in the transition between pages.

You can see what I'm talking about at http://3wayevents.com/index_ie.html

[Roman Land]

Thats great!

Sure you can, when you init the fx use any of the options:

var _myFx1 = new Fx.Tween(document.id('wrapper'), {
  // place here any of the options you would otherwise
  duration: 'long',
  transition: 'sine:in',
  fps: 40
})

[Ami]

Hey Roman,

Sorry for taking so long to update. I got caught up in other
projects...

So, I've finally implemented all of the settings, and Firefox is
beautiful as usual, but now I don't even get a tween effect in IE7.
It just "jumps" to the new position despite all of the settings.

If you'd like, you can check out what I've done at http://www.3wayevents.com/index_ie.html.

Any ideas??

Ami

On Dec 18, 11:19 am, Roman Land <roman.l...@gmail.com> wrote:
> Thats great!
>
> Sure you can, when you init the fx use any of the options:
>
> var _myFx1 = new Fx.Tween(document.id('wrapper'), {
>   // place here any of the options you would otherwise
>   duration: 'long',
>   transition: 'sine:in',
>   fps: 40
>
>
>
> })

> On Fri, Dec 18, 2009 at 5:41 PM, Ami <annema...@go9media.com> wrote:
> > Alright, attempted to implement the absolute positioning method...and
> > it almost works. :)
>
> > In firefox the transition is smooth, but in IE the div just "jumps" to
> > the position specified.  Is there any way to set a duration, or fps
> > for this like you can for Fx.Scroll?  It's really important that you
> > be able to see the images etc. in the transition between pages.
>

> > You can see what I'm talking about athttp://3wayevents.com/index_ie.html

[Roman Land]

Hi Ami,

It seems that there is a bug with the "cine:in" transition you chose to use, I tried it without a specified transition and it worked nicely in IE8.
Otherwise you could open a ticket in lighthouse (I dont have the exact link, you could find it in other posts) to get that looked at by the MooTools developers!

Enjoy
-- Roman

[Ami]

I tried taking out the transition and even changing it to a different
one but it doesn't seem to help in IE7 or IE8.

Is there something you did other than just removing the "transition"
line?

[Aaron Newton]

I don't think "cine" is a valid transition.

http://mootools.net/docs/core/Fx/Fx.Transitions

[Ami]

It was "sine," haha. That was a typo. I also changed it to Quad, no
luck there either.

On Dec 23, 11:19 am, Aaron Newton <aa...@iminta.com> wrote:
> I don't think "cine" is a valid transition.
>
> http://mootools.net/docs/core/Fx/Fx.Transitions
>

> On Wed, Dec 23, 2009 at 9:06 AM, Roman Land <roman.l...@gmail.com> wrote:
> > Hi Ami,
>
> > It seems that there is a bug with the "cine:in" transition you chose to
> > use, I tried it without a specified transition and it worked nicely in IE8.
> > Otherwise you could open a ticket in lighthouse (I dont have the exact
> > link, you could find it in other posts) to get that looked at by the
> > MooTools developers!
>
> > Enjoy
> > -- Roman
>

[Roman Land]

Hi Ami,

I have to run, but I found out that if I apply the effect on another element:
var myFxa1 = new Fx.Tween(document.id('demo-inner', {
  duration: 'long',
  fps: 40 }));

var myFxb1 = new Fx.Tween(document.id('demo-inner', {
  duration: 'long',
  fps: 40 }));


$('link3-2').addEvent('click', function(event) {
    event.stop();
    myFxa1.start('left', -100);
    myFxb1.start('top', -100);
});

It worked (this element is the "about" button in your page after the -1200, -1200 transition.
My guess is that you applied some code on top of the new two Fx instances on the "link-1", "link-2" etc.. (maybe even one of the classes they share..)

Check it out and let me know!

On Wed, Dec 23, 2009 at 7:21 PM, Ami <anne...@go9media.com> wrote:

It was "sine,"  haha.  That was a typo...

On Dec 23, 11:19 am, Aaron Newton <aa...@iminta.com> wrote:

> I don't think "cine" is a valid transition.
>
> http://mootools.net/docs/core/Fx/Fx.Transitions
>

> On Wed, Dec 23, 2009 at 9:06 AM, Roman Land <roman.l...@gmail.com> wrote:
> > Hi Ami,
>
> > It seems that there is a bug with the "cine:in" transition you chose to
> > use, I tried it without a specified transition and it worked nicely in IE8.
> > Otherwise you could open a ticket in lighthouse (I dont have the exact
> > link, you could find it in other posts) to get that looked at by the
> > MooTools developers!
>
> > Enjoy
> > -- Roman
>

[Ami]

So weird....

I'm so close!

It seems the transition works, EXCEPT for on the links on the first
page. All of the others work just fine. Although I can't seem to
find anything different between the code on each page other than the
id names.

I'm still investigating, but if anyone sees something that I don't,
please please let me know.

Ami

On Dec 23, 11:49 am, Roman Land <roman.l...@gmail.com> wrote:
> Hi Ami,
>
> I have to run, but I found out that if I apply the effect on another
> element:
> var myFxa1 = new Fx.Tween(document.id('demo-inner', {
>   duration: 'long',
>   fps: 40 }));
>
> var myFxb1 = new Fx.Tween(document.id('demo-inner', {
>   duration: 'long',
>   fps: 40 }));
>
> $('link3-2').addEvent('click', function(event) {
>     event.stop();
>     myFxa1.start('left', -100);
>     myFxb1.start('top', -100);
>
> });
>
> It worked (this element is the "about" button in your page after the -1200,
> -1200 transition.
> My guess is that you applied some code on top of the new two Fx instances on
> the "link-1", "link-2" etc.. (maybe even one of the classes they share..)
>
> Check it out and let me know!
>

> ...
>
> read more »