Please go to Fame Web Development for freelance jobs or paid support for the projects listed on this website.

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 227 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 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
  • #227

    December 15th, 2011

    Andruten says:

    Hi again!

    I’ve added the bda_ignore class in that links but it’s not working yet :(. I’m quite lost…

    Thanks in advance :).

    The same link! :).
    http://nostalghia.es/#/?page_id=76/

    Bye!

  • #226

    December 14th, 2011

    Andruten says:

    Hi Dust!

    First of all, thanks for creating this awsome script!!

    I’m using your com.bydust.ajax in my band’s site ( http://nostalghia.es/#/?page_id=76/ ) but when i click on the thumbnails of the gallery they are opened in new tabs%u2026

    What am i doing wrong? i tried with bda_ignore but it doesn’t work :(.

    Tested in IE9, FF8 and Chromium 15.

    My plugins are:
    - Facebook Page Photo Gallery (the issued plugin)
    - Google Analytics for WordPress
    - Viper’s Video Quicktags
    - WP BandCamp

    And i’m using Wordpress 3.2.1!

    Thanks in advance!!

    Andruten.

  • #225

    August 25th, 2011

    Ash Brown says:

    Hi, Absolutely fantastic script!
    I am attempting to build a concrete5 theme making use of this script predictably if I implement this the same as normal I will receive a “I can’t parse content from the retrieved data.” error, can anyone help me with this?
    Ash

  • #224

    August 5th, 2011

    Rory says:

    Hi Nick,
    Thanks for the code, although I have hit an early snag. No matter what I do, I get

    “I can’t parse content from the retrieved data.”

    and then it loads the correct page in a new window. its a bit confusing but I don’t really know where the problem is, as I dont have alot of stuff in my , so far just a paragraph.

    i have the page online:
    http://www.georgianwines.ie/about.php
    and would really appreciate any thoughts you might have.
    Thanks again
    r

  • #223

    July 22nd, 2011

    Willem van Heemstra says:

    Hi Nick,

    I have answered my own question (post#222)!!!

    What I did NOT understand from your documentation - but I do now - is that ALSO the pages that you want to load into the content area need to have at least the primary comment field around the information you want to be displayed.

    In addition, if on the page you are loading you leave out the secondary comment field(s) those fields will have disappeared if you had them in the page from which you are calling.

    It is easy not to loose those fields from the calling page by NOT surrounding them by secondary comments, but instead hard-coding their url(s) as follows:

    [opening_bracket]a href=”[path]/the_page_to_be_loaded.html” onclick=”bda.getURL(this.href); return false;”[closing_bracket]Click me![opening_bracket]/a[closing_bracket]

    Thanks for what is a very flexible solution!

    Willem

  • #222

    July 22nd, 2011

    Willem van Heemstra says:

    Hi Nick,

    Thanks for what looks like a wonder full script! However, when I try to use it with my site, it gets the content area and side bar urls ok (creates all the right syntax on the fly), but my content area states ‘External Location could not parse the content correctly’

    I’m stuck now, because the information is there but it looks like I’m missing something to make it work.

    Please advice!

    Thanks, Willem

  • #221

    July 16th, 2011

    testedblassted says:

    Hey, nice site. Thanked

  • #220

    June 30th, 2011

    david says:

    Hi!
    I use this script on my website.
    I’ve a problem when I load a page that contains a Flash Movie like a Youtube Video and only on Internet Explorer.
    i’ve a White Screen all over my site during 1 second before the page loading.

    Do you know why?

    Thanks for your help.

  • #219

    May 17th, 2011

    Toto says:

    ..thanks ;)
    thats cool …

    and i like it ..

  • #218

    April 22nd, 2011

    Mario says:

    Hi Nick, thanks for this great script.
    I’ve managed to do everything with it, except load javascript inside AJAX relaod.

    Like disqus.com comments box, which is a javascript code.
    You say at the bugs page:

    Javascript included in pages that are loaded using AJAX will be discarded. Use the addEventListener-function on the load_complete event to execute javascript onload.

    But how do I exactly do that? I didnt get it. Please help, just that little thing and everything will be perfect with your awesome script.

    thanks in advance.