Wulf's Webden

The Webden on WordPress

Transformed HTML


On Saturday, I showed the original HTML code that I am putting in each blog entry. Today I will show what it is transformed into and tomorrow I plan to share the script that does all the hard work (although these resources are all available on the site already if you know how to look for them).

Once the page has loaded, a jQuery based Javascript transforms the raw HTML into something similar to the following:

<div id=”flickr-33914938-c68baffd6e-22″ class=”flickrcomment” style=”overflow: hidden; display: block; height: 38px; width: 889px; opacity: 0.9999;”>
   <a href=”http://www.flickr.com/photos/wulf/33914938/”><img alt=”Comment Link” title=”Click here to add a comment” src=”http://static.flickr.com/22/33914938_6232fa9c0f_s.jpg” /></a>
   <p>There are 0 comments on this post. Want to add something? Click on the picture to add a comment and join the conversation about this posting.</p>
   <p>(Nb. Flickr or Yahoo! account required)</p>

Three key changes have taken place:

  1. The div tag has had some style information added – this is part of the effect that causes the comments section to smoothly grow when it is updated and is determined by jQuery.
  2. The information that is crammed into the id attribute has been unpacked to display a thumbnail version of the photo I have picked, along with a link back to the Flickr photo page.
  3. Using some AJAX-based techniques, the Flickr server is queried to find out how many other comments have been posted on the associated picture.

The second and third items rely on resources (a picture and information) from a remote site and, if I included them directly in the page when first loaded, it would introduce a delay before the contents of the blog was ready to read. Using Javascript, I can present the contents of the page and then carry on filling in more details.

Want to add something? Please join the conversation about this posting (nb. Flickr or Yahoo! account required).

Technorati Tags:

Leave a Reply

Required fields are marked *.

This site uses Akismet to reduce spam. Learn how your comment data is processed.