--- title: Static to Ajax in Minutes description: It's rare that I'm truly impressed by the effects deployed on a website. Well, until now. Nick Van image: https://www.websitemagazine.com/hubfs/Imported_Blog_Media/ajax-mini-2-1-1-1.gif --- [Log In](https://www.websitemagazine.com/_hcms/mem/login) [Subscribe](https://websitemagazine.tradepub.com/free/w_webk05/prgm.cgi) [![Website Magazine Logo](https://www.websitemagazine.com/hs-fs/hubfs/gradient-regular@3x-1.png?width=586&height=145&name=gradient-regular@3x-1.png "Website Magazine Logo")](http://Website%20Services,%20Inc.) - [About](https://www.websitemagazine.com/about) - [FAQs](https://www.websitemagazine.com/about/faq) - [Advertise](https://www.websitemagazine.com/about/advertise) - [Editorial Staff](https://www.websitemagazine.com/about/editorial-publishing-staff) - [Resources](https://websitemagazine.tradepub.com) - [Newsletter](https://www.websitemagazine.com/newsletter-sign-up) - More - [Contact Us](https://www.websitemagazine.com/contact) [Log In](https://www.websitemagazine.com/_hcms/mem/login) [Subscribe](https://websitemagazine.tradepub.com/free/w_webk05/prgm.cgi) Search - [Latest](https://www.websitemagazine.com) - [Design](https://www.websitemagazine.com/web-design) - [Development](https://www.websitemagazine.com/web-development) - [SEO](https://www.websitemagazine.com/seo) - [Ecommerce](https://www.websitemagazine.com/ecommerce) - [Content](https://www.websitemagazine.com/content) - [Marketing](https://www.websitemagazine.com/marketing) - [Advertising](https://www.websitemagazine.com/advertising) - [Email](https://www.websitemagazine.com/email) - [Infographics](https://www.websitemagazine.com/infographics) - [View All Topics](https://www.websitemagazine.com/channels) # Static to Ajax in Minutes ![Pete Prestipino](https://www.websitemagazine.com/hubfs/Pete%20Prestipino.jpeg) [by Pete Prestipino](https://www.websitemagazine.com/marketing/author/pete-prestipino) 03 Dec, 2008 - - - [mailto:?Body=https://www.websitemagazine.com/marketing/static-to-ajax-in-minutes](mailto:?Body=https://www.websitemagazine.com/marketing/static-to-ajax-in-minutes) - Link Copied! ![Static to Ajax in Minutes](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/ajax-mini-2-1-1-1.gif) *It's rare that I'm truly impressed by the "effects" deployed on a website. Well, until now. Nick Van der Vreken created a javascript class that automatically converts a static website into a full-blown ajaxed website. Sounds pretty darn cool, huh? It most definitely is. Nick walks Website Magazine readers through the basic implementation, the customizable animations, and the broader functionalities.* The com.bydust.ajax class is simply a javascript class that automatically converts your static website into a full-blown ajaxed website. Whenever a user visits your website, the class will perform a browser-check. If your visitor's browser is capable of running the needed javascript, it will convert the website automatically. If not, the script deactivates itself and the visitor browses through your website as it is (without ajax request etc.). The script and how-to van be viewed and [**downloaded here**](https://www.bydust.com/examples/com.bydust.ajax/). **Basic implementation** The implementation of the javascript class is really easy. You just need to add a few lines of code into your pages. These will load and launch the script, and mark the areas you want to refresh on each page. Look at the implementation page on the manual for more information. **Customizable animations** Yes, animations. It's only eye-candy, but it improves both the style of your website and the user's impression of your website. There are two types of animations available in the script. We have the tweens that smoothly fit content into your page, and the alpha transitions which display content with a nice fade in. As if that isn't enough, these animations are customizable! There are 13 types of tweens available, from normal *easeIn* or *easeOut* tweens to elastic and bouncy. There's also an option to disable the tweens and alpha transitions. This might be good for large pages, since they demand some CPU usage from the visitor's computer. You can add more eye-candy in the customizable loading-messages, for example, a nice loading image in gif-format or even little flash-movies. By adding CSS-styles in the loading-messages this can be very easy. **Functionalities** It's a bit more than your average, "Hey-I-can-do-ajax" script. With this script you can add event listeners, set up custom rules and custom animations, manage the filetypes handled by the script, and so on. Attaching event listeners to certain events launched by the script allows you to execute certain pieces of code whenever an event happens, for example, on errors or page loads. Attaching an event listener is very easy. You can attach an event with one line of code. Just like in actionscript, we can use the "addEventListener" function with the same two parameters, the event and the function to execute. Custom rules allow us to tell the script to discard certain links or forms, or even to only notify the server when a user has clicked a certain link or posted a form. These rules can come in handy when you don't want certain links to be parsed in ajax, for example, feeds or trackbacks. When it's implemented in a Wordpress theme, you'll need to add these rules for the wp-admin folder, feed and trackback links. Error handling is often overlooked, but not here. The class is able to discover whenever an error occurred and will fix it, when possible. If it notices that there is no way to fix the error, for example, if one of the requested pages doesn't have the information it needs, it will shut itself down and serve the page as a normal browser request, without any ajax. The ajax-class will then load again when the new page is fully loaded. If the script is able to fix the error, an error-event containing all information will be raised and an appropriate message will be shown. These messages are also customizable. Webpages often contain images. That's why I've built in some image preloading functions. When the ajax-class receives the new page from the server, it starts looking for images in the content areas that need to be refreshed. As long as it's preloading, a (customizable) message will be shown to the user. When the images are fully loaded or the maximum load time has been reached, the script will display the page. And, as you can guess, the maximum load time can also be specified by the user. ![Pete Prestipino](https://www.websitemagazine.com/hubfs/Pete%20Prestipino.jpeg) [Pete Prestipino](https://www.websitemagazine.com/marketing/author/pete-prestipino) Digital marketing executive with proven experience in all aspects of search engine optimization (SEO), performance-based advertising, consumer-generated/social media, email marketing, lead generation, Web design, usability, and analytics. - 20-year Internet marketing veteran, currently serving as the Digital Marketing Campaign Manager at Antenna Group (formerly Chicago Digital). - Former Editor-In-Chief of Website Magazine, and a regular speaker on Web technology digital marketing strategy - Author of several books on digital marketing Including Web 360: The Fundamentals of Web Success; Affiliate 360: The Fundamentals of Performance Marketing; Domains 360: The Fundamentals of Buying & Selling Domain Names, and SEO 360: The Fundamentals of Search Engine Optimization. - - - [mailto:peter@websitemagazine.com](mailto:peter@websitemagazine.com) #### Popular Post ### [31 Back-to-School Keyword Targets ![31 Back-to-School Keyword Targets](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/schoolbus-1-1-1-1.jpg)](https://www.websitemagazine.com/marketing/31-back-to-school-keyword-targets) ### [GoDaddy Goes .XXX ![GoDaddy Goes .XXX](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/gradient-regular-logo-mark-Jan-23-2023-12-15-39-1451-AM-Apr-10-2023-01-36-09-0977-PM-3-1.png)](https://www.websitemagazine.com/marketing/godaddy-goes-xxx) ### [23 Cool Tech Facts ![23 Cool Tech Facts](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/fact_100x100-2-1-1-1.png)](https://www.websitemagazine.com/marketing/23-cool-tech-facts) #### Subscribe to Our Newsletter! [![](https://a.impactradius-go.com/display-ad/13053-1438301)](https://semrush.sjv.io/c/3976891/1438301/13053)![](https://imp.pxf.io/i/3976891/1438301/13053) #### Latest in Marketing [![3 Tips to Make Your Website More User-Friendly in 2023](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/pexels-photo-2284350-1-1.jpg) 3 Tips to Make Your Website More User-Friendly in 2023](https://www.websitemagazine.com/marketing/3-tips-to-make-your-website-more-user-friendly) [![Web.com Launches New Professional QuickStart Website Service](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/pexels-photo-4348404-1.jpg) Web.com Launches New Professional QuickStart Website Service](https://www.websitemagazine.com/marketing/web-com-launches-new-professional-quickstart-website-service) [![6 Ways to Stretch Your Marketing Budget](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/gradient-regular-logo-mark-Feb-07-2023-03-32-33-0828-PM-Apr-25-2023-03-10-37-2214-AM-1.png) 6 Ways to Stretch Your Marketing Budget](https://www.websitemagazine.com/marketing/6-ways-to-stretch-your-marketing-budget) [![5 Reasons Visitors Leave Your Website and Website Tracking Tools to Track Website Visitors](https://www.websitemagazine.com/hubfs/pexels-photo-1008155.jpg) 5 Reasons Visitors Leave Your Website and Website Tracking Tools to Track Website Visitors](https://www.websitemagazine.com/marketing/5-reasons-visitors-leave-your-website) [![5 Lessons About Workplace Energy](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/distress-1-1-1-1.png) 5 Lessons About Workplace Energy](https://www.websitemagazine.com/marketing/5-lessons-about-workplace-energy) [![Y Combinator Startups to #WebTechWatch](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/startup-funding-4-1-1-1.jpg) Y Combinator Startups to #WebTechWatch](https://www.websitemagazine.com/marketing/y-combinator-startups-to-webtechwatch) [![gradient-regular@3x](https://www.websitemagazine.com/hs-fs/hubfs/gradient-regular@3x.png?width=128&height=128&name=gradient-regular@3x.png)](https://www.websitemagazine.com/) 999 E Touhy Ave, Des Plaines, IL 60018   [info@websitemagazine.com](mailto:info@websitemagazine.com) [(888) 7WEBMAG](tel:18887932624) [(312) 313-6576](tel:13123136576) About - [Advertise](https://www.websitemagazine.com/about/advertise) - [Editorial](https://www.websitemagazine.com/about/editorial-publishing-staff) - [Contact Us](https://www.websitemagazine.com/contact) Resources Membership - Login - Subscribe Signup for our newsletter © 2026 Website Magazine. All Rights Reserved - [Privacy Policy](https://www.websitemagazine.com/about/privacy) ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Pete Prestipino", "url" : "https://www.websitemagazine.com/marketing/author/pete-prestipino" }, "dateModified" : "2023-05-01T21:21:54.061Z", "datePublished" : "2008-12-03T06:00:00.000Z", "headline" : "Static to Ajax in Minutes", "image" : [ "https://www.websitemagazine.com/hubfs/Imported_Blog_Media/ajax-mini-2-1-1-1.gif" ], "mainEntityOfPage" : { "@id" : "https://www.websitemagazine.com/marketing/static-to-ajax-in-minutes", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://www.websitemagazine.com/hubfs/gradient-regular@3x-1.png" }, "name" : "Website Services, Inc." } } ``` ```json { "@context" : "https://schema.org", "@type" : "NewsArticle", "author" : [ { "@type" : "Person", "name" : "Pete Prestipino" } ], "headline" : "Static to Ajax in Minutes", "publisher" : { "name" : "Website Magazine", "url" : "https://www.websitemagazine.com/" } } ```