Adding a dynamic iChat status icon

There are numerous examples on the web how to show your iChat status on your webpage. What i did not find in those examples is how to refresh the iChat status dynamically, not only when the webpage was (re-)loaded. Using a small javascript you can easily make your iChat status dynamic so that shows your iChat status almost realtime.

In this example the iChat status is displayed in the sidebar, but if you want you can place in anywhere on your site. First you have to cut-and-paste the code below into the sidebar. To do this, open the Page Inspector and select the Sidebar tab. Paste the code here and replace the markers [[yourscreenname]] and [[yourdomain]] with your AOL screenname and the domain name of your website. e.g. "p3t3rvann3s" and "www.petervannes.nl". Finally, select all code you added to your sidebar and select Ignore Formatting and Clear Formatting in the Format menu.

<!-- iChat Notification -->
<div>
<a href="aim:goim?screenname=[[yourscreenname]]">
<img id="ichatstatus" src="http://big.oscar.aol.com/[[yourscreenname]]?
on_url=http://[[yourdomain]]/assets/iChatOnline.jpg&off_url=http://[[yourdomain]]/assets/
iChatOffline.jpg" alt="iChat status" width="150" height="55"
border="0"></a>
</div>


In the code example above i used the images iChatOnline.jpg and iChatOffline.jpg to show the iChat status, but your can replace it by your own images. To make the images available in your Rapidweaver page you have to add them as an asset to your page. You can do this by selecting the Header tab in the Page Inspector and selecting the Assets button. Add the files by selecting the Add Files... button and selecting the desired status images. The images i use for my website are available for download, wherefore you can find the link a the bottom of this article.

When you publish or export you page, the page now should display your current iChat status when the page is loaded. To make your iChat status show your real status, your have to add the code displayed below to the header of your page. To add the code, select the Header tab in the Page Inspector and select the Header button half-way in the window. Then cut-and-past the code below, now your iChat status indicator will be dynamically updated without having to reload the page.

<!-- iChat dynamic update -->
<script type="text/javascript">
// set your interval in milliseconds
var reloadInterval = 60000;

// this will run when the document is fully loaded
function init() {
 setTimeout('reload()',reloadInterval);
}

// this reloads the src, and triggers the next reload interval
function reload() {
  // get the object
  var ichats = document.getElementById('ichatstatus');

  // if the object exists
  if (ichats) {
    // store the img src in a temporary variable and
    // determine the start position of the '&uident' variable
    var tmpHTML = ichats.src ;
    uidentpos = tmpHTML.lastIndexOf('&uident=') ;
    // If the variable is found, remove the variable from
    // the url
    if (uidentpos != -1) {
      tmpHTML = tmpHTML.substr(0,uidentpos) ;
    }
    // Add a new uident variable to the url and change it in
    // the object. This forces the img to reload.
    var now = new Date() ;
    var seed = now.getSeconds() ;
    ichats.src = tmpHTML + "&uident=" + Math.random(seed);
  }
  setTimeout('reload()',reloadInterval);
}
// load the init() function when the page is fully loaded
window.onload = init;
</script>

The script updates the SRC attribute of the IMG element with a fixed interval. The interval can be changed by changing the value of the variable reloadInterval. The value is expressed in milliseconds, therefore when using the preset update interval of 60 seconds the value of reloadinterval has to be set to 60000.

All scripts and image-files can be found here; Dynamic IChat files.zip


blog comments powered by Disqus