University of Melbourne home page
 

Random content loader

To build an unobtrusive javascript that randomly or otherwise loads small chunks of remote content, such as images and captions, into a page, either as one-off insertions or as part of a slide show.

The proposed method

To keep the code as unobtrusive and accessible as possible, it should use standard html code, preferably with some semantic meaning. For example, the area of the page that is subject to change could be identified by a class.

<div class="randomise">
...
</div>

The script would look for these parts of the page and insert the new content as the page is loaded.

The new content could reside in a separate html file, related to the original page by use of the rel attribute.

<div class="randomise" rel="insert-this.html">
...
</div>

Content in the remote file could be organised by divs so that the javascript could identify the chunks to be inserted and the remote file could be constructed using standard web maintenance tools such as dreamweaver.

...<body>
  <div class="chunk">Some content</div>
  <div class="chunk">Some different content</div>
  <div class="chunk">Some more content</div>
</body>...

Potentially, classes in the remote file could convey timing information to the script, so that the displayed div would be replaced by the next one sequentially.

<div class="chunk time-5">Some content that will display for 5 seconds before being replaced by the next div in the remote file.</div>
<div class="chunk">Subsequent items use the same time measure unless it is overridden.</div>

Potentially, classes in the remote file could convey weighting information to the script, so that certain divs would be inserted more often than others

<div class="chunk weight-3">Some content that is three times as likely to appear</div>
<div class="chunk">Some content</div>

Still to do

  • ensure the method works for more than one area of content per page.
  • ensure the method works for content of different sizes
  • in between slides or before loading the content should maintain a layout ‘placeholder’
  • can the original div be fixed in size using CSS? can overflow be managed?
 
templates/2007/javascript/random_content.txt · Last modified: 2007/07/04 11:38 by aharris
 
Recent changes RSS feed Creative Commons License Donate Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki