From mboxrd@z Thu Jan 1 00:00:00 1970 From: "Mikhail Titov" Subject: [babel, html, howto] Saving vertical space in exported HTML or result thumbnails & excerpts Date: Tue, 5 Jun 2012 14:50:11 -0500 Message-ID: <003501cd4354$6b48cf20$41da6d60$@us> Mime-Version: 1.0 Content-Type: multipart/mixed; boundary="----=_NextPart_000_0036_01CD432A.8272C720" Return-path: Received: from eggs.gnu.org ([208.118.235.92]:49062) by lists.gnu.org with esmtp (Exim 4.71) (envelope-from ) id 1Sbzlf-00031S-PQ for emacs-orgmode@gnu.org; Tue, 05 Jun 2012 15:50:17 -0400 Received: from Debian-exim by eggs.gnu.org with spam-scanned (Exim 4.71) (envelope-from ) id 1Sbzld-0003pQ-IY for emacs-orgmode@gnu.org; Tue, 05 Jun 2012 15:50:15 -0400 Received: from mailout-us.gmx.com ([74.208.5.67]:36279) by eggs.gnu.org with smtp (Exim 4.71) (envelope-from ) id 1Sbzld-0003pB-Be for emacs-orgmode@gnu.org; Tue, 05 Jun 2012 15:50:13 -0400 Content-Language: en-us List-Id: "General discussions about Org-mode." List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , Errors-To: emacs-orgmode-bounces+geo-emacs-orgmode=m.gmane.org@gnu.org Sender: emacs-orgmode-bounces+geo-emacs-orgmode=m.gmane.org@gnu.org To: emacs-orgmode@gnu.org This is a multi-part message in MIME format. ------=_NextPart_000_0036_01CD432A.8272C720 Content-Type: text/plain; charset="utf-8" Content-Transfer-Encoding: quoted-printable Hello! I decided to share a recipe and I think the mailing list is a good place = for that. The waste of vertical space =E2=80=9Creally grinds my gears=E2=80=9D. 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=E2=80=A6. I don=E2=80=99t 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: #+STYLE: Make sure you do use #+Caption: before your figures to make a title for = lightbox otherwise you won=E2=80=99t get
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 ------=_NextPart_000_0036_01CD432A.8272C720 Content-Type: text/plain; name="my.js.txt" Content-Transfer-Encoding: quoted-printable Content-Disposition: attachment; filename="my.js.txt" $(document).ready(function(){ $("div.figure p img").each(function() { // if ($(this).css("height") > 300) { var src =3D $(this).attr('src').replace('img_T','img_L'); var title =3D $(this).parent().next().text(); var a =3D $('').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 =3D parseInt($(this).css("height")); // store = current height $(this).css("height", "300px") // set height to 100px .wrap("
") // add a div to group new elements .parent() // Select previously added div // add new child for clickable area .append("
Expand
") .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}); } ); } }); }); ------=_NextPart_000_0036_01CD432A.8272C720 Content-Type: text/css; name="my.css" Content-Transfer-Encoding: 7bit Content-Disposition: attachment; filename="my.css" 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; } ------=_NextPart_000_0036_01CD432A.8272C720--