Moofx.js - CSS animations without coding, not unhovering

I really didn't know where to post this, so here goes.

I'm testing a very nice mootools script called moofx.js
http://playground.chrisbk.de/moofx/

This script, once installed in the header, allows you to simply add mootools animation effects using css commands alone, albeit custom ones.

Code:

---

div.red
{
  background-color:red;
  -moofx: short quad background-color;
}

div.red:hover
{
  background-color:green;
}

---

That simple command in the div.red part allows you to use the quad animation, for the short length (250ms) for animating the background-color. You can of course animate any of a number of variables, or all variables automatically.

The problem is this:
The animation goes forward, but not backward (back to unhover state). This works fine on the author's examples page, but not using mootools 1.2.4 in a TL installation. I have created a test page with some animations, but they both only work in the :hover direction, they do not return to normal like on the author's example page.

http://www.visionit.co.za/test.html -- NOT working with Mootools 1.2.4
http://www.visionit.co.za/test2.html -- working with Mootools 1.2b

Anyone got an idea by looking at the mootools code what needs to be modified to make it work with 1.2.4?

I tested it with firefox and an error is issued on line 149 of moofx.js

Code:

---

if (pseudo.length > 0){
        if (when == 'end' && !this.dynamicPseudos.contains(pseudo)) return;
                this.dynamicPseudos[(when == 'begin') ? 'push' : 'remove'](pseudo);
        }

---

try to change the above with

Code:

---

if (pseudo.length > 0){
    if (when == 'end' && !this.dynamicPseudos.contains(pseudo)) return;
    var fnc = (when == 'begin') ? 'push' : 'remove';
    if (typeof this.dynamicPseudos[fnc] != 'function') {
        alert('something goes wrong with '+fnc);
        return;
    }
  this.dynamicPseudos[fnc](pseudo);
}

---

this will be a good start to begin to debug :)

hope this helps in some way

hey ga.n

Thanks. that narrowed it down for me. I got it working now.

It seems that "remove" is no longer supported in the mootools framework 1.2.4 as an alias to erase, so I just changed the line to read

Code:

---

                this.dynamicPseudos[(when == 'begin') ? 'push' : 'erase'](pseudo);

---

Now both work... This is an amazing plug-in, as you never have to code mootools at all... just css code...

Quote:

---

Originally Posted by thyon

hey ga.n

Thanks. that narrowed it down for me. I got it working now.

It seems that "remove" is no longer supported in the mootools framework 1.2.4 as an alias to erase, so I just changed the line to read

Code:

---

                this.dynamicPseudos[(when == 'begin') ? 'push' : 'erase'](pseudo);

---

Now both work...

---

I am glad to hear it :)

Quote:

---

Originally Posted by thyon

This is an amazing plug-in, as you never have to code mootools at all... just css code...

---

yes it's really impressive :) but imo it has a really "bad name", because is too similar to moo.fx

yes... we can just rename it to moocss.js...

hey ga.n or any other coder!

I've run into another problem on IE7. I've been unable to trace the exact cause of the problem. If you're on windows maybe you can test it out for me. Mac is hard to test Windows, and the Debug tools are not very good for IE (or I don't really know them). Maybe again, it's just a rename of a function/method or variable.

I've setup a test page... It's the same one as before...
http://www.delaney.co.za/home2.html -- the background doesn't reset when you leave the mouse.

Now it can't be a mootools thing, because the code is working fine in firefox, camino and safari...

Quote:

---

Originally Posted by thyon

hey ga.n or any other coder!

I've run into another problem on IE7.
I've setup a test page... It's the same one as before...

http://www.delaney.co.za/home2.html --

the background doesn't reset when you leave the mouse.

---

the above link is not the one you posted :) did you mean http://www.visionit.co.za/test2.html?

can you upload a test page with mootools "uncompressed" this way it will be more easy to debug :)

AFAICT ie7 is no longer supported by ms http://support.microsoft.com/gp/life...ernet_Explorer

