As promised yesterday, today I will give details of the updated javascript code that drives my comment links, all of which depends on the jQuery library.

The original snippet looked like this:

$(document).ready(function() {
  $(“div.flickrcomment”).each(function(){
    var aFlickr = this.id.split(“-“);
    var sPicID = aFlickr[1];
    $(this).load(“http://www.web-den.org.uk/scripts/flickrgrab.php”,
      {photo_id:sPicID},function(){
        $(this).show(2000);
      }
    );
  });
});

The revised version is a little longer but no more complicated:

$(document).ready(function() {

   var sInitial = ‘<img alt=”Comment Link” title=”Click here to add ‘;
   sInitial += ‘a comment” src=”http://www.web-den.org.uk/’;
   sInitial += ‘images/greenloader.gif”/></a>’;
   sInitial += “<p>Checking for existing comments. Want “;
   sInitial += “to add something? Click on the picture to add “;
   sInitial += “a comment and join the conversation about this “;
   sInitial += “posting.</p>nn<p>(Nb. Yahoo! account required)</p>”;

   // First pass expands sections
   $(“div.flickrcomment”).each(function(){
      var aFlickr = this.id.split(“-“);
      var sPicID = aFlickr[1];
      var sPicLink = ‘<a href=”http://www.flickr.com/photos/wulf/’
      sPicLink += sPicID + ‘/”>’ + sInitial
      $(this).empty().append(sPicLink);
   });

   $(“div.flickrcomment”).each(function(){
      var aFlickr = this.id.split(“-“);
      var sPicID = aFlickr[1];
      $(this).load(“http://www.web-den.org.uk/scripts/flickrgrab.php”,
         {photo_id:sPicID},function(){
            $(this).show();
         }
      );
   });
});

The first part of that sets up a string holding a temporary comment, with a generic loading graphic and no indication of how many comments have been made. The second block works through each .flickrcomment block on the page, adding the contents of that string with a link to the selected picture on my Flickr account. The final block operates the same as before, except now the delay in revealing the dynamically generated content (thumbnail image and number of existing comments) has been removed so that the new content is dropped in without adjusting the overall layout of the page.

And then, voila, a little more code but a lot more sophistication.

Technorati Tags:

jquery

flickr

comments

javascript

web design