If your a regular subscriber to my blog (and if you aren’t don’t forget you can subscribe here) you will know that I love Prototype, I was incredibly excited to see that Ajaxian had covered Thierry Schellenbach post about high performace JS apps.

(more…)

There is a very little used and unknown method which allows you to utilise JavaScript within a CSS file. The CSS Expression property allows you to assign a JavaScript expression to a CSS property. For example, this allows you to set the position of an element according to the browser size.
(more…)

Prototype has a very useful function which is not well documented, Element.inset. Element.insert is a very powerful prototype function which lets you insert a element in one of 4 positions, before, after, top, bottom of an element.

(more…)

As with most of you, Internet Explorer 6 is the bane of my life. I waste 100’s of hours every year creating IE6 specific JavaScript and CSS. Thats why I am supporting Save The Developers, a site which hopes to educate users not to use IE6.

However I must point out that IE6 is not the only buggy browser around at the moment, IE7, Firefox, Safari and Opera all do have buggy tendencies as well, just not as bad.

Example

Click Here

Original Source: http://giancarlo.dimassa.net

There have been many examples of bouncing effects in scriptaculous but this one has to be one of the most realistic. It uses the equations developed by Robert Penner to accurately represent a bounce, and it does look cool.

What you need

As with most of my tutorials this is based on scriptaculous and prototype, but the equations could easily be porter to other animation frameworks.

The code

This is really simple, basically what we are going to be doing is to add a new transitional effect to scriptaculous. To do this we just extend the Effect class.

Add this to your own JavaScript file instead of scriptaculous, so you don’t loose it when you update.

/*Based on Easing Equations v2.0
(c) 2003 Robert Penner, all rights reserved.
This work is subject to the terms in http://www.robertpenner.com/easing_terms_of_use.html

Adapted for Scriptaculous by Ken Snyder (kendsnyder ~at~ gmail ~dot~ com) June 2006
*/

function (pos) {
    if (pos < 0.36363636363636365) {
        return 7.5625 * pos * pos;
    } else if (pos < 0.7272727272727273) {
        return 7.5625 * (pos -= 0.5454545454545454) * pos + 0.75;
    } else if (pos < 0.9090909090909091) {
        return 7.5625 * (pos -= 0.8181818181818182) * pos + 0.9375;
    } else {
        return 7.5625 * (pos -= 0.9545454545454546) * pos + 0.984375;
    }
}

Use it

You can use this effect as a transition type with lots of effects.

new Effect.BlindDown(div, {
    duration: 0.5,
    transition: Effect.Transitions.Bounce
});

Check out Ken Snyder’s blog for more transitional effects.

Example: Click Here!

The script.aculo.us effects library is a fantastic tool. If this really simple tutorial I will show you how to utilize the scroll method and a handy ‘jump to top link’.

Step 1: Add References

Make sure you have the prototype and script.aculo.us
libraries attached to your web page, instructions for how to do this can be found here.

Step 2: Create JavaScript

You can either create a new JavaScript file or append these functions to an already existing one. So first of all we need the function. For that we create a new JavaScript object, we will call this ’scroll’.

var  scroll = { }

Next we want to add the functions. In my case I want a function that will scroll to the top and to the bottom:

var  scroll = {
	top: function(event) {  },
	bottom: function(event) {  }
}

Now we have our framework we can call the ScrollTo function:

new Effect.ScrollTo('top');

The ScrollTo function allows you to define a particular object that you want to scroll into view. In the case of dtsn.co.uk, I have a div on the top of every page with the ID of ‘top’.

Putting that all together we get:

var  scroll = {
	top: function(event) { new Effect.ScrollTo('top'); },
	bottom: function(event) { new Effect.ScrollTo('footer'); }
}

You can then call this function in one of two ways. You can call ’scroll.top()’ and ’scroll.bottom()’, respectively, through the onclick method on any HTML object. Alternative you can use the prototype method of Event.Observe:

// wait for the page to load
Event.observe(document, 'load', function(){
        // give an object an onclick method
	$('go_to_top').observe('click', scroll.top);
});

I have been an advocate of Firebug for a long time now, it’s the only reason why I still use Firefox! I’ve mainly been using it for CSS/HTML - it’s inline editing is a dream. However lately I have found myself doing a whole bunch of JavaScript, and Firebug still keeps surprising me. I must admit, I never read the instruction manuals, so this one was a bit of a surprise when I found it, the profiler.

Your web app is almost perfect. You’ve got all the bugs worked out, the artwork has been dropped in, and the users are loving it. Only one problem - some of your features are a little bit sluggish and you’re not sure why.

With Firebug, you’ll never again wonder why your code is slow. Using the Firebug profiler, you can separate the tortoises from the hares within seconds.

To use the profiler, just go to the Console tab and click the "Profile" button. Then use your app for a bit or reload the page and then click the "Profile" button again. You’ll then see a detailed report that shows what functions were called and how much time each one took.

Basically it lets you find out what the hell is causing your JavaScript to run slowly. Thank you Firebug!