Insanely easy tabbed web pages with Prototype


I came across this today when trying to find an easier way to present a six-part form in a Rails project - a tabbed interface system built upon Prototype (an integral part of Rails). Called Control.Tabs it makes tabbed interfaces a synch to do: simply add an unordered list containing links to the blocks containing your to-be-tabbed content, and add a line of JavaScript to start the ball rolling - that's it! Some of the examples given on the site take it even further, including building an image gallery, and I've used it to build a series of form pages into one page complete with back/forwards buttons, all without refreshing the page. Good stuff, and well worth the time for any Rails developer to try using.

Awesome form validation script


I use the Javascript libraries Prototype and Script.aculo.us a good deal in my projects, but there was one feature they didn't have between them - form validation. A quick google uncovered a super-simple solution to this problem written by an Australian - all you need to start is one Javascript file and one line of Javascript, then add one single DOM-compatible attribute to your input lines and it'll work right out of the box. The even better part is that extending and enhancing it is very easy, just add a CSS line or two to customize your error messages, etc, easy as pie.

Catfish fun with script.aculo.us


Script.aculo.us is a wonderful library of Javascript functions for doing lots of buzzword-friendly snazzy effects. A recent schmancy JS trick is the catfish - a small, unintrusive advertisement that pops up at the bottom of the web page and can be closed without affecting the web page. Looking around I didn't see any existing code to do catfish effects with Script.aculo.us so I decided I'd have to fill the gap.

There are four parts to a catfish - the Javascript libraries (Script.aculo.us, which relies upon Prototype), a little bit of HTML structure on your page, some CSS and a single Javascript line. So lets get to it.

To do any of this fancy stuff you need both the Prototype and Script.aculo.us libraries on your site and then load them into the page as follows:

<script src="js/prototype/prototype.js" type="text/javascript"></script>
<script src="js/script.aculo.us/effects.js" type="text/javascript"></script>

Don't forget to change the paths to whatever is correct for your site.

The HTML below needs to be one of the last segments within your HTML, basically it needs to be the last code before the close-BODY tag, so that nothing else throws it off. There's also a link to hide the catfish, you don't want to upset your visitors!

<div id="footer_ad" style="display:none"> <div id="footer_close">[x] <a href="#" onclick="Effect.BlindUp('footer_ad', {duration:1})">close this</a></div>
Catfish is tasty!

You can put whatever fillings you like in there - nested divs, etc, basically eat your heart out.

The CSS part is pretty straight forward, basically we're setting the div to be locked to the bottom of the web browser window so it slides over the other content - this is a general trick that works great for e.g. shopping cart totals, menus, etc. I used some fairly ugly colors just to make it stand out during testing :-) And for those who don't know, this should either go in your page's CSS file or within a STYLE tag in your page's HEADer.

#footer_ad {
position: fixed;
bottom: 0px;
display: block;
width: 100%;
background-color: #b7948f;
color: #394a8c;
font-size: 24px;
padding: 10px 0 10px 0;
margin: 0;
left: 0;
border-top: 1px solid #9a5261;
#footer_close {
float: right;
width; 50px;
display: block;
font-size: 0.6em;
padding: 5px;
text-align: right;
font-size: 0.8em;

Last but not least is the Javascript code to make the screen pop up. The best location for this is your body tag's onload attribute, but you could embed it in the page if needed (within a SCRIPT block):

new Effect.BlindDown('footer_ad', {duration:2});

Put that altogether and you too can have some tasty catfish for your site.

There's one last thing, the way the above code works the catfish will keep popping up every time the page is loaded, its left up to an exercise for you on how you'd like to make the close link make the browser remember to hide it. One idea would be to have the onclick event execute a function on the server side to set a session variable that would indicate the visitor no longer wished to see the catfish, then in the presentation code only display the catfish if the visitor doesn't have this variable set; alternatively some Javascript could set a cookie, but I prefer to consolidate all client data in viewer sessions, so there's only one source for all of the relevant data.

Bon appetitè!

Ruby on Rails 1.1 is out


Just a quick mention that Ruby on Rails version 1.1 has just been released, adding some really awesome new features that will continue to make life even easier for web developers everywhere, yes, including even you. Some of the niceties include Javascript templates, to make your AJAX more swishy, JOINs and other fancy things have been added to ActiveRecord, and integration testing to help make your sites more solid - solid as a rock, you might say. Go forth and update, young padawan.

MSFT looses brain learning AJAX


While developing their competition for Google Maps, MSFT seem to have forgotten how to develop good applications and gone back to the philosophies they used to develop Bob. I present, to you, one of the worst pieces of crud ever:

While it is true that this maps application is still under development, there's almost no way they could turn this into something usable without throwing out probably two-thirds of its functionality, which I doubt they'll do. Yet another example of why MSFT drastically needs to learn the concepts of KISS, as others have to great effect: Google Maps and GMail, 37 Signals's Basecamp, Campfire, Backpack, TaDa List and Writeboard, Carson System's DropSend, etc, etc, etc.



Subscribe to AJAX