How to create an AJAX homepage - step-by-step

[WordpressConsultant]

AJAX Desktop Tutorial - Overview

The purpose of this tutorial is to explain, step-by-step, how to create an AJAX desktop/homepage.

The homepage we will create will have most of the capabilities of established homepages like Netvibes, PageFlakes, etc.

Here's what our AJAX Desktop will look like when we are done

Our goal is to get up and running quickly so we will not delve deep into each subject. At the end of the tutorial I've included a resource section for further reading.

If you have any questions or comments, you are welcome to post comments at the end of each tutorial page

The tutorial will cover:

* How to detect IE/Firefox correctly
* What is the DOM and how to manipulate it using Javascript
* How to dynamically create widgets using the DOM (+ using CSS with Javascript)
* How to capture and react to mouse events
* How to drag widgets
* How to manipulate zIndex (the depth/order of widgets on the screen)
* Background about AJAX and JSON
* How to load RSS feeds into widgets
* How to create search widgets

Pre-requisites for this tutorial: I assume you know HTML, some Javascript and basic CSS.

Part 1 - Detecting the user's browser
[Note: the homepage officially supports Internet Explorer and Firefox only. I've tested it with Safari and Avant and it works as well. Later we'll add support for Opera]

In order to detect the type of browser the user is using, we are going to use a method called object detection.
It sounds scary but it's very simple: different browsers have support for different Javascript objects. So all we have to do is try to access these objects and we'll know which browser we're dealing with.

Here is the Javascript code:

var firefox = document.getElementById && !document.all;

That's all it takes!

Both Firefox and IE support the getElementById function (more about it in part 2), so we also have to make sure that document.all is null (as it's an IE only object) to be sure that the user is using Firefox.
So simply put, if firefox is false the user is using IE (or some other browser, but we only care about IE and Firefox at the moment), otherwise the user is using Firefox.

Part 2 - What is the DOM and how to manipulate it using Javascript
Sample HTML code:

This is a < b>sample of HTML< /b> < br> to demonstrate the DOM < /div>
(No space in between <> code)
Here is the corresponding DOM structure:


In our example, the DIV tag is the root element, as it contains all other tags and text. The DIV element has two objects associated with it, attributes which references all attributes of a tag (element) and childNodes which references everything else (tags and text contained).
It's important to understand that text is considered an element as well - any text that is not contained within a child element, is considered an element (for example, "this is a" is an element).

So how can we access the DOM using Javascript? both IE and Firefox support the getElementById DOM function:

var elm=document.getElementById("sample"); //get a reference to the DIV element

The getElementById function locates an element using it's id attribute (in our case, the DIV element's id was "sample"). Make sure you have an id attribute in elements you are interested in accessing via Javascript.

Now let's access the DOM:

alert(elm.attributes.id.value); //will alert "sample"
alert(elm.childNodes[0].nodeType); //will alert 3 - TEXT NODE
alert(elm.childNodes[0].nodeValue); //will alert "this is a"
alert(elm.childNodes[1].nodeType); //will alert 1 - ELEMENT NODE
alert(elm.childNodes[1].nodeValue); //will alert null - element nodes don't have a value
alert(elm.childNodes[1].childNodes[0].nodeValue); //will alert "sample of HTML"
elm.childNodes[0].nodeValue="What a "; //changes the content of the TEXT element to "What a "


We can also access the content of an element as text:

var elm=document.getElementById("sample");
alert(elm.innerHTML); //will alert "This is a sample of HTML
to demonstrate the DOM"
elm.innerHTML+="
let's move on";

innerHTML gives us direct text-level access to everything contained in an element. We can replace or append content and the DOM will be rebuilt on the fly. Here's what the DOM looks like after the above code has been executed:



For more info, read the full post courtesy from musestorm

---

Last edited by WordpressConsultant : 05-09-06 at 01:57 PM.

[Robotys]

urgh... its hard to my brain .. i`m feeling dizzy ...

hehehe, i`m enough with simple wordpress page.