Posted on 31 October 2007, 22:26 by ygleyzer
Location: @home

Code piece toggle and source download

By Nir Tzachar request, added 2 new useful features for CODE tag.

  1. Expand/collapse toggle button for long code pieces (height ≥ 250px).
  2. Download highlighted source code as text file. Enabled on <code lang="..."> tags and supports custom filename via filename="..." attribute.

Features implemented using jQuery library.

An example (actual JS code, look at right upper corner):
  1. $(document).ready(function(){
  2.   $('div.code').each(function(){
  3.     var extra = '';
  4.     var fname = $(this).attr('filename');
  5.     if(!fname) fname = 'code.txt';
  6.  
  7.     if(fname)
  8.       extra += '<a onclick="get_code_source(this.parentNode.parentNode)">'+
  9.                '<img src="images/download.gif" alt="download" title="download '+fname+'"/></a>';
  10.  
  11.     if($(this).children('.hl-main').height() > 200)
  12.         extra += '<a onclick="toggle_code(this.parentNode.parentNode)">'+
  13.                  '<img align="top" src="images/toggle.gif" alt="toggle" title="toggle"/></a>';
  14.  
  15.     if(extra)
  16.       $(this).prepend('<div class="small float-right no-print">'+extra+'</div>');
  17.     });
  18. });



Login in order to comment