The short implementation for lazy developers

Since most developers are lazy, I'll put the short implementation first. For the less-lazy people, there's a (much) larger explenation below

  1. Download the 2 classfiles from the download page.
  2. Include these classes in the head-section of each HTML-file of the site you want to convert.
  3. Specify the content area's in the body-section of each HTML-file of the site you want to convert. The id of the HTML-object containing your content and the name mentioned in the comment markings have to be the same.
    Something like this:
    <div id="page">
    <div id="content">
    <!-- begin content -->
    *your primary content*
    <!-- end content -->
    </div>
    <div id="sidebar">
    <!-- begin sidebar -->
    *your secondary content*
    <!-- end sidebar -->
    </div>
    </div>
  4. Copy/paste the javascript below under the included classfiles in the head-section of each HTML-file of the site you want to convert.

    <script type="text/javascript">
    window.onload = function(){
    var refreshed_content = Array('!content','sidebar');
    // you need to mark your primary area with a "!".
    // you can add as many secondary area's as you like, for example
    // var refreshed_content = Array('!content','sidebar', 'navigation', 'another_area');
    bda.start(refreshed_content); // initiate the script
    }
    </script>
  5. All done ! Now, if you didn't understand anything of what I said above, I suggest you read the full implementation manual :)

The implementation for less lazy developers

Ok, the implementation of this script is really easy, it should be done in a few minutes.
To start, we'll need the javascript files which contain the class. You can get these at the download page.

Great, now we can start. The javascript classes needed are stored in two files. The first file, "com.bydust.array.js" contains an extended version of the javascript array class. The second one is the "com.bydust.ajax.js"-file, this contains the actual class we're going to use here.
We need to include these files in the head-section of each page we want to use the ajax-class on. There are several ways to do this, the easiest ones are by using a header file which is included in all pages, or by using a template file.
Watch the code below:

Code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Implementation example</title>
<link href="default.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="js/com.bydust.array.js"></script>
<script type="text/javascript" src="js/com.bydust.ajax.js"></script>
</head>
...
Ok, this is what it can look like. The head-section of your page will probably contain some other tags too, but watch the two script-tags. These are the tags we use to include our source files.
In this example we point the src-attribute to "js/com.bydust.array.js". This means that the javascript files are located in a folder named "js", which is located in the same folder as the current page.

Next, we need to specify which area's are to be refreshed on each page. You can specify one primary content area, and optional secondary content area's.
All pages in your website have to contain these area's, if they don't the script will open these pages in a new window or tab. Your primary content area is the HTML-object which contains your actual page content. Make sure it has an ID. The optional secondary content area's are for example your navigation or sidebar. These are area's that can change on each page, for example a navigation where the active page is marked with a special CSS-class. They need to be in a HTML-object with an ID too.

The script downloads these pages as a series of characters, so we need to mark where each area begins and ends. See the code below:

Code


<div id="page">
<div id="content">
<!-- begin content -->
*your primary content*
<!-- end content -->
</div>
<div id="sidebar">
<!-- begin sidebar -->
*your secondary content*
<!-- end sidebar -->
</div>
</div>
In this example we have the primary content area and one secondary content area. Our primary content area is named "content". It is located in a HTML-object with id "content", and is marked with <!-- begin content --> and <!-- end content --> markings.
The secondary content area is named "sidebar" and is also located in a HTML-object with id "sidebar" and is marked.
If you get an error that the requested page cannot be parsed, the cause often lays here. Beware of the spaces :)

Almost done. Now we have included our javascript classes in the head of our page, and we have marked our content area's in the body of the page.
The only thing left is to tell the script what to do, so it can function correctly. This has to be done in the head-section of the page, below the script-tags we use to include our javascript classes. Again, watch the code below:

Code


<script type="text/javascript" src="js/com.bydust.array.js"></script>
<script type="text/javascript" src="js/com.bydust.ajax.js"></script>
<script type="text/javascript">
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.
// you need to mark your primary area with a "!".
// you can add as many secondary area's as you like, for example
// var refreshed_content = Array('!content','sidebar', 'navigation', 'another_area');
bda.start(refreshed_content); // initiate the script
}
</script>

Thats all, everything should work now !
If you still have troubles, maybe looking at the example from the download page will help. If it still doesn't work, you can reply to my blogpost on bydust.com.

More parameters to specify...

If you're not satisfied with the basic implementation, there are some more parameters that allow you to customize the script. They are explained below.


<script type="text/javascript" src="js/com.bydust.array.js"></script>
<script type="text/javascript" src="js/com.bydust.ajax.js"></script>
<script type="text/javascript">
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.transitionTweenType = Tween.regularEaseInOut;
// optional parameter
// change the default transition type.
// the default transition type is "Tween.regularEaseOut".
// you can select "Tween.None" to disable the tweening.

bda.transitionAlpha = true;
// optional parameter
// this parameter sets if the page should be faded in after parsing or not.
// default true

bda.calculateText = "Please wait, I'm parsing the page you requested.";
// optional parameter
// this parameter sets the text shown when parsing the page content.
// default "Parsing images and other content..."

bda.loadText = "Loading...";
// optional parameter
// this parameter sets the text shown when loading a page.
// default "Loading..."

bda.errorText = "There has been an error.";
// optional parameter
// this parameter sets the text shown when an error occurs.

bda.externalLocation = "I'm sorry, I can't parse content from an external location";
// optional parameter
// this parameter sets the text shown when the user clicked a link to a website without one of the set content area's.

bda.externalLocationClick = "Click here to open the requested page in a new window: [link]";
// optional parameter
// this parameter sets the text shown to open a requested page in a new tab or window.
// use "[link]" to display the link url in that place

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

bda.imagesNotLoadedText = "Some images could not be loaded";
// optional parameter
// this parameter sets the text shown when images cannot be loaded
// text will be shown for 3 seconds before the page will open

bda.start(refreshed_content); // initiate the script
}
</script>