p.s.
if you are on mac a good way to test stuff for internet explorer is to install windows on a virtual machine (sorry, but I do not know any of them for mac)

Sorry, I was going to use the same URL, but the problem was also on a client site, so I thought I'll just use that new test page I just finished setting up.

I've added the SRC files instead.

I DO run in a virtual partition, but unlike Safari, I have no idea what kind of debugging tools IE has... Quoting a line number doesn't really help much... Safari gives you the line, file and what's wrong with the code...

I support 2 versions of IE, so until IE9 is released finally, I'll have to keep putting is fixes for IE7 (geez, can they make a compliant browser for once!)

Thyon --

For debugging in IE, try taking a look at http://www.my-debugbar.com/wiki/. They have a suite of tools (free and cheap) for testing in various verisons of IE (5.5-9), a JS debugger, and a tool that functions a bit like Firebug for inspecting the DOM.

It's not great. But probably the best solution out there short of installing Microsoft Virtual Studio.

hey ga.n

I've run into another problem. The following site I upgraded the 2.10 installation using mootools 1.3.2 and there the moocss was working fine. Now the problem seems to be 1.4 on 2.11. Any ideas to help me out? what's your Skype name?

the URL in question is:
http://www.nuru.co.za/prototype/home
Hover over the top menu and the background should fade in quickly, not just flash to the new colour. The colour changes, and I see the styles being modified, but not changing upwards slowly to the hover colour. It's weird because I don't think that moo tools would have changed their fx.start() code, right?

Thyon, check this

Quote:

---

https://github.com/contao/core/issues/3956

---

and try replacing the 2 mootools scripts with Leos patched ones. It affects the fx class, and the patches fixed the accordians for some, and Menumatic for me, so it may well fix yours too.

Nope. I did upload new versions and then cleared the scripts cache. No effect. The problem still remains. Oi. The client isn't going to be happy I upgraded to 2.11 to lose this functionality just before launch. Now I have to write the manual code to make these background-colors animate. What a mission!

Isn't animating background colors with mootools as easy as the code below?

Code:

---

var objMorph = new Fx.Morph($('someItem'), {'duration': 500});
objMorph.start({'background-color': 'red'});

---

Add some code for the events and that should do it (ok, some more work then the easy solution moofx is supposed to be)

MooTools 1.4.5 was released a week or so ago -- and they've fixed the FX class bug that broke your scripts.

It *still* leaks memory like a sieve, though...

why would leo implement moo tools with bugs and memory leaks for a "long-term" 2.11 release? It just screwed up things...

Thanks Gary, I'll try 1.4.5. Which one do I have to get -- with compatibility or not?

PS. Ruud.. Its not quite that simple, it's menu hovers and they have many different places where they have to be enabled and then it's mouseover and mouse out triggers. Also I don't use standard easing functions, so then it's easing, mouseover and i have to merge the FX statements otherwise you get problems like when you animate multiple times over each other. This script does all that.

I tried 1.4.5 and it still doesn't work. I'm going to have to go the route of manual scripts.

Here is my code for the top-level nav. Now I have to duplicate it for the other places.

Code:

---

        $$('#menumain li a').each(function(menu, i){
                       
                        menu.set('morph', {duration: '200ms', transition: 'quad'});
                        menu.setStyle('background-color', '#CCC');

                        menu.addEvents({
                    mouseenter: function(e, i){
                                        e.stop();
                                  menu.morph({'background-color': '#999'});
                    },
                    mouseleave: function(e, i){               
                                        e.stop();
                                  menu.morph({'background-color': '#CCC'});
                    }       
                        });
        });

---

Crappy... I thought that would have been your issue.

I would have answered "with compatibility" -- not sure if you tried that one.

Also you can roll back to MooTools 1.3.2 -- there are multiple versions in the plugins folder, and the constants.php can be changed to use another version.

I tried that rollback to 1.3.2, but that generated more errors with other parts like accordions which dont work, because that code changed.