jguix
commented
11 years ago The code for this example:
index.html
<!DOCTYPE html>
<head>
<title>Test</title>
<script type="text/javascript" src="scripts/monocore.js"></script>
<script type="text/javascript" src="scripts/monoctrl.js"></script>
<link rel="stylesheet" type="text/css" href="Styles/monocore.css" />
<link rel="stylesheet" type="text/css" href="Styles/monoctrl.css" />
<script type="text/javascript">
var bookData = {
getComponents: function () {
return [
'Text/a.html',
'Text/b.html'
];
},
getContents: function () {
return [
{title: "Chapter 1", src: 'Text/a.html'},
{title: "Chapter 2", src: 'Text/b.html'}
]
},
getComponent: function (componentId) {
return {url:componentId};
},
getMetaData: function(key) {
return {
title: "Test",
creator: "A tester"
}[key];
}
}
Monocle.Events.listen(
window,
'load',
function () {
window.reader = Monocle.Reader(
'reader',
bookData,
{ panels: Monocle.Panels.Magic }
);
Monocle.Events.listen(
window,
'resize',
function () { window.reader.resized() }
);
}
);
</script>
<style type="text/css">
#reader {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div id="reader">
</div>
</body>
</html>a.html
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!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>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Chapter 1</title>
</head>
<body>
<h1>Chapter 1</h1>
<h2>Section 1</h2>
<p id="a1">Go to <a href="../Text/b.html#b1">chapter 2 section 1</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec turpis vel arcu venenatis ornare in eget arcu. Vestibulum tristique nisl non lacus congue porttitor. Proin diam lectus, scelerisque et rhoncus vel, cursus id eros. Maecenas quis mauris velit, id consectetur leo. Vestibulum dignissim facilisis cursus. Suspendisse nulla felis, viverra non vestibulum et, porta in sem. Donec dignissim molestie nisl sed tempor.</p>
<p>Nullam at orci elit, in porta dolor. In ultricies adipiscing orci, viverra pellentesque elit egestas quis. Proin mattis erat quis libero consequat venenatis commodo elit venenatis. Aliquam mattis elementum est sed ornare. Morbi justo lacus, porta at tincidunt in, scelerisque id nulla. Donec non augue est, non porta neque. Proin elementum placerat volutpat. Nam vestibulum ante eget nunc laoreet in molestie tortor sagittis. Maecenas pellentesque orci magna.</p>
<p>Morbi at mi enim, eget semper neque. Cras lacinia eros vitae tellus accumsan egestas. Vestibulum quis ante enim. Nullam quis tincidunt enim. Suspendisse id risus velit. Donec eleifend lobortis dui eget faucibus. Vivamus porttitor libero ac velit tempus malesuada eget in orci. Quisque convallis massa et nibh cursus eu pulvinar ipsum sodales. Proin mollis lobortis nunc. Proin mi dolor, vestibulum a mollis ut, molestie sit amet metus. Vivamus vitae elit massa, eget gravida mauris. Praesent mauris nulla, semper nec ultricies semper, vestibulum vitae sapien.</p>
<p>Vivamus nunc nibh, molestie eleifend adipiscing at, fermentum non magna. Donec ornare eros quis nisi convallis mattis non ut nibh. Sed ipsum odio, hendrerit vitae adipiscing sed, ultricies ut quam. Morbi bibendum arcu quis tortor fringilla porttitor ac et augue. Duis malesuada fringilla arcu quis laoreet. Morbi sollicitudin purus in nibh sodales aliquam. Sed massa metus, blandit non bibendum quis, convallis et diam. Donec consectetur tortor sed nisi tristique a hendrerit orci semper. In hac habitasse platea dictumst. Praesent sem dolor, faucibus eu adipiscing quis, feugiat et diam. Suspendisse potenti. Fusce augue tortor, volutpat ultrices vestibulum porta, varius non justo. Integer convallis fermentum nunc, quis dapibus elit ultrices vitae.</p>
<p>Sed congue facilisis orci eu consectetur. Duis sed urna vel mi luctus lobortis at interdum purus. Proin bibendum ornare volutpat. Curabitur convallis eros id est venenatis sit amet ornare tellus fermentum. Sed vel mauris et neque tempus consequat. Maecenas consectetur, nibh ac feugiat sagittis, dolor justo consequat leo, non ultrices urna nunc sit amet ligula. Suspendisse dictum, purus ut aliquet viverra, tortor magna egestas arcu, et varius diam dolor at risus. Praesent imperdiet, diam ut blandit tincidunt, mi turpis pellentesque diam, at fringilla tellus odio sit amet elit. Quisque orci ipsum, porttitor at imperdiet nec, faucibus vitae turpis. Vestibulum ut turpis tortor, sit amet condimentum turpis. Morbi faucibus tellus id diam pharetra a vestibulum nibh viverra.</p>
<h2>Section 2</h2>
<p id="a2">Go to <a href="../Text/b.html#b2">chapter 2 section 2</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec turpis vel arcu venenatis ornare in eget arcu. Vestibulum tristique nisl non lacus congue porttitor. Proin diam lectus, scelerisque et rhoncus vel, cursus id eros. Maecenas quis mauris velit, id consectetur leo. Vestibulum dignissim facilisis cursus. Suspendisse nulla felis, viverra non vestibulum et, porta in sem. Donec dignissim molestie nisl sed tempor.</p>
<p>Nullam at orci elit, in porta dolor. In ultricies adipiscing orci, viverra pellentesque elit egestas quis. Proin mattis erat quis libero consequat venenatis commodo elit venenatis. Aliquam mattis elementum est sed ornare. Morbi justo lacus, porta at tincidunt in, scelerisque id nulla. Donec non augue est, non porta neque. Proin elementum placerat volutpat. Nam vestibulum ante eget nunc laoreet in molestie tortor sagittis. Maecenas pellentesque orci magna.</p>
<p>Morbi at mi enim, eget semper neque. Cras lacinia eros vitae tellus accumsan egestas. Vestibulum quis ante enim. Nullam quis tincidunt enim. Suspendisse id risus velit. Donec eleifend lobortis dui eget faucibus. Vivamus porttitor libero ac velit tempus malesuada eget in orci. Quisque convallis massa et nibh cursus eu pulvinar ipsum sodales. Proin mollis lobortis nunc. Proin mi dolor, vestibulum a mollis ut, molestie sit amet metus. Vivamus vitae elit massa, eget gravida mauris. Praesent mauris nulla, semper nec ultricies semper, vestibulum vitae sapien.</p>
<p>Vivamus nunc nibh, molestie eleifend adipiscing at, fermentum non magna. Donec ornare eros quis nisi convallis mattis non ut nibh. Sed ipsum odio, hendrerit vitae adipiscing sed, ultricies ut quam. Morbi bibendum arcu quis tortor fringilla porttitor ac et augue. Duis malesuada fringilla arcu quis laoreet. Morbi sollicitudin purus in nibh sodales aliquam. Sed massa metus, blandit non bibendum quis, convallis et diam. Donec consectetur tortor sed nisi tristique a hendrerit orci semper. In hac habitasse platea dictumst. Praesent sem dolor, faucibus eu adipiscing quis, feugiat et diam. Suspendisse potenti. Fusce augue tortor, volutpat ultrices vestibulum porta, varius non justo. Integer convallis fermentum nunc, quis dapibus elit ultrices vitae.</p>
<p>Sed congue facilisis orci eu consectetur. Duis sed urna vel mi luctus lobortis at interdum purus. Proin bibendum ornare volutpat. Curabitur convallis eros id est venenatis sit amet ornare tellus fermentum. Sed vel mauris et neque tempus consequat. Maecenas consectetur, nibh ac feugiat sagittis, dolor justo consequat leo, non ultrices urna nunc sit amet ligula. Suspendisse dictum, purus ut aliquet viverra, tortor magna egestas arcu, et varius diam dolor at risus. Praesent imperdiet, diam ut blandit tincidunt, mi turpis pellentesque diam, at fringilla tellus odio sit amet elit. Quisque orci ipsum, porttitor at imperdiet nec, faucibus vitae turpis. Vestibulum ut turpis tortor, sit amet condimentum turpis. Morbi faucibus tellus id diam pharetra a vestibulum nibh viverra.</p>
</body>
</html>b.html
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!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>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Chapter 2</title>
</head>
<body>
<h1>Chapter 2</h1>
<h2>Section 1</h2>
<p id="b1">Go to <a href="../Text/a.html#a1">chapter 1 section 1</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec turpis vel arcu venenatis ornare in eget arcu. Vestibulum tristique nisl non lacus congue porttitor. Proin diam lectus, scelerisque et rhoncus vel, cursus id eros. Maecenas quis mauris velit, id consectetur leo. Vestibulum dignissim facilisis cursus. Suspendisse nulla felis, viverra non vestibulum et, porta in sem. Donec dignissim molestie nisl sed tempor.</p>
<p>Nullam at orci elit, in porta dolor. In ultricies adipiscing orci, viverra pellentesque elit egestas quis. Proin mattis erat quis libero consequat venenatis commodo elit venenatis. Aliquam mattis elementum est sed ornare. Morbi justo lacus, porta at tincidunt in, scelerisque id nulla. Donec non augue est, non porta neque. Proin elementum placerat volutpat. Nam vestibulum ante eget nunc laoreet in molestie tortor sagittis. Maecenas pellentesque orci magna.</p>
<p>Morbi at mi enim, eget semper neque. Cras lacinia eros vitae tellus accumsan egestas. Vestibulum quis ante enim. Nullam quis tincidunt enim. Suspendisse id risus velit. Donec eleifend lobortis dui eget faucibus. Vivamus porttitor libero ac velit tempus malesuada eget in orci. Quisque convallis massa et nibh cursus eu pulvinar ipsum sodales. Proin mollis lobortis nunc. Proin mi dolor, vestibulum a mollis ut, molestie sit amet metus. Vivamus vitae elit massa, eget gravida mauris. Praesent mauris nulla, semper nec ultricies semper, vestibulum vitae sapien.</p>
<p>Vivamus nunc nibh, molestie eleifend adipiscing at, fermentum non magna. Donec ornare eros quis nisi convallis mattis non ut nibh. Sed ipsum odio, hendrerit vitae adipiscing sed, ultricies ut quam. Morbi bibendum arcu quis tortor fringilla porttitor ac et augue. Duis malesuada fringilla arcu quis laoreet. Morbi sollicitudin purus in nibh sodales aliquam. Sed massa metus, blandit non bibendum quis, convallis et diam. Donec consectetur tortor sed nisi tristique a hendrerit orci semper. In hac habitasse platea dictumst. Praesent sem dolor, faucibus eu adipiscing quis, feugiat et diam. Suspendisse potenti. Fusce augue tortor, volutpat ultrices vestibulum porta, varius non justo. Integer convallis fermentum nunc, quis dapibus elit ultrices vitae.</p>
<p>Sed congue facilisis orci eu consectetur. Duis sed urna vel mi luctus lobortis at interdum purus. Proin bibendum ornare volutpat. Curabitur convallis eros id est venenatis sit amet ornare tellus fermentum. Sed vel mauris et neque tempus consequat. Maecenas consectetur, nibh ac feugiat sagittis, dolor justo consequat leo, non ultrices urna nunc sit amet ligula. Suspendisse dictum, purus ut aliquet viverra, tortor magna egestas arcu, et varius diam dolor at risus. Praesent imperdiet, diam ut blandit tincidunt, mi turpis pellentesque diam, at fringilla tellus odio sit amet elit. Quisque orci ipsum, porttitor at imperdiet nec, faucibus vitae turpis. Vestibulum ut turpis tortor, sit amet condimentum turpis. Morbi faucibus tellus id diam pharetra a vestibulum nibh viverra.</p>
<h2>Section 2</h2>
<p id="b2">Go to <a href="../Text/a.html#a2">chapter 1 section 2</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec turpis vel arcu venenatis ornare in eget arcu. Vestibulum tristique nisl non lacus congue porttitor. Proin diam lectus, scelerisque et rhoncus vel, cursus id eros. Maecenas quis mauris velit, id consectetur leo. Vestibulum dignissim facilisis cursus. Suspendisse nulla felis, viverra non vestibulum et, porta in sem. Donec dignissim molestie nisl sed tempor.</p>
<p>Nullam at orci elit, in porta dolor. In ultricies adipiscing orci, viverra pellentesque elit egestas quis. Proin mattis erat quis libero consequat venenatis commodo elit venenatis. Aliquam mattis elementum est sed ornare. Morbi justo lacus, porta at tincidunt in, scelerisque id nulla. Donec non augue est, non porta neque. Proin elementum placerat volutpat. Nam vestibulum ante eget nunc laoreet in molestie tortor sagittis. Maecenas pellentesque orci magna.</p>
<p>Morbi at mi enim, eget semper neque. Cras lacinia eros vitae tellus accumsan egestas. Vestibulum quis ante enim. Nullam quis tincidunt enim. Suspendisse id risus velit. Donec eleifend lobortis dui eget faucibus. Vivamus porttitor libero ac velit tempus malesuada eget in orci. Quisque convallis massa et nibh cursus eu pulvinar ipsum sodales. Proin mollis lobortis nunc. Proin mi dolor, vestibulum a mollis ut, molestie sit amet metus. Vivamus vitae elit massa, eget gravida mauris. Praesent mauris nulla, semper nec ultricies semper, vestibulum vitae sapien.</p>
<p>Vivamus nunc nibh, molestie eleifend adipiscing at, fermentum non magna. Donec ornare eros quis nisi convallis mattis non ut nibh. Sed ipsum odio, hendrerit vitae adipiscing sed, ultricies ut quam. Morbi bibendum arcu quis tortor fringilla porttitor ac et augue. Duis malesuada fringilla arcu quis laoreet. Morbi sollicitudin purus in nibh sodales aliquam. Sed massa metus, blandit non bibendum quis, convallis et diam. Donec consectetur tortor sed nisi tristique a hendrerit orci semper. In hac habitasse platea dictumst. Praesent sem dolor, faucibus eu adipiscing quis, feugiat et diam. Suspendisse potenti. Fusce augue tortor, volutpat ultrices vestibulum porta, varius non justo. Integer convallis fermentum nunc, quis dapibus elit ultrices vitae.</p>
<p>Sed congue facilisis orci eu consectetur. Duis sed urna vel mi luctus lobortis at interdum purus. Proin bibendum ornare volutpat. Curabitur convallis eros id est venenatis sit amet ornare tellus fermentum. Sed vel mauris et neque tempus consequat. Maecenas consectetur, nibh ac feugiat sagittis, dolor justo consequat leo, non ultrices urna nunc sit amet ligula. Suspendisse dictum, purus ut aliquet viverra, tortor magna egestas arcu, et varius diam dolor at risus. Praesent imperdiet, diam ut blandit tincidunt, mi turpis pellentesque diam, at fringilla tellus odio sit amet elit. Quisque orci ipsum, porttitor at imperdiet nec, faucibus vitae turpis. Vestibulum ut turpis tortor, sit amet condimentum turpis. Morbi faucibus tellus id diam pharetra a vestibulum nibh viverra.</p>
</body>
</html>
I am getting problems linking from one chapter to another with internal links, with hashes.
The most simple example: