View Single Post
Old 08-14-2012, 12:22 PM   #12
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 79,847
Karma: 146918083
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
Quote:
Originally Posted by SBT View Post
I thought it was a strongly recommended practice to make part of the footnote itself a link back to the referring line?

BTW, you don't need javascript to get pop-up footnotes, you can do i t with just CSS:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
div.footnote {
display:inline-block;
border-style:solid;
border-width:1px;
background:yellow;
width: 0.6em;
height:0.6em;
overflow:hidden;
position:fixed;
}

div.footnote:active {width:auto;height:auto;}
div.footnote p{
font-size:0.5em;
margin:0 0.2em;
}
div.footnote p+p{ font-size:0.9em;}
</style>
</head>
<body>
<p>Sic transit gloria mundi.Click on this footnote.<div class="footnote">
     <p>1</p>
     <p>Isn't it fun reading through all the footnotes?</p>
</div>&nbsp;&nbsp;&nbsp;
Pretaerae censeo Cartago esse delendam. Navigare necesse est, vivere non est necesse.</p>
<p>Credo Elvem ipsum etiam vivere.</p>
</body>
</html>
, though this won't work with EPUB2, of course.
It won't work with ePub 3 either as it's invalid code.

Code:
<p>Sic transit gloria mundi.Click on this footnote.<div class="footnote">
     <p>1</p>
     <p>Isn't it fun reading through all the footnotes?</p>
</div>&nbsp;&nbsp;&nbsp;
Pretaerae censeo Cartago esse delendam. Navigare necesse est, vivere non est necesse.</p>
You cannot have a <div> inside a <p> and you have a <p> inside a <p> as well as the <div>. Basically, the code is a mess.
JSWolf is offline   Reply With Quote