Mootools vs Scriptaculous

Can anyone please let me know how close the incompatibility issue between these in FW is to being resolved? Or will it perhaps be fixed in the near future sometime this year?

I know its a bit like asking how long is a piece of string, but someone must have a rough idea of the current state of play.

Any news would be very much appreciated.

Worm


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The issue is not within Freeway, and it is not possible to fix.
MooTools forked (split off from) Prototype a number of years ago, and
diverged wildly in its approach to code while maintaining some of the
same names for variables and methods used throughout the library.

Moo is monolithic – one library to do both a spackle job over the
various browsers’ implementation of JavaScript as well as to create
fancy visual effects. Prototype does (mostly) only the foundation
layer, creating a level base upon which libraries like script.aculo.us
can build fancy visual effects.

When you use any of the Freeway FX Actions, you are using Prototype +
script.aculo.us to make them work. If you also load MooTools into the
page, then either Prototype will be broken by Moo re-imagining its
variables and methods, or Moo will be broken for the same reason. (It
all comes down to which one loads last.)

But there’s a much larger issue here. You shouldn’t be loading more
than one of these (not so wee) beasties into your site at all. It’s
quite rude to stuff a half a megabyte of JavaScript into a browser
just to make some eye candy happen.

MooTools has a lot of goodies going for it, but so does Prototype +
script.aculo.us. Often you can find what you’re looking for in one or
the other. What you don’t want to do at all is mix-and-match. If you
want to use Moo, then just don’t use any of the Freeway FX Actions.
You can create all of the rollover effects you need using Moo and a
sprinkling of classnames on your links to trigger the specific effect.

Or you can go to http://scripteka.com and browse through the hundreds
of effects and libraries to add on to Prototype. There’s even a MooFX
library there that adds (many of) the MooTools effects on top of
Prototype – win-win!

Walter

On Jan 26, 2010, at 10:54 AM, Mr worm wrote:

Can anyone please let me know how close the incompatibility issue
between these in FW is to being resolved? Or will it perhaps be
fixed in the near future sometime this year?

I know its a bit like asking how long is a piece of string, but
someone must have a rough idea of the current state of play.

Any news would be very much appreciated.

Worm


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I am aware of Weaver’s suiteFX = ‘sweet effects’ action suite, which is a modernization of the ideas behind the previous ‘Mootools Suite’, mainly for compatibility with Softpress’ choice of Prototype and Scriptaculous.

Following on from this, my issue currently resides with the TRANSITION FX action in this suite…

Is it possible to ‘Invert’ this effect, in other words make it expand upwards rather than it’s default downward direction.

I want to create this Moo effect on my new site http://www.audi.co.uk/new-cars/a6/rs-6-saloon.html

If there was no compatibility issue I would be able to achieve this in FW. But as the software permits, I am trying a work around using the transition effect instead of a ‘Moo Accordion’.

Question: Can the Transition FX action be made to collapse various sections on ‘mouse over’ as the Moo accordion does? I can’t seem to get this to work. If anyone has any suggestions I’d really appreciate them on a solution or possible work around.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Just read your post Walt.

In short it’s never gonna happen then. Shame!

As you say, it’s not the end of the world, guess the Audi site is a very good example of some serious eye candy!!! lol

I’ll bare this in mind in future developments, but also check out the Moo Libraries.

You also say NOT to mix-'n-match Prototype + script.aculo.us. This obviously applies to a single page, but is this also a general rule of thumb throughout the entire site, because of size? Or?

I see script.aculo.us loads quicker and is thus more efficient than Prototype ‘Moo’ actions so if this was to be a deal breaker, which would you choose… More Eye Candy and capability over file size/speed and less capability.

I hope this doesn’t open up a can of ‘Worms’ pun intended but questions I have as I push the FW boundaries.

Worm


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Think of Prototype + script.aculo.us as one unit – they work
together. Taken together, they can do many of the same things that
MooTools can do by itself. Prototype + MooFX is another combination to
do these things, too. And jQuery is yet another, and then there’s the
YUI library from Yahoo, and Ext, and I could go on and on. This is a
“well-solved problem” in short. But the wheel has been reinvented so
many times that your largest problem is choosing one library (or set
of libraries that work together) and sticking to it.

What you want to avoid is using more than one complete solution at the
same time. That leads to errors and is wasteful of the visitor’s
bandwidth (and memory, if they’re on an iPhone).

Walter

On Jan 26, 2010, at 11:35 AM, Mr worm wrote:

Just read your post Walt.

In short it’s never gonna happen then. Shame!

As you say, it’s not the end of the world, guess the Audi site is a
very good example of some serious eye candy!!! lol

I’ll bare this in mind in future developments, but also check out
the Moo Libraries.

You also say NOT to mix-'n-match Prototype + script.aculo.us. This
obviously applies to a single page, but is this also a general rule
of thumb throughout the entire site, because of size? Or?

