Pop-up endnotes

crutledge · 06-15-2014, 02:49 PM

Is there someplace that shows the coding for pop-up endnotes?
Thanks

odedta · 06-16-2014, 05:29 AM

You mean on the iPad? I don't think so anyhow, you can use CSS to style them as you like but they cannot be 100% styled the way you like, Apple put some limitations on the color and size on the footnotes

crutledge · 06-16-2014, 06:39 AM

I have a copy of "Killing Jesus" by Bill O'Reily on my Paperwhite. Kindle all the way.

Endnotes (or whatever) appear in a smaller window centered over the book display. This window is scrollable and has full windows control.

This seems an ideal way to display endnotes without changing the basic display.

I just haven't figured how it was done.

mrmikel · 06-16-2014, 06:42 AM

I think it is done with JavaScript, but precisely how I don't know.

DiapDealer · 06-16-2014, 07:09 AM

Popup footnotes on the Paperwhite usually "just work" as long as you code your foot|end notes in a standard--very basic way in your source epub. Of course they're only going to work with the newer KF8 format, and you will probably have to use kindlegen/previewer to build the kindlebook. I could be wrong about the kindlegen/previewer part, though, as I believe the pop-up note (non-epub3 "aside" variety) is more of a heuristic feature/function of the Paperwhite device than anything.

Doitsu · 06-16-2014, 08:04 AM

Quote:

Originally Posted by odedta

You mean on the iPad? I don't think so anyhow, you can use CSS to style them as you like but they cannot be 100% styled the way you like, Apple put some limitations on the color and size on the footnotes

AFAIK, iPads partially support ePub3 and popup footnotes using epub:type="footnote". For more information see the Liz Castro's blog.

Kindle Paperwhites heuristically detect footnotes. For more information see this thread.

odedta · 06-16-2014, 08:59 AM

If anyone is interested in the Javascript that's supposed to create the pop-up aside, I started working on the desing and the Javascript to make it work though I didn't finish because I thought it will work only for the iPad which already has that functionality, now that I see it can work on Kindle as well i'll post the HTML with all the data. The JS is incomplete.

Code:

<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>URI test</title>
  <link href="../Styles/stylesheet.css" rel="stylesheet" type="text/css"/>
  <style type="text/css">
  body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .aside {
    position: relative;
    top: 40%;
    text-align: right;
    padding: 0 5px 0 5px;
    width: 20%;
    overflow-x: hidden;
    height: auto;
    background-color: rgb(241, 238, 229);
    color: black;
    margin-left: auto;
    margin-right: auto;
    border: 2px solid rgb(168, 155, 139);
    border-radius: 10px;
    display: none;
  }
  </style>
  <script>

  &lt;![CDATA[
  function init() {
      function addEvent(element, evnt, funct) {
          if (element.attachEvent) {return element.attachEvent('on' + evnt, funct); }
          return element.addEventListener(evnt, funct, false);
      }

      // example

      var i = 0, linksArray = document.getElementsByTagName('a');
      for (i = 0; i &amp;lt; linksArray.length; i += 1) {
          if (linksArray.item(i).getAttribute('epub:type') === 'noteref') {addEvent(linksArray.item(i), 'click', function () {
              var x = document.getElementById(this.getAttribute('href').substring(1));
  			x.className = "aside";
  			x.style.display = "block";
          });
              }

      }
  }
  function alert()
  {
   document.getElementsByTagName('p').style.display="none";
  }
  ]]&gt;
  </script>
</head>

<body onload="init();">

  <p>he symbol for the British pound, a unit of currency.<a href="#n1" epubU0003Atype="noteref">1</a></p>

  <p onlick="alert()">CLICK ON ME</p>

  <aside id="n1" epubU0003Atype="footnote">

    <p>These have been corrected in this EPUB3 edition.</p>

  </aside>

</body>

</html>

Doitsu · 06-16-2014, 09:53 AM

Quote:

Originally Posted by odedta

If anyone is interested in the Javascript that's supposed to create the pop-up aside, I started working on the desing and the Javascript to make it work though I didn't finish because I thought it will work only for the iPad which already has that functionality, now that I see it can work on Kindle as well i'll post the HTML with all the data. The JS is incomplete.

AFAIK, eInk Kindles don't support Javascript at all. Did you test this on a Kindle Fire with an Android (Kindle) app or with an iOS Kindle app?

DiapDealer · 06-16-2014, 09:54 AM

I don't think you need to do anything special to make inline pop-up notes work on the ONE kindle device (PaperWhite) capable of displaying them.

odedta · 06-16-2014, 10:15 AM

Quote:

Originally Posted by Doitsu

AFAIK, eInk Kindles don't support Javascript at all. Did you test this on a Kindle Fire with an Android (Kindle) app or with an iOS Kindle app?

I was going for Calibre/iPad tests mostly, I didn't even know these apps existed when I made these JS tests about 6 months ago.

Doitsu · 06-16-2014, 10:31 AM

Quote:

Originally Posted by odedta

I was going for Calibre/iPad tests mostly, I didn't even know these apps existed when I made these JS tests about 6 months ago.

