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>
<![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 &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";
}
]]>
</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>