Using a bit of small MooTools code and a cookie, it is possible to adjust the entire layout of a website without having to refresh the page. On top of that, you can add the cool transitions (Fx.Transitions) to control the page. This Quick Clips builds upon the javascript tutorial series here.

You Will Learn:

• Using Fx.Style and Fx.Transition to change the site's layout.
• Using a Cookie to save the option selected.

Attaching the Javascript

Make sure the MooTools javascript file is properly referenced in the HEAD of the document. Also, in this example, it is possible to add the javascript effects in the document itself, but in this example we will be storing it in another file to keep the HTML clean. (see the image below)

Creating the Links

In order to activate the javascript effect, we need links, of course, to tell the javascript to run. The link, in our example, that makes the layout shrink has a class of "smallRun" and the link for making it expand has a class of "largeRun". This will enable us to choose what effects to apply to the page when the specific link is clicked.

Creating the Javascript

Now that the link is created, we can create the effect. Using Fx.Style we can control how wide we want the site (please note that this is built off a Tutorial Series previously created. You can view it here). Below is a flash file with the javascript file. Rollover the pieces of the javascript to see an explanation.

Project Files