Home arrow JavaScript arrow Page 5 - Getting Attention with Interactive Effects

Creating a Flashing Notice concluded - JavaScript

If you're looking for a quick way to delight your visitors with the addition of Ajax to your site, look no further. This article, the fourth of a four-part series, will show you how to do color fades, timers, and more. It is excerpted from chapter four of Adding Ajax, written by Shelley Powers (O'Reilly, 2007; ISBN: 0596529368). Copyright 2007 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.

TABLE OF CONTENTS:
  1. Getting Attention with Interactive Effects
  2. Color Fades for Success or Failure
  3. Ajaxian Timers
  4. Creating a Flashing Notice
  5. Creating a Flashing Notice concluded
By: O'Reilly Media
Rating: starstarstarstarstar / 9
October 11, 2007

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

Example 4-13 displays the content of the JavaScript file, comments.js. Since the data is being updated, the Ajax call is a POST rather than a GET. Once the comment is saved, it's reflected back in the comment list with a yellow fade to highlight that it has been added to the list. This example uses the traditional yellow, beginning with a value of #ffff00 and ending with white, #ffffff. In addition, it uses the Adding Ajax bind technique for managing the timer events.

Example 4-13. Combining comment preview, Ajax send method, and yellow flash

// global
var commentCount = 0;
var xmlhttp;

function yellowColor(val) {
   var r="ff";
   var g="ff";
   var b=val.toString(16);
   var newval = "#"+r+g+b;
   return newval;
}

aaManageEvent(window,"load", function() {
  aaManageEvent(document.getElementById('save'),"click",saveComment);

});

function saveComment(evnt) {

  // cancel event bubbling
  evnt = evnt ? evnt : window.event;
  aaCancelEvent(evnt);

  // create XHR object
  if (!xmlhttp) xmlhttp = aaGetXmlHttpRequest();
  if (!xmlhttp) return;

  // get comment
  var commentText = document.getElementById("comment").value;
  modText = commentText.split(/\n/).join("<br />");
  var param = "comment=" + modText;
  var url = 'addcomment.php?' + param;
  xmlhttp.open('POST', url, true);

  // send comment
  xmlhttp.onreadystatechange = addComment;
  xmlhttp.setRequestHeader('Content-Type',
    'application/x-www-form-urlencoded');
  xmlhttp.send(null);
  return false;
}
// add comment to existing list, with color flash
function addComment() {
 
if(xmlhttp.readyState == 4 && xmlhttp.status==200) {
     var modText=xmlhttp.responseText;
     console.log(modText);
     var newDiv = document.createElement("div");
     commentCount++;
     newDiv.setAttribute("id","div"+commentCount);
     newDiv.setAttribute("class","comment");
     newDiv.innerHTML = modText;

     // add object to page
     document.getElementById("list").appendChild(newDiv);

     // start flash counter
     var ctrObj = new Counter("div"+commentCount,0,255);
     ctrObj.countDown(); 
  
}
}

function Counter(id,start,finish) {
  this.count = this.start = start;
  this.finish = finish;
  this.id = id;
  this.countDown = function() {
   
this.count+=25;
   
if (this.count >= this.finish) {
       document.getElementById(this.id).style.background="transparent";
       this.countDown=null;
       return;
   
}
    document.getElementById(this.id).style.backgroundColor=yellowColor(this.count);
    setTimeout(aaBindEventListener(this,this.countDown),100);
 
}
}
aaManageEvent(window,"load",function() {
     
aaManageEvent(document.getElementById('comment'),"keyup",echoPreview)});

function echoPreview(evnt) {
   var commentText = document.getElementById("comment").value;
   modText = commentText.split(/\n/).join("<br />");
   var previewElem = document.getElementById("preview");
   previewElem.innerHTML = modText;
}

From the top, when a comment is saved, the form submission is canceled because Ajax is being used to make the update. The comment is accessed and only simple processing is made on it before being POSTed through the XMLHttpRequest object. When the Ajax request is successfully processed, a new div element is created to host the comment, which is then appended to the existing list of comments. As the item is appended, the fade is flashed to highlight the addition.

The result of the final example is shown in Figure 4-3. Unfortunately, I'm not skilled enough with an image capture timer to catch the yellow fade, but the example is among those packaged for this book.


Figure 4-3.  Preview, Flash, and Ajax combined

Of course, this is a simplified look at how live comments and live updates can coexist. However, it could be easily integrated into an existing application by calling whatever server-side functionality is used for comments, which should also ensure that the comment text is safe. Then the comment can either be fetched from the function or from the database to be returned for display in the field. To the user, all of this should take a fraction of a second, and the result looks instantaneous. Best of all, no page reload occurs to add distraction. Scripting disabled? No problem, regular comment management is still part of the page.

This application is, in a way, Ajax in a nutshell: a combination of user interaction, Ajax requests, objects, timers, and visual effects. Pat yourself on the back; you're an Ajax programmer now. However, I wouldn't skip the rest of the book.



 
 
>>> More JavaScript Articles          >>> More By O'Reilly Media
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

JAVASCRIPT ARTICLES

- Javascript for Beginners: An Introduction
- Introduction to JavaScript
- Adding Elements to a Tree with TreeView jQue...
- Using the Persist Argument in a TreeView jQu...
- Using Unique and Toggle in a TreeView jQuery...
- Using Event Delegation for Mouseover Events ...
- Using the Animate Option in a Treeview jQuer...
- Using HTML Lists with Event Delegation in Ja...
- Opened and Closed Branches on a TreeView jQu...
- Mouseover Events and Event Delegation in Jav...
- Creating a TreeView JQuery Hierarchical Navi...
- Event Delegation in JavaScript
- A Look at the New YUI Carousel Control
- Working with Draggable Elements and Transpar...
- Displaying Pinned Handles with Resizable Con...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: