<body>
<script src="bgcolor.js"></script>
$(window).scroll(function() {
// selectors
var $window = $(window),
$body = $('body'),
$panel = $('.panel');
// Change 33% earlier than scroll position so colour is there when you arrive.
var scroll = $window.scrollTop() + ($window.height() / 3);
$panel.each(function () {
var $this = $(this);
// if position is within range of this panel.
// So position of (position of top of div <= scroll position) && (position of bottom of div > scroll position).
// Remember we set the scroll to 33% earlier in scroll var.
if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
// Remove all classes on body with color-
$body.removeClass(function (index, css) {
return (css.match (/(^|\s)color-\S+/g) || []).join(' ');
});
// Add class of currently active div
$body.addClass('color-' + $(this).data('color'));
}
});
}).scroll();
<!DOCTYPE html>
<html>
<head>
<style>
html, body {padding: 0px;
margin: 0px;}
</style>
</head>
<body>
<div id = "area"></div>
</body>
<footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/epubjs/dist/epub.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
<script>
var book = ePub("pg57939-images.epub");
var rendition = book.renderTo("area", { method: "default", width: "100%", height: "100%" });
var displayed = rendition.display();
function Next() {
rendition.next();
}
function Prev() {
rendition.prev();
}
$(document).click(function(e){
Next();
});
</script>
</footer>
</html>
pg57939-images.epub
located? Seems you need to use a URL that points to the resource unless it's next to the default index.html for your page. Also, <script> tags should go before the closing </body> tag and your footer should be in the body.
footer {
margin-top: 30px;
background-color: #ddd;
padding: 20px;
ul {
display: flex;
justify-content: flex-end;
li {
padding: 0 10px;
}
}
span {
margin-top: 5px;
display: flex;
justify-content: flex-end;
font-size: 0.9em;
color: #444;
}
}
Sass
, a preprocessor for CSS
{% for company in site.data.companies %}
<li class="company">
<img src="/assets/images/directory/logo-att.png" alt="" class="avatar">
<div class="info">
<p class="company--name">{{ company.name }}</p>
<p class="company--address">{{ company.address }}</p>
<ul class="company--designers">
{% for designer in site.data.companies.designers %}
<li><img src="/assets/images/directory/avatar-aaron-benjamin.png" alt="" class="avatar" title="Aaron Benjamin" alt="Aaron Benjamin">{{designer.name}}</li>
{% endfor %}
</ul>
</div>
</li>
{% endfor %}
[
{
"name": "The Home Depot",
"address": "123 Hello Ln. Atlanta, GA 30062",
"designers": [
{
"name": "Aaron Benjamin",
"twitter": "@abenjamin765"
}
]
},
{
"name": "AT&T",
"address": "123 Hello Ln. Atlanta, GA 30062",
"designers": [
{
"name": "John Smith",
"twitter": "@jSmith123"
}
]
}
]
site.data.companies.designers
doesn't seem to be correctly targeting the designers
key.
designers
array or the companies
array?
for
loop iterating company in companies
array, and then output the companies.designers.name
designers
correctly
company.designers
?
<img>
element