* [babel, html, howto] Saving vertical space in exported HTML or result thumbnails & excerpts
@ 2012-06-05 19:50 Mikhail Titov
0 siblings, 0 replies; only message in thread
From: Mikhail Titov @ 2012-06-05 19:50 UTC (permalink / raw)
To: emacs-orgmode
[-- 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; }
^ permalink raw reply [flat|nested] only message in thread
only message in thread, other threads:[~2012-06-05 19:50 UTC | newest]
Thread overview: (only message) (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2012-06-05 19:50 [babel, html, howto] Saving vertical space in exported HTML or result thumbnails & excerpts Mikhail Titov
Code repositories for project(s) associated with this public inbox
https://git.savannah.gnu.org/cgit/emacs/org-mode.git
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox;
as well as URLs for read-only IMAP folder(s) and NNTP newsgroup(s).