Scriptaculous Effects

[Simon]

Is there a list anywhere of what effects (for example, as it is the default) pligg uses in conjunction with the yget template, and which of the scriptaculous files are called to produce those effects?

[kbeeveer46]

look in effects.js in the SVN code. Those are all the effects that are used (I wasn't sure on some of them so I left them in anyways). Using scriptaculous requires using prototype.js which is the largest js file.

[dollars5]

KB - i was wondering - is it possible to use the prototype lite file that is used with Mootools - it seems to get the scroll down effects work (sidebar boxes), tell a friend and add to under the story summary. But seems to break many things and cause m,any JS errors - probably we too can attempt on something that will reduce the prototype.js to have only those effects that we use.

Am enclosing the sample protype.js that I got from moo.fx JS library - more details at http://moofx.mad4milk.net/#prototype - it is <3KB (currently we use 49KB :( )

[kbeeveer46]

I've tried it before and it broke many things but I didn't have time to investigate any further.

[dollars5]

Hmmm, if I did find time at some point - will look into it - that is one area that messes many sites that do not have gzip compression enabled.

Btw: for gzip disabled browsers like safari - will it work fine if the gzip mode is enabled - I remember someone facing trouble with it and suggested to check if gziop supported by browser and serve appropriate files - just bringing it to your attention if that is not yet done.

[Simon]

If you're using the php gzip function, then I believe it checks to see if the browser accepts it. I'm not sure if the other gzip method does (where the files are stored as compressed on the server).

I use the following in my htaccess to make sure that the .gz files are only served if the browser can support it, otherwise it serves the non-compressed version in the same directory:

AddEncoding gzip .gz
##### CSS / JS Compression Begin #####
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{THE_REQUEST} ^(.*).css
RewriteCond %{SCRIPT_FILENAME}.gz -f
RewriteRule ^(.*)\.css $1.css.gz [L]

RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{THE_REQUEST} ^(.*).js
RewriteCond %{SCRIPT_FILENAME}.gz -f
RewriteRule ^(.*)\.js $1.js.gz [L]
##### CSS / JS Compression End #####

The other thing i've done is to take prototype.js, effect.js, dragdrop.js (in that order) and pushed them all into one file, and compressed it. Comes to around 20kb in total. I left the EditinPlace.js file separate, as I think that's what is used for the admin editor? Im thinking of adding an extra smarty variable to all admin pages, so i only have to call it for the admin section...unless it is used elsewhere.

Feel free to test it to see if it breaks anything. I don't like the way scriptaculous is so bulky!

[kbeeveer46]

Simon, I've tested that code before and it only worked with the CSS files and not .js files. I used this test to see which files were being loaded http://www.websiteoptimization.com/services/analyze/

[Simon]

Ah, that's what I originally thought too, but I don't believe that test is accurate. I now use firebug to test load times and sizes, and it reports that js and css are served as compressed to my firefox browser. However, if i test it with the webanalyser, it won't register as compressed.

I did a number of tests with firebug - adding in and removing the gzipped files to see whether the load sizes were different, and they were, so I believe it is correct - at least for FF. The one thing I haven't been able to test is whether the same is true for IE.

[kbeeveer46]

I don't think I had firebug installed when I tested it before but when I tested it with that link it actually said that .css.gz was being loaded but still said the .js files and not the .js.gz were being loaded. I'll give it a whirl with firebug and see what I can find out.

[Simon]

What I noticed with firebug, was that it was reporting that protoype.js was being loaded, but the size was that of the compressed file. I think the reason is that the htaccess code doesn't 301 it to the compressed file, it just silently adds on the gz extension. If you click on a javascript file in firebug, it will show the gzip encoding however.

I'm also going to try out the Firebug console for IE, and see if the results are the same.

http://www.phpied.com/firebug-console-for-ie/

EDIT: nevermind, only shows js errors, not any file or loading times. Although interestingly enough, I was able to confirm that a compressed javascript file was being served to IE anyway. The compressed prototype file I attached above gives an error in IE, but not FF. When I removed the compressed file, cleared cache and refreshed, the page was loaded in IE without any errors. So i'm quite confident it works.

Also updated the attached file above to fix the error it was producing in IE.