Warning: eregi() [function.eregi]: REG_EMPTY in /home/keyshiaw/public_html/wp-content/themes/bydust.com_wpv3/header.php on line 14

Nick Van der Vrekens blog & portfolio

AJAXed website - Automatically convert to AJAX website - com.bydust.ajax

October 17th, 2008

AJAX, Browsers, CSS, Javascript, Noteworthy, Projects, Themes, Wordpress

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. ).

You can download the script and view the howto at http://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 area’s you want to refresh on each page. Look at the implementation page on the manual for more information.

Customizable animations

Yes, animations. Its only eye-candy, but it improves the style of your website alot, and the users impression of your website.
There are two types of animations available in the script, we have the tweens who smoothly fit your content into your page, and the alpha transitions which display your content with a nice fade in. As if that isn’t enough yet, 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 visitors computer. Don’t think you’ll need to disable tho :)

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

Its 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 ( but offcourse these never occur :) ) 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 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 occured, 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 down itself 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 offcourse :)

Webpages often contain images, thats 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 its 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.

Since this is a pretty big project I’ve set up a small howto-website with loads of information about the script, and an example for you to download. You’ll find a detailed manual for the basic implementation there, along with the more advanced stuff.

The script is completely free for non-commercial use, but I’d like you to leave the credits in the classfiles and maybe a small link back to this page - if its not too much trouble. I’ll link back to your website if you’re using the script, so others have some more working examples. Contact me for commercial use :)

Com.bydust.ajax has been featured on several websites and communities:

Subscribe for updates

Leave us your name and email adress and we'll inform you when someone posts a new comment. unsubscribe?




There are 76 replies to this item:




XHTML:Please use "<pre>" to insert code: <pre lang="actionscript asp css html4strict javascript php sql xml[pick any of these languages]" line="45[starting line, optional]"> your code here </pre>

Post a reply Post reply Cancel
1 2 3 4 5 6 7 8
  • #76

    June 27th, 2009

    Nick says:

    it’s not necessary. The class should run on any server, it’s executed client-side which means the server doesn’t have anything to do with it.

    If you have a very old browser which does not support javascript you won’t see the ajax effects, but that’s about it :)

  • #75

    June 27th, 2009

    monloup says:

    why is it necessary to have a php enabled server ? i suppose because some server action (parsing?) is being done behind the scene ? why isn’t this released with the project ? any particular reason ?

  • #74

    June 27th, 2009

    Nick says:

    Hi Fernando,

    I took a look at your site and I’m seeing that it keeps showing the message where it’s preloading images. This is because one of the images in your code cannot be loaded, it’s probably not there. You can try to find that particular image or just reduce the maximum loading time.

    window.onload = function(){
var refreshed_content = Array('!content','sidebar');
// the html-object with id "content" is our primary content area,
// and will be animated.
// the html-object with id "sidebar" is our secondary content area
// and will be refreshed without animation. 
 
bda.imageLoadTimeout = 20;
// optional parameter
// this parameter sets the time in seconds to wait for images to load.
// the page will open without the images loaded after this time.
// default 20 
 
... script continues

    if you set the imageLoadTimeout parameter to 5 the maximum preload time for images is 5 seconds. To keep the error message from showing you need to change the code a bit, change the “4000″ on line 742 in file com.bydust.ajax.js to “0″.

    			setTimeout('bda.outputPage()',4000);

    Cheers,

    Nick

  • #73

    June 26th, 2009

    Fernando says:

    Hello Nick, How are you? Sorry for no write you before. I was busy with work, and my work is not in the net (im waiter).

    I was read the red box and Im try and try, but still cannot found my mistake, and the ajax doesnt work correctly in my blog. Can you help me?

    My url is http://fernandorognoni.com

    I will send for mail my ftp user and password, then you can see the files.

    Thank you so much.

    Cheers

  • #72

    June 15th, 2009

    Nick says:

    Hi pingram,

    thanks for letting me know, I wasn’t aware of this.
    I can’t reproduce the bug however, I’m trying on Firefox 3 on a Windows Vista machine. Can you tell me which browser you’re working on ?

    Everything seems to work normally when selecting text in my browser, if the text is in a content area the selection dissapears. If not, it stays selected.

    Cheers,

    Nick

  • #71

    June 15th, 2009

    pingram3541 says:

    Just noticed when static text is selected on your example (http://www.bydust.com/examples/com.bydust.ajax/);like the footer area…and you click on the example links on the left, the content loads, then disappears. Un-selecting the text fixes the problem.

  • #70

    June 2nd, 2009

    Nick says:

    Hi Fernando,

    your CSS seems ok, must be wrongly displayed in the comments here on my blog.
    You might want to check out the red box on http://bydust.com/examples/com.bydust.ajax/implementation.php

    cheers,

    Nick

  • #69

    June 1st, 2009

    Fernando says:

    Hi Nick! Thanks, and sorry for reply so late. Im not sure what do you mean when you says my CSS isn’t within style-tags, this is because my english is very poor still. Sorry for that. You mean I have to modify the file style.css?

    The url of my blog is http://fernandorognoni.com. You can see there what is my problem. I dont know why the ajax is not working.

    Thank you so much!

    Fernando.

  • #68

    May 28th, 2009

    Nick says:

    Hi Fernando,

    The javascript in your header seems fine, although I have no idea what the link ( a-tags ) do there and why your CSS isn’t within style-tags.

    If you can give me a URL where I can see what you’re trying to do or the body of the page you’re working on I can help you.

    cheers,

    Nick

  • #67

    May 27th, 2009

    Fernando says:

    I can write my name in the form now… sorry for a lot of messages :S