= Shutter = By Andrew Sutherland Started August 11, 2005 Version 1.0 Licensed under the GPL 2.0 == What is shutter? == Shutter is an easy way to load links from within a page. When a link is clicked with Shutter, a translucent layer is created on top of the current page and the new page is loaded (via AJAX) in a small window on top of this translucent layer. == What shutter does == When a page loads, Shutter crawls it for links with a class of "shutter". When it finds one, it replaces the link's href to load the page with ajax as described above. This method is completely accessible, because the links are only changed if javascript is on. Example: About Me Without javascript on, this is just a normal link that will take the user to about.html. But with Shutter, the link is changed to: About Me Now, the exact same page will be loaded, but this time within a box overlayed on the current page. To return to the page, just click anywhere outside of the info-box. If you want to provide a link that will return to the page, you can use: Close == Usage == 1. Link to the javascript file by adding the following code to the of your file. 2. Link to the CSS file like so (also from within the ): I've provided the base style in that file, but you may want to add to it for titles etc. All the information is loaded from within
, so if you can have shutter-specific styles like: #newInfo h2 { font: 2.3em georgia, times, serif; color: #4d4; border-bottom: 2px solid; } 3. Add class="shutter" to links you want to be loaded in the shutter. If you already have a class on the link, that's okay. You can have multiple classes like this: Foo == Notes == When shutter requests a page via AJAX, it appends ?ajax=on to the URL of the page. This allows you to differentiate between calls made via AJAX and calls made regularly. If the URL already has a ?, Shutter will instead append &ajax=on. So, faq.php?id=123 will be loaded as faq.php?id=123&ajax=on The HTML loaded with shutter should not be a complete page, just HTML suitable to be within a
. Generally, it's not a good idea to load regular pages with Shutter, only information snippets like a "What's This?" help link. Position: fixed is used so that Shutter is always covering the entire screen. IE/win can't handle position: fixed, so it is served absolute. == The Why == Now, the fun part. This code was written in the back seat of a car during an 11-hour marathon trip to Oregon. Sans internet and procrastinating about math homework, the only thing I could do was write client-side code. I didn't think to get PHP and Apache running before I left. I had written something similar to this for my AJAX periodic table (viewable at http://code.jalenack.com/periodic/). This is a ready-for-the-masses version of the code. == What's with the name? == Well, the effect is kind of like shutters, where the light gets dimmed. And they can be turned on/off. Err, something like that. Hey, you asked!