Ajax Archives - Webmonkey

twitter [http://twitter.com/webmonkey] facebook RSS Feeds Search for: Webmonkey The Web Developer's Resource Web Dev & Design Ajax Backend Blog Publishing CSS Databases Fonts HTML HTML 5 Frameworks JavaScript Mobile Multimedia Programming Security UI/UX Web Standards Software & Apps Browsers Software Web Apps Platform & APIs APIs Identity Location Social Web Services Reference Color Charts HTML Cheat Sheets Special Characters Glossary Templates Code Snippets Archive for the ‘Ajax’ Category File Under: Ajax , UI/UX Jul 21 2010 Beautify Broken Links With Catch404 By Michael Calore The 404 error is one of the bitter realities of the web. “The page you’ve requested does not exist.” So cold and unforgiving. Unlike a bad database connection or an unresponsive server, the 404 Page Not Found error has a finality to it — this link is dead and it’s never coming back. But now we have Catch404 by Addy Osmani, a jQuery plug in that handles broken links with style. Deploy Catch404 on your site, and instead of seeing a page reporting a broken link, the user is presented with an Ajax modal window (also called a hop-up, or a lightbox) informing them the linked page isn’t there. The windows also offers some alternate destinations they might want to check out. We’ve been trying to make 404s go down a little easier for years now. The custom 404 page is a popular solution. It’s available on just about every web CMS out there. You can do it yourself , too. Browsers are also taking it upon themselves to beautify the broken link with custom pages , offering suggestions or inviting users to search for the page using a built-in search box. Catch404 takes both of those ideas — the custom alert and the suggestions of what to do next — and places them into the user experience before the link is even loaded. The plugin, which requires the jQuery framework , sends the link off to Yahoo’s YQL engine to check to make sure it’s alive. It only performs this check for external URLs; local URLs don’t require the check. The check is performed behind the scenes, using an Ajax request. If all is good, the user goes about his or her way. If the check results in a 404, the user sees the modal window. Here’s a demo . You’ll notice one obvious downside, which is that your users will have to wait an extra half-second or so while the YQL call completes. So why use it? When a user is browsing your site and clicks on a link you’ve provided, then sees a 404 error, it’s your problem whether you’re responsible or not. Linking to dead pages makes you look like a sloppy curator, and the user will place some, if not all, of the blame for that error on you. Catch404 is more helpful than an impersonal error. If the speed hit from the cross-site link checking bothers you, consider adding Catch404 only to legacy content — those years-old pages filled with links that may or may not still be alive. Activating Catch404 is simply a matter of assigning a class to the link, so you can invoke it only where it makes sense. [via Delicious ] See Also: Get Started With JQuery JQuery Celebrates 4 Years on the Web With New Release The Solar System, Rendered in CSS and HTML Tags: 404 , Ajax , Catch404 , jQuery Post Comment | Comments (2) | Permalink Share on Facebook shares Reddit Digg Stumble Upon Email File Under: Ajax , JavaScript , Web Apps Jun 3 2010 Beautiful Websites: Slippy for Presentations By Michael Calore Jordi Boggiano has created Slippy , a lightweight library for building animated, browser-based slideshow presentations. Slippy is very simple — check out a short demo and view the source code. Grab the code from github . It’s written in HTML and it uses JQuery for the interactions (touch the space bar, use the arrow keys, or click the mouse to go to the next slide). It also uses Syntax Highlighter , a bit of JavaScript that pretties up snippets of code — we use Syntax Highlighter for tutorials here on Webmonkey — so it’s especially useful for presentations where you’re showing code examples. Jordi points out that Slippy can run your scripts in pretty alert() boxes (rather than the standard, boring browser alerts) to show your examples in action. Composing a presentation is simple. Just hack a basic HTML file. Each slide is in its own