Calibre is not suitable for Kindle eBook tests, because it supports features that the actual devices (and apps) don't support.
You might want to tests books with Kindle Previewer or at least a current Kindle app before claiming that your Javascript script works with Kindles, too.

odedta · 06-16-2014, 10:39 AM

Quote:

Originally Posted by Doitsu

Calibre is not suitable for Kindle eBook tests, because it supports features that the actual devices (and apps) don't support.
You might want to tests books with Kindle Previewer or at least a current Kindle app before claiming that your Javascript script works with Kindles, too.

Oh, but I never said it did work, I was merely posting what I had made so far for people to continue developing if they are interested, I currently don't have the time to do this as I will be going to a 3 months trip in India this week

DiapDealer · 06-16-2014, 11:14 AM

Quote:

Originally Posted by odedta

now that I see it can work on Kindle as well i'll post the HTML with all the data.

Quote:

Originally Posted by odedta

Oh, but I never said it did work, I was merely posting what I had made so far for people to continue developing if they are interested

Umm...

odedta · 06-16-2014, 11:23 AM

Quote:

Originally Posted by DiapDealer

Umm...

Why did you not quote me all the way to the end???

Here is the last part you left out:

Quote:

The JS is incomplete.

DiapDealer · 06-16-2014, 12:04 PM

Because I only quoted the part that was relevant to my point. The fact that your JS is incomplete has no bearing on whether or not it can work on a Kindle (nor on whether you implied with your post that it COULD and then later recanted).

My point was that you said it CAN work on a kindle and then later said you DIDN'T say it could. I find that confusing and/or contradictory: hence the confused emoticon.

06-15-2014, 02:49 PM	#1
crutledge eBook FANatic Posts: 18,301 Karma: 16078357 Join Date: Apr 2008 Location: Alabama, USA Device: HP ipac RX5915 Wife's Kindle	Pop-up endnotes Is there someplace that shows the coding for pop-up endnotes? Thanks

06-16-2014, 06:39 AM	#3
crutledge eBook FANatic Posts: 18,301 Karma: 16078357 Join Date: Apr 2008 Location: Alabama, USA Device: HP ipac RX5915 Wife's Kindle	Pop-up endnotes on kindle I have a copy of "Killing Jesus" by Bill O'Reily on my Paperwhite. Kindle all the way. Endnotes (or whatever) appear in a smaller window centered over the book display. This window is scrollable and has full windows control. This seems an ideal way to display endnotes without changing the basic display. I just haven't figured how it was done.

06-16-2014, 07:09 AM	#5
DiapDealer Grand Sorcerer Posts: 28,880 Karma: 207000000 Join Date: Jan 2010 Device: Nexus 7, Kindle Fire HD	Popup footnotes on the Paperwhite usually "just work" as long as you code your foot\|end notes in a standard--very basic way in your source epub. Of course they're only going to work with the newer KF8 format, and you will probably have to use kindlegen/previewer to build the kindlebook. I could be wrong about the kindlegen/previewer part, though, as I believe the pop-up note (non-epub3 "aside" variety) is more of a heuristic feature/function of the Paperwhite device than anything. Last edited by DiapDealer; 06-16-2014 at 07:56 AM.

06-16-2014, 09:54 AM	#9
DiapDealer Grand Sorcerer Posts: 28,880 Karma: 207000000 Join Date: Jan 2010 Device: Nexus 7, Kindle Fire HD	I don't think you need to do anything special to make inline pop-up notes work on the ONE kindle device (PaperWhite) capable of displaying them. Last edited by DiapDealer; 06-16-2014 at 10:39 AM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Endnotes	Siam	Sigil	14	03-17-2013 02:05 PM
mobi endnotes	ccosner	Calibre	7	04-15-2011 06:47 AM
difficulty with endnotes	Oldpilot	Sigil	5	11-16-2010 03:17 PM
Tagging endnotes	jbrew	Sigil	3	11-08-2010 11:41 PM
Footnotes/Endnotes	crutledge	Sigil	17	07-17-2010 11:56 AM

06-16-2014, 05:29 AM	#2
odedta Addict Posts: 398 Karma: 96448 Join Date: Dec 2013 Device: iPad	You mean on the iPad? I don't think so anyhow, you can use CSS to style them as you like but they cannot be 100% styled the way you like, Apple put some limitations on the color and size on the footnotes

06-16-2014, 06:42 AM	#4
mrmikel Color me gone Posts: 2,089 Karma: 1445295 Join Date: Apr 2008 Location: Central Oregon Coast Device: PRS-300	I think it is done with JavaScript, but precisely how I don't know.

06-16-2014, 12:04 PM	#15
DiapDealer Grand Sorcerer Posts: 28,880 Karma: 207000000 Join Date: Jan 2010 Device: Nexus 7, Kindle Fire HD	Because I only quoted the part that was relevant to my point. The fact that your JS is incomplete has no bearing on whether or not it can work on a Kindle (nor on whether you implied with your post that it COULD and then later recanted). My point was that you said it CAN work on a kindle and then later said you DIDN'T say it could. I find that confusing and/or contradictory: hence the confused emoticon.

Advert

Advert