[babel, html, howto] Saving vertical space in exported HTML or result thumbnails & excerpts

["Mikhail Titov" <mlt@gmx.us>]

[-- Attachment #1: Type: text/plain, Size: 1483 bytes --]

Hello!

I decided to share a recipe and I think the mailing list is a good place for that.

The waste of vertical space “really grinds my gears”. I mean whenever I want a high-def image from babel or tons of detailed text on output from some code blocks, I get it there making it hard to navigate over the rest of the document. I saw [1] uses lightbox [2] but uses MACRO for that. This is not quite usable for babel output which inserts just plain images. I did not feel like hacking exporter. So I dived into jquery and lightbox manual and came up with some JS code and CSS that I think make final output look awesome if many high-resolution images are present. To save on space occupied by long code block text results, I reused [3] with some changes (probably because of jquery changes…. I don’t know that stuff).

Include something like the following in the header of your org doc. Look into my.js (renamed to txt to pass MUA/MTA) for details.

#+STYLE: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
#+STYLE: <script src="js/lightbox.js"></script>
#+STYLE: <script src="js/my.js"></script>

Make sure you do use #+Caption: before your figures to make a title for lightbox otherwise you won’t get <div class=”figure”> and things will break.

[1] http://orgmode.org/worg/color-themes-screenshot.html
[2] http://lokeshdhakar.com/projects/lightbox2/
[3] http://be.twixt.us/jquery/codeExpander.php

Mikhail


[-- Attachment #2: my.js.txt --]
[-- Type: text/plain, Size: 1721 bytes --]

$(document).ready(function(){

    $("div.figure p img").each(function() {
	// if ($(this).css("height") > 300) {
        var src = $(this).attr('src').replace('img_T','img_L');
        var title = $(this).parent().next().text();
        var a = $('<a/>').attr('href', src).attr('rel', 'lightbox[figures]').attr('title', title);
        $(this).wrap(a);
	// }
    });

    // http://be.twixt.us/jquery/codeExpander.php
    $("pre.example").each(function() { // find specific elements
	if ($(this).height() > 300) { // filter on CSS height > 100
	    var _startHeight = parseInt($(this).css("height")); // store current height
	    $(this).css("height", "300px")  // set height to 100px
		.wrap("<div>") // add a div to group new elements
  		.parent() // Select previously added div
 	    // add new child for clickable area
  		.append("<div class=\"ceexpand\">Expand</div>")
  		.find("div.ceexpand") // select new child
  		.hover( // add a hover class
  		    function() { $(this).toggleClass("cehover") },
  		    function() { $(this).toggleClass("cehover") }
  		)
  		.toggle( // toggle the click action of the div
  		    // Position Closed -> Open It
	  	    function () {
	  		// swap the class and change the HTML
	  		$(this).toggleClass("cecollapse").html("Collapse")
	  		// select the pre and animate it open
	  		    .siblings("pre").animate({height: _startHeight});
	  	    },
  		    // Position Open -> Close It
	  	    function () {
	  		// swap the class and change the html
	  		$(this).toggleClass("cecollapse").html("Expand")
	  		// select the pre and animate it closed
	  		    .siblings("pre").animate({height: 300});
	  	    }
	  	);
	}
    });
});

[-- Attachment #3: my.css --]
[-- Type: text/css, Size: 1427 bytes --]

div.figure p img { max-height: 300px; }
pre.src, pre.example { font-size: 75%; }
/* pre.example { max-height: 50ex; } */

pre.example {
	margin-bottom: 0;
	overflow: auto;
}
div.ceexpand	{
	text-align: center;
	border: 1px solid #666;
	border-top: 0;
	background: #efefef url(img/arrow_down.png) top right no-repeat;
	line-height: 16px;
	width: 200px;
	margin: 0 0 0 auto;
}
div.cecollapse {
	background: #efefef url(img/arrow_up.png) top right no-repeat;
}
div.cehover {
	background-color: #ccc;
	cursor: pointer;
}

  /* TOC inspired by http://jashkenas.github.com/coffee-script */
  #table-of-contents {
    font-size: 10pt;
    position: fixed;
    right: 0em;
    top: 0em;
    background: white;
    -webkit-box-shadow: 0 0 1em #777777;
    -moz-box-shadow: 0 0 1em #777777;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    text-align: right;
    /* ensure doesn't flow off the screen when expanded */
    max-height: 80%;
    overflow: auto; }
    #table-of-contents h2 {
      font-size: 10pt;
      max-width: 9em;
      font-weight: normal;
      padding-left: 0.5em;
      padding-left: 0.5em;
      padding-top: 0.05em;
      padding-bottom: 0.05em; }
    #table-of-contents #text-table-of-contents {
      display: none;
      text-align: left; }
    #table-of-contents:hover #text-table-of-contents {
      display: block;
      padding: 0.5em;
      margin-top: -1.5em; }