I see script.aculo.us loads quicker and is thus more efficient than
Prototype ‘Moo’ actions so if this was to be a deal breaker, which
would you choose… More Eye Candy and capability over file size/
speed and less capability.

I hope this doesn’t open up a can of ‘Worms’ pun intended but
questions I have as I push the FW boundaries.

Worm


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

There are a lot of effects in script.aculo.us that have not (yet) been
wrapped up in a neat FX bow. You can use anything you like through the
Protaculous Action, but you’ll have to get your hands a little dirty
writing (or copy/pasting) the code.

To make something grow up rather than down, you have to manipulate two
properties at once. (This is because there is nothing in CSS
positioning to say “place the bottom of this box this far away from
the top of the screen”.)

The script.aculo.us Effect.Morph can be used to change an element from
one set of styles to another. So what you would need to do is when the
page loads, set your menu element to have 0 height and a top position
equal to its current top plus its height. Then you would listen for
the click event on your trigger element and use Morph to change the
height and the top at the same time.

Here’s a quick example. Apply Protaculous to the page, and choose
scriptaculous-packed from the library picker.

Draw an HTML box on the page, position it at 50px from the top of the
screen, and make it 200px tall. Give it a background color so you can
see it. Change the name of the box to box1 in the Inspector.

Draw another element on the page to use as your trigger. Give it a
color and name it box2.

Click on the pasteboard, and then click on the top Function Body
button in the Actions palette. Paste in this code:

$('box1').setStyle({top:'250px',height:0,overflow:'hidden'}).hide();

Okay that dialog, then click on the bottom Function Body button. Paste
in this code:

