Monday, March 6th, 2006

Effect.Reappear: Adding News Updater Portlet to Ajaxian.com

Category: Articles, Editorial, Prototype, UI

We wish we had more time to put Ajax features on to Ajaxian.com itself. We will get there!

We did recently add a simple bit of Ajax, and a few people emailed us asking about it.

The feature is the rotating set of sponsors that we have on the rightbar. This portlet uses Script.aculo.us effects that it applies to content that Ajax gets every 20 seconds.

We have seen a ton of Java and Flash based versions of these effects (e.g. The Telegraph has a Java one), but why deploy an applet when you can just do some simple Ajax? :)

The power of this example is its simplicity. With the frameworks that we have, we can stand on their shoulders and get a lot of done in minutes.

How we implemented the Periodic News Updates

Step One: Simple HTML

We went with the simple approach of asking the backend for HTML that we could dump into the correct area on the screen.

This means that we needed to create an HTML area for us to put this information, and we did this via:

  1. <div class="section" id="sponsor" style="position: relative;">
  2. <h3>Sponsors</h3>
  3. <div id="updatesponsor">
  4. <p>
  5. Loading...
  6. </p>
  7. </div>
  8. </div>

Step Two: Simple JavaScript

We needed to wire up our world with some simple JavaScript. We use the Ajax.PeriodicalUpdater() of Prototype to kick of the timed approach (with a frequency of 20), and when the content comes back we show the user that the content has been updated by nice fading.

onSuccess() gets kicked off after the content has come back and been placed into the div which isn’t perfect. If we did an Effect.Appear() at this time nothing would happen. The content would instantly change and appear wouldn’t be needed.

What we really wanted was an Effect.Reappear() to say “hey, fade this content in again to let our users know”. Although this didn’t exist, it was trivial to fake it out:

javascript

  1. Element.setOpacity('updatesponsor', 0.0);  
  2. Effect.Appear('updatesponsor', { duration: 2.0 });

Here is the full JavaScript:

javascript

  1. <script type="text/javascript">
  2.   new Ajax.PeriodicalUpdater($('updatesponsor'),
  3.     "/wp-sponsors-portlet.php", {
  4.         frequency: 20,
  5.         onSuccess: function() {
  6.             Element.setOpacity('updatesponsor', 0.0);  
  7.             Effect.Appear('updatesponsor', { duration: 2.0 });
  8.         }
  9.     }
  10.   );
  11. </script>

How simple is that?

Step Three: Server Side

On the server side we needed to pass back content, in our case random. We are in WordPress world, so we use a simple plugin function to do the work:

  1. function ajaxian_include_random_file($dir) {
  2.     $files = ajaxian_get_dir($dir);
  3.     $file = $files[array_rand($files)];
  4.  
  5.     include $dir . $file;
  6. }

Posted by Dion Almaer at 10:18 am
8 Comments

+++--
3.9 rating from 63 votes

8 Comments »

Comments feed TrackBack URI

This really shows the ease of implementation of some of these frameworks. I have been amazed at how easy it is to utilize the Script.aculo.us library.

Comment by Brian — March 6, 2006

Why not fade out, too?

new Ajax.PeriodicalUpdater($('updatesponsor'),
"/wp-sponsors-portlet.php", {
frequency: 20,
onSuccess: function() {
Effect.Appear('updatesponsor', { duration: 2.0 });
setTimeout("Effect.Fade('updatesponsor', { duration: 2.0 });", 18000);
}
}
);

Obviously, if you changed the frequency of the updater, you would have to adjust the timeout accordingly. Timeout = Frequency – FadeDuration.

Comment by Bradley — March 6, 2006

Methinks the Ajaxians need to update the CSS to style the code blocks in comments, for better readability and differentation from normal text. :)

Comment by Bradley — March 6, 2006

The effect is pretty nice, but some of the text you load in is longer than the 50px you’ve given it and it will just keep going past the box. Perhaps the CSS should be updated here as well. :)

Comment by Steve Nolte — March 6, 2006

Very nice example. Thank you!
Nice addition, Brian. Makes for an even better effect…

Comment by Pascal — March 7, 2006

Wow, people call me Brian, Brett, and even Brat sometimes in real life, but I’ve never encountered this situation on the Internets(tm).

But thanks, Pascal. :)

Comment by Bradley — March 7, 2006

there’s one catch though… this is not a rotating updater since it includes random files. As far as I know it is impossible to use this Prototype function to include a counter as a variable to the url.

Comment by Dax — March 14, 2006

Here’s one I came up with. There is no transition effect however I am sure someone could adapt this. There are two additional php scripts I used so the content is NOT random and avoids the chance that the same content could be displayed one after the other. One php script returns the total number of testimonials in the DB and provides it to a global javascript variable, The other increments and index and passes the index to a php script which pulls that row from the db. When it reaches the max it resets to zero. The first ajax updater outside the loop is intended to fill the div with content until the periodical updater gets it’s first set of data.

var total_testimonials;
var counter_testimonials;

function OrderedCycleTestimonials()
{

var handleResponse = function(t) { total_testimonials = t.responseText; }
var Requestor = new Ajax.Request(‘../testimonials/count.php’, {method:’post’,onSuccess:handleResponse});

counter_testimonials = 0;
var myAjax = new Ajax.Updater(‘content_testimonials’,’../testimonials/content.php?index=’ + counter_testimonials,{method: ‘post’,asynchronous: true,evalScripts: true});

new PeriodicalExecuter(function getTestimonialsContent(x) {if (counter_testimonials == total_testimonials) { counter_testimonials = 0; } else { counter_testimonials = counter_testimonials + 1; }
var myAjax = new Ajax.Updater(‘content_testimonials’,’../testimonials/content.php?index=’ + counter_testimonials,{method: ‘post’,asynchronous: true,evalScripts: true})}, 10)
}

Comment by Rob CLuett — July 21, 2006

Leave a comment

You must be logged in to post a comment.