$('box2').observe('click',function(evt){
	$('box1').morph('top:50px; height:'200px');
});

Now preview your page. The first box should be completely hidden when
the page loads. When you click on the second box, the first box should
slide up out of nothing into existence.

If you’ve positioned your second box at the base of the first, then
you will have the same effect you saw in the Audi page.

The next trick will be to get the accordion menu to appear within the
first box, which is a cut and paste effort on your part.

The final trick will be to wire the first box to grow upward whenever
its height changes, and that’s going to take a bit more work (and
math) to work out. If I get a moment later I’ll try to post something
on those lines.

With those three things covered, you will have duplicated the effect
(and learned something about JavaScript animation, too).

Walter

On Jan 26, 2010, at 11:14 AM, Mr worm wrote:

I am aware of Weaver’s suiteFX = ‘sweet effects’ action suite,
which is a modernization of the ideas behind the previous ‘Mootools
Suite’, mainly for compatibility with Softpress’ choice of Prototype
and Scriptaculous.

Following on from this, my issue currently resides with the
TRANSITION FX action in this suite…

Is it possible to ‘Invert’ this effect, in other words make it
expand upwards rather than it’s default downward direction.

I want to create this Moo effect on my new site http://www.audi.co.uk/new-cars/a6/rs-6-saloon.html

If there was no compatibility issue I would be able to achieve this
in FW. But as the software permits, I am trying a work around using
the transition effect instead of a ‘Moo Accordion’.

Question: Can the Transition FX action be made to collapse various
sections on ‘mouse over’ as the Moo accordion does? I can’t seem to
get this to work. If anyone has any suggestions I’d really
appreciate them on a solution or possible work around.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Eek! I am building a site for a client using transition FX on most pages (for gentle fade ins) but opted for Mootools on two pages because of the Slimbox gallery. The client likes it. But Walter confirms my nagging doubts about these two actions together. Can I build a Slimbox in another way without being baffled by too much code? I am aware of your scripty lightbox Walter but I would like multiple images to be shown.

Like Worm, I have been hoping that suiteFX would solve the issue but things have gone quiet on this of late.

Best wishes Richard

But there’s a much larger issue here. You shouldn’t be loading more
than one of these (not so wee) beasties into your site at all. It’s
quite rude to stuff a half a megabyte of JavaScript into a browser
just to make some eye candy happen.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If you have Moo on one page in your site, and Proto/Scripty on other
pages in your site, that doesn’t violate my rule. I wasn’t perfectly
clear – I meant that you should pick one library to use per PAGE.

If you can use the Slimbox on the gallery page, and FX on the other
pages (if you can drop the use of FX on the page that has the Slimbox)
then you will be just fine.

Walter

On Jan 26, 2010, at 4:19 PM, Richard Lowther wrote:

Eek! I am building a site for a client using transition FX on most
pages (for gentle fade ins) but opted for Mootools on two pages
because of the Slimbox gallery. The client likes it. But Walter
confirms my nagging doubts about these two actions together. Can I
build a Slimbox in another way without being baffled by too much
code? I am aware of your scripty lightbox Walter but I would like
multiple images to be shown.

Like Worm, I have been hoping that suiteFX would solve the issue
but things have gone quiet on this of late.

Best wishes Richard

But there’s a much larger issue here. You shouldn’t be loading more
than one of these (not so wee) beasties into your site at all. It’s
quite rude to stuff a half a megabyte of JavaScript into a browser
just to make some eye candy happen.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Walter, that is good to know and a relief. (except that the mootools pages don’t validate at W3C - only 3 errors but …)

Best wishes Richard


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Walter said

Click on the pasteboard, and then click on the top Function Body button in the Actions palette. Paste in this code:

$('box1').setStyle({top:'250px',height:0,overflow:'hidden'}).hide();

Okay that dialog, then click on the bottom Function Body button. Paste in this code:

$('box2').observe('click',function(evt){
    $('box1').morph('top:50px; height:'200px');
});

Now preview your page.

OK - I tried this and while the first line in the top Function Body worked (hid box1) as soon as I added the bFB it remained visible.

Is it possible that the FWT site has altered the code?

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Page is here http://www.deltadzine.net/spurious/popup.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Sorry, typo in here. Try this:

$('box2').observe('click',function(evt){
	$('box1').morph('top:50px; height:200px');
});

An extra single-quote snuck in there when I wasn’t looking.

Walter

On Jan 26, 2010, at 7:39 PM, DeltaDave wrote:

$(‘box2’).observe(‘click’,function(evt){
$(‘box1’).morph('top:50px; height:‘200px’);
});


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hmmmm! - Nope that didn’t do it.

I must be missing something.

http://www.deltadzine.net/spurious/popup.html

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

One last shot:

$('box2').observe('click',function(evt){
	$('box1').show().morph('top:50px; height:200px');
});

That should do the trick.

Walter

On Jan 26, 2010, at 7:47 PM, DeltaDave wrote:

Page is here http://www.deltadzine.net/spurious/popup.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Walter - I was going bald working on this one.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Interesting how if you put both box2 and box1 as inline divisions they both move in opposite directions.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

WaltD’
Do you have an example of how to apply MooTools effects on top of Prototype. I down loaded the .js files from scripteka.com
but I don’t know how to apply them.

Billy


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Can you post a link directly to the script you’re trying to apply? Ordinarily, you cannot mix Moo and Prototype, because they are incompatible. (Moo “forked” away from Prototype, and became something more like jQuery, in that it combined effects and cross-browser compatibility in one library. Prototype is purely about creating a uniform API over JavaScript so you don’t have to write a dozen versions of the same code to account for various browsers and platforms.)

If you found this on Scripteka, then I’m pretty sure it’s Prototype-safe, though.

Walter

On Oct 31, 2013, at 12:01 PM, billy kimmel wrote:

WaltD’
Do you have an example of how to apply MooTools effects on top of Prototype. I down loaded the .js files from scripteka.com
but I don’t know how to apply them.

Billy


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

WaltD.
Here is the link to the moo script.
http://moofx.mad4milk.net

I wanted to use Freeway’s Transition Fx “Slide IN” but it no longer works. Freeway says there is a bug and they are trying to fix it. I have prototype on my page for the Sticker Action so moo is a conflict, but I was reading a thread that you post a few years ago about adding moo script on top of Prototype.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

This script is seriously old, and I’m not sure it would be compatible with the latest version of Prototype. Can you post a link to a mockup showing the effect you want to perform? I just posted a simple example this week of how you could slide in a contact form, maybe you could use a similar technique with Scriptaculous.

If you want to use this script along with Protaculous 2, you could use the “Additional JavaScript Libraries” section of the Action to add the script(s) you want to use. First, upload the scripts (moo.fx.js, moo.fx.transitions.js, and moo.fx.utils.js) to your server. Put them somewhere simple, like in a folder named moo at the top level of the server’s root folder. Next, click the disclosure triangle next to Additional JavaScript Libraries, and enter your first script (moo.fx.js) in the name field and the complete public URL in the CDN URI field. (If your server was named example.com, you would enter http://example.com/moo/moo.fx.js in that field.) Repeat that last step for each of the other scripts. Finally, any function that you want to write or paste should go in one of the “Observer” editors. There are three – DOM Loaded, Window Load, and Custom. If you want the script to run as soon as possible – even before anything is painted to the browser – then use DOM Loaded. (If the script you are adding includes something like this in its first line: document.observe('dom:loaded', function(){, then skip on down to the Custom observer.) If you want the script to run as soon as everything is loaded and visible in the browser, then put that in the Window Load observer. If (as noted earlier) the script includes its own callback to trigger the effect at a particular time, then put that in Custom.

Walter

On Oct 31, 2013, at 12:26 PM, billy kimmel wrote:

WaltD.
Here is the link to the moo script.
http://moofx.mad4milk.net

I wanted to use Freeway’s Transition Fx “Slide IN” but it no longer works. Freeway says there is a bug and they are trying to fix it. I have prototype on my page for the Sticker Action so moo is a conflict, but I was reading a thread that you post a few years ago about adding moo script on top of Prototype.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options