I want to make my web page flow better but I don't know what it's called that I am searching for!
Lets say I have the following HTML:
<section>
<article>
<h1>Article Header</h1>
<p>Article content</p>
</article>
<article>
<h1>Article Header</h1>
<p>Article content</p>
<p>More content</p>
</article>
<article>
<h1>Article Header</h1>
<p>Article content</p>
<p>More content</p>
<p>More content</p>
</article>
<article>
<h1>Article Header</h1>
<p>Article content</p>
<p>More content</p>
<p>More content</p>
<p>More content</p>
</article>
<article>
<h1>Article Header</h1>
<p>Article content</p>
<p>More content</p>
<p>More content</p>
</article>
<article>
<h1>Article Header</h1>
<p>Article content</p>
<p>More content</p>
</article>
and the following CSS
section article {
width: 49%;
display: inline-block;
}
That makes the articles appear side by side in the section, but there are gaps where the articles different sizes.
How would I make it flow so there were no gaps (ie fill the available space) ?
I am open to a solution using jQuery / JavaScript if needs be.
fiddle added:
http://jsfiddle.net/Yn4et/
I'm not sure I understand correctly what you want, but I think this is a duplicate of the following question:
How to Create Grid/Tile View with CSS?
section {
width: 100%;
}
article {
width: 50%;
display: inline-block;
margin: 0;
padding:0;
}
Related
I want to make the same scroll function with this website(https://salanaru.jp/).
On this website, we can scroll only the right side contents.
even if you try to scroll the other parts, the right side contents scroll.
I checked developper tool, but I couldn't find any code that is controlling the scroll function.
How can I find the code or fix this problem?
Use position: fixed on the left container and set a width (x).
Use padding-left: x on the right container.
body {
background-color: blue;
}
.left {
background-color: red;
bottom: 0;
left: 0;
position: fixed;
top: 0;
width: 70vw;
}
.right {
padding-left: 70vw;
}
<div class="left">Fixed Content</div>
<div class="right">
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
</div>
I want to see (display as block) #link1 when the page opens. Is there a way to do this with css and html? or if there is not, how can I do this with javascript?
.tab div {
display: none;
}
.tab div:target {
display: block;
}
<div class="tab">
Link 1
Link 2
Link 3
<div id="link1">
<h3>Content to Link 1</h3>
<p>Hello World!</p>
</div>
<div id="link2">
<h3>Content to Link 2</h3>
<h4>Great success!</h4>
</div>
<div id="link3">
<h3>Content to Link 3</h3>
<p>Yeah!</p>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<style>
.tab div {
display: none;
}
.tab div[opened] {
display: block;
}
</style>
</head>
<body>
<div class="tab">
Link 1
Link 2
Link 3
<div id="link1" opened>
<h3>Content to Link 1</h3>
<p>Hello World!</p>
</div>
<div id="link2">
<h3>Content to Link 2</h3>
<h4>Great success!</h4>
</div>
<div id="link3">
<h3>Content to Link 3</h3>
<p>Yeah!</p>
</div>
</div>
</body>
</html>
Add Event Listener on three links and add attribute opened to proper div. Or, you could use bootstrap or Material-ui collapse feature if you can use any css framework.
One approach is to trigger a click on the first .tab a.
Another would be set the url hash to #link1
document.querySelector('.tab a').click()
// OR
location.hash = 'link1';
.tab div {
display: none;
}
.tab div:target {
display: block;
}
<div class="tab">
Link 1
Link 2
Link 3
<div id="link1">
<h3>Content to Link 1</h3>
<p>Hello World!</p>
</div>
<div id="link2">
<h3>Content to Link 2</h3>
<h4>Great success!</h4>
</div>
<div id="link3">
<h3>Content to Link 3</h3>
<p>Yeah!</p>
</div>
</div>
CSS for class page_header. Header is given a 'fixed' position.
.page__header {
position: fixed;
top: 0;
width: 100%;
}
Below is part of full HTML:
/* navigation bar */
<header class="page__header">
<nav class="navbar__menu">
<ul id="navbar__list">
<li>About</li>
<li>Courses</li>
<li>Instructor</li>
</ul>
</nav>
</header>
/* one of the sections */
<section id="section1" data-nav="Section 1" class="your-active-class">
<div class="landing__container">
<h2>About</h2>
<p>some text here</p>
<p>some text here</p>
</div>
</section>
JavaScript function that: (1) extract href target (2) extract x-coordinate & y-coordinate based on href target (3) scroll to specific section based on the coordinates.
I need help to build the part that extract href target within tag.
function scroll_to_section(e) {
if (e.target.matches("a")) {
// prevent page jump straight to section when click on the URL
e.preventDefault();
// extract href target within <a>
const ref = document.getElementById(e.target.href.split("#")[1]);
// find x-coordinate & y-coordinate of the href
const coordinate = ref.getBoundingClientRect();
// scroll to section based on position
window.scrollTo({
left: coordinate.x,
top: coordinate.y,
behavior: 'smooth'
});
}
}
const navbar = document.getElementById('navbar__list');
navbar.addEventListener("click", scroll_to_section);
You do not need JavaScript to go to section =)
Example:
html {
scroll-behavior: smooth;
}
/* this is for testing: */
p { height: 200px }
section { border: 1px solid black; margin: 10px; }
<header class="page__header">
<nav class="navbar__menu">
<ul id="navbar__list">
<li>About</li>
<li>Courses</li>
<li>Instructor</li>
</ul>
</nav>
</header>
<section id="section1" data-nav="Section 1" class="your-active-class">
<div class="landing__container">
<h2>About</h2>
<p>some text here</p>
</div>
</section>
<section id="section2" data-nav="Section 2" class="your-active-class">
<div class="landing__container">
<h2>Courses</h2>
<p>some text here</p>
</div>
</section>
<section id="section3" data-nav="Section 3" class="your-active-class">
<div class="landing__container">
<h2>Instructor</h2>
<p>some text here</p>
</div>
</section>
P.S. Updated for "smooth" scroll
You mean this if you insist on scripting this
the parameter smooth does not seem to work so I borrowed the CSS from the other answer which is a better answer since there is no scripting involved
document.getElementById("navbar__list").addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.tagName === "A") {
e.preventDefault(); // stop the normal scrolling
const target = document.getElementById(tgt.href.split("#")[1]);
console.log(target.dataset.nav)
const coord = target.getBoundingClientRect();
console.log(coord.x,coord.y)
window.scrollTo({
left: coord.x,
top: coord.y,
behavior: "smooth"
})
}
})
<header class="page__header">
<nav class="navbar__menu">
<ul id="navbar__list">
<li>About</li>
<li>Courses</li>
<li>Instructor</li>
</ul>
</nav>
</header>
<section id="section1" data-nav="Section 1" class="your-active-class">
<div class="landing__container">
<h2>About</h2>
<p>some text here</p>
<p>some text here</p>
</div>
</section>
<div style="height:1000px">
<hr>
</div>
<section id="section2" data-nav="Section 2" class="your-active-class">
<div class="landing__container">
<h2>Courses</h2>
<p>some text here</p>
<p>some text here</p>
</div>
</section>
<div style="height:1000px">
<hr>
</div>
<section id="section3" data-nav="Section 3" class="your-active-class">
<div class="landing__container">
<h2>Instructor</h2>
<p>some text here</p>
<p>some text here</p>
</div>
</section>
<div style="height:1000px">
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I have made a simple javascript function that sets the backgroundPosition property of body whenever a user scrolls. Sometimes however, the background image seems to "teleport" back to 0, then jump to the correct scroll height. Why is this? Why does it jump back and forth when I directly set the property? And how do I fix it? The problem seems even worse when running the code from an html file.
"use strict"
const factor = 8;
var scrollY;
window.addEventListener('scroll', function(){
scrollY = document.documentElement.scrollTop || window.pageYOffset;
document.body.style.backgroundPosition = "0 " + (scrollY - scrollY/factor) + "px";
});
header {
background-color: #fff;
text-align: center;
width: 100%;
z-index: 2;
}
nav {
background-color: #eee;
position: sticky;
top: 0;
width: 100%;
z-index: 2;
}
main {
max-width: 80ch;
margin: auto;
}
article {
margin-top: 40px;
padding: 20px;
background-color: #fff;
}
.flexRow {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
}
body {
margin: 0;
background-image: url(data:image/png;base64,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);
}
<body>
<header>
<h1>All posts</h1>
<p>That's it</p>
</header>
<nav class="flexRow">
Home |
Blog |
New
</nav>
<main>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
</main>
</body>
You have to attach the background or otherwise it will scroll with the body, background-attachment: fixed. The jerk you are seeing is this movement overlapped with the scripted background position change. Once that is fixed you'd notice that your math is moving the background in the opposite direction to the scroll. You will have to use a negative value for a same direction parallax, - Also, since you are only moving the background in a single direction, you can use backgroundPositionY
"use strict"
const factor = 8;
var scrollY;
window.addEventListener('scroll', function(){
scrollY = document.documentElement.scrollTop || window.pageYOffset;
document.body.style.backgroundPositionY = -scrollY * 0.4 + "px";
});
header {
background-color: #fff;
text-align: center;
width: 100%;
z-index: 2;
}
nav {
background-color: #eee;
position: sticky;
top: 0;
width: 100%;
z-index: 2;
}
main {
max-width: 80ch;
margin: auto;
}
article {
margin-top: 40px;
padding: 20px;
background-color: #fff;
}
.flexRow {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
}
body {
margin: 0;
background-attachment: fixed;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAeAAAAHgCAMAAABKCk6nAAAABGdBTUEAALGPC/xhBQAAAwBQTFRF09PT1tbW2dnZ3NzcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA7n7lwgAAAAlwSFlzAAAOvwAADr8BOAVTJAAAAAd0SU1FB+MEFBYvJTdMlmwAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuNv1OCegAADfaSURBVHhe7dzJguM2tgVA2/3///xIICRxAHFACVLV4sWmM8nDOwAe2pv6578/5H+D/hn07yDtI/FI+0g80j4Sj0YveLjxoH/dX/KnDvB/4onu0fCF6B+JJ/8NXvB44zH/Dl7wn/o7ZO08QvNo+EImX/B/gxdcohMt9dxg35JzQtG6zggT9NXWmd7RUtIXUR0gE+9bckMXLDvNWq/eYN+ac0TRmh1hhK5H70TraK3pk6gMMEC8a82NXPAzPEmpV26wr+ScUVTCA8zQ82rep3NUivomKuEB4j0lN3DBm/QUtV45xa6ac0hRTWeG6Nh279E4qlV9FNV0Jt5Rc/mCd/EJ1KvH2CHnlCLxyBTX9u2v6Rsp66tIPBK/JhcvWHzaBSsXL1js5xesfbxgbSNlf37BYvGCxaddsGrxgqV+fsHaxwvWNVL25xcsFS9YfOHBhxRbOMcLQgsHFYlHBrmg/UL8gqaRsgsfRuKR+AWhRf+CxVeefEatlXNsk1k5qUg8Mkmb9ivxNj0jZVe+jMQj8TaZVfeCxQuPPqJU4RybRApHFYlHRmnSvhBv0jJStvBpJB6JN4kUvQsWrzz7hEqVc2yRqJxVJB6ZpUX7SrxFx0jZyreReCTeIlF1LlgcDz+gEM6xQQCHFYlHhmnQHvEGDSNl8XEkHok3CHB9weIPnr5PnQfneOb9g9OKxCPTnGn/IH6mX6Tsg68j8Uj8zPuHywsWf/L4bco8OccTr58cVyQeGedE+yfxE+0iZZ98HolH4ideP11dsPiL5+9S5cU5Hnn74rwi8cg8R9q/iB/pFin74vtIPBI/8vbl4oLFN7x4kyIbzvHAyw0HFolHBjrQfkP8QLNI2Q0FIvFI/MDLjfYFi2958x41tpzjnndbTiwSj0y0p/2W+J5ekbJbKkTikfied1vNCxbf8eotSuw4xx2vdhxZJB4ZaUf7HfEdrSJld5SIxCPxHa92hv9i8+4dKuw5xy1v9pxZJB6ZaUv7PfEtnSJl99SIxCPxLW/2GtOIH3j5BgUOnOOGFwcOLRKPDLWh/YH4hkaRsgeKROKR+IYXB+dxxI+8vc/3R87xxfMjpxaJR6Z60f5I/EWfSNkjVSLxSPzF86PTPOInXt/m8xPn+OTxiWOLxCNjPWl/Iv6kTaTsiTKReCT+5PHJcSDxM+/v8vWZc3zw9My5ReKRuR60PxN/0CVS9kydSDwSf/D07DCReIPATT5ucI542ODgIvHIYGjfII4mkbINCkXikTgeNuxHEm+RuMe3Lc6x8qzFyUXikckq7VvEKz0iZVtUisQj8cqzlt1M4k0it/i0yTkWHjU5ukg8MlqhfZN4oUWkbJNSkXgkXnjUtB1KvE3mDl+2OceVJ23OLhKPzLbSvk18pUOkbJtakXgkvvKkbTOV+AWhG3x4wTkuPLjg8CLxyHAL7S+ILzSIlL2gWCQeiS88uPAaS/yK1DjfXXGO6X6/d8HaXxGfdb/fu2C/X3nOJX5JbJjPLjnHdL9fu2DtL4nPut+vXbBfLz0GE78mN8pX1w7neMn5ReKR+bS/Jq56pOw19SLxaDRuMvGOmhvlo47dMXY4wEg8qvPV7j01rXhUq/bUepl4NJquo9V0V8mN8k3P5hS7nGAkHpX5SvO+ElY7KkX7Sr0B4tFouMxWwkFJD/JJ1/MQA0cYiUfrfOUGgzWrdFSWDkrzAeLRaHYdrhROanyIL/qcYeQMI/Foma/eYLBEVY7q1kHtnolHo9Flulo4kR/gg2Dwfr9wwW4wmHy/X7hgPwTDf/yLfCafDN7v/At2gcnk+51/wf43MWUm/3PaR84ncn/TGDPSfhplI8cTiUfDC4/SPxk+QPcyiymj4b8ABykbjf6DSDwa33iUAYLxv0NczCSGjMb/CTNG2Wj0X3Hi0Y2VR5mgb8nZPKoXM0kdMVtG1H4OZaMlWg8oEI/u7DzKCF1rrm6elYuZpAw4YJ1R+ymUjdZsOaBAPLq19Cgz9JRc2XxAGXKO0ndAGVL7GZSNSrg07xOP7m09yhAdNVe2GVCnnKH2zeqU2k+gbFTTtXuPeHRz7VGmuCZX18mM+Tl9I2Nq/zllI3Htr4lH1v75BYv9/IK1jYw57YKVjcTjBYtH1v75BUv9/IJ1jYw57YKVjcTjBYtH1l54MI1BLggt7BMZ80OaRsZcaP8hZSPxhfYXxCNrrzyZxiRtMiv7RMb8jJ6RMVfaf0bZSHylfZt4ZO3Co2mM0iRS2Ccy5ke0jIxZaP8RZSPxQvsm8cjalWfTmKVForJPZMxP6BgZs9L+E8pG4pX2LeKRtfFwGsM0CGCfyJgf0DAyJtp/QNlIHO0bxCNrP3g6jWnOvH+wT2TM9+kXGfNB+/cpG4k/aH8mHln7yeNpjHPi9ZN9ImO+TbvImE/av03ZSPxJ+xPxyNovnk9jniNvX+wTGfNdukXGfNH+XcpG4i/aH4lH1t7wYhoDHXi5YZ/ImG/SLDLmhvZvUjYS39D+QDyy9pY305hoz7st+0TGfI9ekTG3tH+PspH4lvZ74pG1d7yaxkg7Xu3YJzLmW7SKjLmj/VuUjcR3tN8Rj6y95900ZtryZs8+kTHfoVNkzD3t36FsJL6n/ZZ4ZO0DL6cx1IYXB/aJjPkGjSJjHmj/BmUj8QPtN8Qjax95O42pXjw/sk9kzPv0iYx5pP19ykbiR9q/iEfWPvF6GmM9eXxin8iYt2kTGfNE+9uUjcRPtH8Sj6x95v005nrw9Mw+kTHv0iUy5pn2dykbiZ9p/yAeWbtBYBqD4WGDfSJj3qRJZMwG7W9SNhJv0B7xyNotEtOYrPKsxT6RMe/RIzJmi/b3KBuJt2hfiUfWbhKZxmiFR032iYx5ixaRMZu0v0XZSLxJ+0I8snabzDRmW3nSZp/ImHfoEBmzTfs7lI3E27RfiUfWviA0jeEWHlywT2TMGzSIjHlB+xuUjcQvaL8Qj6x9RWoa08X57BMZc5z6kTGvaD9O2Uj8ivbT7vdrF+zXS/aJjDlM+ciYl7Qfpmwkfkn7aff7rQv22zX7RMYcpXpkzGvaj1I2Er+mvXhk7Q7BaUbns09kzEGKR3XKHu0HKRuJd9Tu4pG1eySnGZ3PPpExx6gdlSH7tB+jbCTeU5qLR9buEp1mdD77RMYconRUDjHQfoiykXjX2ls8snaf7DSj89knMuYIlaP1DCPtRygbifctrcUjawfC04zOZ5/ImAMUjuoFJtoPUDYSD2bf7/wL9r+JfSJjZupGLjDRPlM2Ek/+sU6kbKRuJD6NMSPxyL1E4pH2kfg0oxc8+28k8Wg0aMxIPPKfF9FoQe0j8Wi47+AFz/43oXg0mjRmJB75z4totKL2kXg03nfsgpdVfNHn+iLxaDRqzEg8WvrWCwxGS9bumXg0Gl1yQxe87uKTrnJ5A8Sj0awxI/Fo7VsuMBitWZoPEI9Gs2tu5ILLMr7pWc9lhHg0GjZmJB6VvmXpvtGiJTdAPBoNl9zABddtfNRRzmWAeDSaNmYkHtW+deue0ao1l4lHo+mayxdsHV9dq+eSiUejcWNG4pG+1r42WlYuEo9G43Lxgq0TL9i5ROKReMwbMxKPtI0XrGysKxaJR+LDfdMFWydesGOJxCPx+IExI/FI13jBysbCUpF4JD7eN1ywdRY+vOBUIvFIfOHBBWNG4pGmC2tfUHbhwwtCkXgkvvDggtCif8HWWfmyzaFE4pH4ypM2Y0bikZ4ra7cpu/Jlm0wkHomvPGmTWXUv2DqFT5ucSSQeiRceNRkzEo+0LKzdpGzh0yaRSDwSLzxqEil6F2ydyrctjiQSj8Qrz1qMGYlHOlbWblG28m2LRCQeiVeetUhUnQu2Dj5ucCKReCSOhw3GjMQjDbF2g7L4uEEgEo/E8bBBgOsLts6Dr88cSCQeiT94embMSDzS78HaZ8o++PrM+0g8En/w9Mz7h8sLts6Tz0+cRyQeiT95fGLMSDzS7snaJ8o++fzE60g8En/y+MTrp6sLts6L748cRyQeib94fmTMSDzS7cXaR8q++P7I20g8En/x/Mjbl4sLts6GAgdOIxKPxDe8ODBmJB5ptmHtA2U3FDjwMhKPxDe8OPByo33B1tlSYc9hROKR+JY3e8aMxCO9tqy9p+yWCnveReKR+JY3e95tNS/YOjtK7DiLSDwS3/Fqx5iReKTVjrV3lN1RYserSDwS3/Fqx6ud1tDW2VNjy1FE4pH4nndbxozEI532rL2l7J4aW95E4pH4nndb3uw1prbOgSIbTiISj8QPvNwwZiQeaXRg7Q1lDxTZ8CISj8QPvNzw4uA8tnWOVHlxEJF4JH7k7YsxI/FInyNrvyh7pMqL55F4JH7k7YvnR6e5rXOizJNziMQj8ROvn4wZiUfanFj7SdkTZZ48jsQj8ROvnzw+OQ5unTN1HhxDJB6Jn3n/YMxIPNLlzNoPyp6p8+BpJB6Jn3n/4OnZYXLrNCiEU4jEI/EGAYwZiUeaNFgbZRsUwsNIPBJvEMDDhv3o1mlRqXIIkXgk3iJRGTMSj/RosXalbItKlWeReCTeIlF51rKb3TpNShXOIBKPxJtECmNG4pEWTdYulG1SqvAoEo/Em0QKj5q2w1unTa2VI4jEI/E2mZUxI/FIhzZrr5RtU2vlSSQeibfJrDxp20xvnQuKLZxAJB6JXxBaGDMSjzS4YO2FshcUW3gQiUfiF4QWHlx4jW+dK6r9+n5fZYwZiUfqX7F2ut9XO79H4pH4FamYe85vnUvK/fp+n3WMGYlHyl+ydrrfZz+/RuKR+CWxmHssYJ1r6lk/Eo/Er8kZMxKPVL9mbWWvqee3SDwSvzaas4F1Omo920c1nYl31FydMqvpTPGOurWyHbWeX6KazsQ7RnN1hbpNV6ln+aiEB4j3lFwZckAJD1C7pyytbE+p5+eohAeI94zmyg5lmWCtZ/eoNB8g3rXmyqQDStEBSnetOyvbtdbzY1SaDxDvGs2tS5QLTJZ6Vo/W3iPE+5ZcnTSrVTOV+5aVle1b6vkpqt0z8b7R3LJFvcDkD93vUs2kkbKRwsHg/S5d/RBpH4kHo7l/Bu/3nz90v//+ofsd/vOl/tD9Dvf1/44z9zyNc4zEI/HI3pG1I+0j8Uj7af7UBTvuSDwSj6b/Dad/MvwPNu2T4b9Q/9AFO+5IPBKPxv8OsXZkgGD831zaB+P/JPozF+y4I/FIPFr2sHdUt85M0FdbD9G+b6nnp+iPXHA57AHikXi07mHvqCw9wAhdj94jtO9a6/kx+hMXvM43QjwSj8oe9o5KeIAZel7NB2jfU+r5OfoDF1zmGyAeiUd1D3tHNZ0ZomPbPdO+o9bzS/T7C67zZeKReGQPe0fikSmu7dtH2l9Tz2/Rzy/YfJF4JB5Z4+cXrP20C1bur71g40XikXhki59fsPbTLli1v/aCTReJR+KRJRb2jsQjg1zQfiEeaX9BsYUH0W8v2HCReCQe2WFl70g8Mkmb9ivxSPs2tVaeRD+9YLNF4pF4ZIXC3pF4ZJQm7QvxSPsmpQqPol9esNEi8Ug8skFl70g8MkuL9pV4pH2LSpVn0Q8v2GSReCQeWQB7R+KRYRq0RzzSvkEhPIx+d8EGi8Qj8cj8D/aOxCPTnGn/IB5pf6bOg6fRzy7YXJF4JB4Z/8nekXhknBPtn8Qj7U+UefI4+tUFGysSj8Qj07/YOxKPzHOk/Yt4pP2RKi+eRz+6YFNF4pF4ZPgNe0fikYEOtN8Qj7Q/UGTDi+g3F2yoSDwSj8y+Ze9IPDLRnvZb4pH2e2pseRP95ILNFIlH4pHRd+wdiUdG2tF+RzzSfkeJHa+iX1ywkSLxSDwy+Z69I/HITFva74lH2m+psOdd9IMLNlEkHolHBj+wdyQeGWpD+wPxSPsNBQ68jL5/wQaKxCPxyNxH9o7EI1O9aH8kHmn/4vsjb6OvX7B5IvFIPDL2ib0j8chYT9qfiEfaP/n8xOvo2xdsnEg8Eo9MfWbvSDwy14P2Z+KR9g++PvM++vIFmyYSj8QjQzfYOxKPDIb2DeKR9vi4QSD67gUbJhKPxCMzt9g7Eo9MVmnfIh5pX/m2RSL66gWbJRKPxCMjN9k7Eo+MVmjfJB5pX/i0SST65gUbJRKPxCMTt9k7Eo/MttK+TTzSfuXLNpnoixdskkg8Eo8MfMHekXhkuIX2F8Qj7Rc+vCAUfe+CDRKJR+KRea/YOxKPTBfnE4+0T/f75y/YHJF4JB4Z95K9I/HIeHE+8Uj7dL9//IKNEYlH4pFpr9k7Eo9G5xOPtPfVNbnoSxdsikg8Eo8M22HvSDwanU88qt191FFz2Xcu2BCReCQembXH3pF4NDqfeFSa+6an5AZ85YLNEIlH4pFRu+wdiUej84lHa2+fdJUhB3zjgo0QiUfikUn77B2JR6PziUdLa1/01SmzL1ywCSLxSDwyaGDvSDwanU88GrzfP3jBBojEI/HInIm9I/FodD7xaPB+51+wutO4vkj7SDyyd6RspOw0jicyZjR6gMrOY59I/0g8snekbKRsMrqv08mMGQ0eoKoTWSgyQCQe2TtSNlI2GN3X4QwwZjR2gIrOZKPIBJF4ZO9I2UjZvtF969EMMWY0dIBqTmWlyAiReGTvSNlI2a7RfcvBDDJmNHKASs5lp8gMkXhk70jZSNme0X1LbpQxo4EDVHEyS0WGiMQje0fKRsp2jO5bc6OMGeUDVHA2W0WmiMQje0fKRspeG91XbpQxo3iA6k1nrcgYkXhk70jZSNlL1o37ig0zZpQOULn57BWZIxKP7B0pGyl7xbZxX6lxxozCAar2BRaLDBKJR/aOlI2UvWDZhQcXhG4wZtQ/QMW+wWaRSSLxyN6RspGybXZdedImc4cxo+4BqvUVVouMEolH9o6UjZRtsmrhUZPILcaMegeo1HfYLTJLJB7ZO1I2UrbFppVnLRL3GDPqHKBKX2K5yDCReGTvSNlI2QaL4mGDwE3GjK4PUKFvsV1kmkg8snekbKTsmT0fPD3z/i5jRpcHqM7XWC8yTiQe2TtSNlL2xJpPHp94fZsxo6sDVOZ77BeZJxKP7B0pGyl7ZMsXz4+8vc+Y0cUBqvJFFowMFIlH9o6UjZQ9sOSGFwdevsGYUfsAFfkmG0YmisQje0fKRsru2XHLmz3v3mHMqHmAanyVFSMjReKRvSNlI2V3rLjj1Y5XbzFm1DpAJb7LjpGZIvHI3pGykbJbNtzzbsub9xgzahygCl9mychQkXhk70jZSNkNCx54ueHFm4wZnQ9QgW+zZWSqSDyyd6RspOyL/Y68ffH8XcaMTgfo+6+zZmSsSDyyd6RspOyT9U68fvL4bcaMjgfo8++zZ2SuSDyyd6RspOyD7c68f/D0fcaMDgfo6x+waGSwSDyyd6RspCyWaxDAww8YM9ofoI9/waaRySLxyN6RspGyld1aJCrPPmHMaHeAvv0Jq0ZGi8Qje0fKRsoWVmsSKTz6iDGj7QH69DfsGpktEo/sHSkbKbuyWZvMypPPGDPaHKAvf8SykeEi8cjekbKRsguLXRBaePAhY0avA/Thr9g2Ml0kHtk7UjZSNt6b1Kz7vX/BvvsZ60bGi8Qje0fKRsrGexObdb+3L9hnv2PfyHyReGTvSNlIWVtdG82NMmbkAH31QxaO6nyZeGTvSNmoVrVUx2hulDGjeoA++qW6cFbmGyAe2TtSNipF7dQzmhtlzKgcoG9+qiw8oJziAPHI3pGy0VrTSl2juVHGjNYD9MlvrQuPqMeYiUf2jpSNlpI26hvNjTJmtBygL36snPYA5xiJR/aOlI1G723y/d64YB/8mvOOnGMkHtk7UjYavbfJ9zt+waPUncb5TKNsZO9I2UjZSNlIPBKPXF+mbjK68PABDlI2s3eibDT7D6ab/gfdDVM4GD3p8RMco+wAiwfKRrP/ZMnpf1LlOJX7lpX91Le0rgc0ibIj6uKBstESVbavVh3iiz7ZyN0NUbpr3dmPXWvvckCTKDukLB4oG61ZZbtK0UE+6RKNXN0YtXvK0n7uKc1LeA5lx5TmfcpGJaxsT8mN8k2PZOTmBineUbf2S0ftXtMzKDuodu9RNqppZTtqbpSPOgQjFzdK9WvW9ts17cU/p+wo7a8pG4kre01ulK+uyUXubZjyl6wdz1v7aRes7DDtLykbiccLERvms0tikWsbp/4Va8cD137aBSs7Tvsrykbi8UKkxvnuilTk1m7Q4IK1Fx5c0H4h/iFlb9D+grKR+ELZC0I3+PCCUOTS7tChzdorT9q0X4l/Rtk7tG9TNhJfKdsmc4cv22Qid3aLFk3WLjxq0r4Q/4iyt2jfpGwkXijbJHKLT5tEIld2jx4t1q48a9G+Ev+Esvdo36JsJF4p2yJxj29bJCI3dpMmDdbGwwbtEf+Asjdp36BsJI6yDQI3+bhBIHJhd+lyZu0HT8+0fxB/n7J3aX+mbCT+oOyZ93f5+sz7yH3dps2JtZ88PtH+Sfxtyt6m/YmykfiTside3+bzE68j13WfPkfWfvH8SPsX8Xcpe5/2R8pG4i/KHnl7n++PvI3c1hs0OrD2hhcH2m+Iv0nZN2h/oGwkvqHsgZdvUODAy8hlvUOnPWtvebOn/Zb4e5R9h/Z7ykbiW8ruefcOFfa8i9zVW7TasfaOVzva74i/Rdm3aL+jbCS+o+yOV29RYseryFW9R68ta+95t6X9nvg7lH2P9lvKRuJ7ym558x41tryJ3NSbNNuw9oGXG9ofiL9B2Tdpv6FsJH6g7IYXb1Jkw4vIRb1LtxdrH3n7ov2R+H3Kvkv7F2Uj8SNlXzx/lyovnkfu6W3aPVn7xOsn7U/Eb1P2bdo/KRuJnyj75PHblHnyOHJN79Pvwdpn3j9ofyZ+l7Lv0/5B2Uj8TNkHT9+nzoOnkVv6gIZYu0EA7RvEb1L2A9qjbCTeoCwefkAhPIxc0id0rKzdIlFp3yJ+j7Kf0L5SNhJvUbby7BMqVZ5F7ugjWhbWbhIptG8Sv0XZj2hfKBuJNylbePQRpQqPIlf0GT1X1m6TWWnfJn6Hsp/RfqVsJN6m7MqTz6i18iRyQx/SdGHtC0IL7S+I36Dsh7RfKBuJX1B24cGHFFt4ELmgT+ma7vd1DdpfER+n7Ke0n3W/rwvx+6dU+/n9Pi/Y2pfE4nziw5T9mPaz7vd5IX79mHI/v9/HBVv7mpz218RHKfu5m+3Fr+3Lfu5mPbczQe1r7Y6a075DfFCtOsO97jXds606w716LmeG0tfaPSWnfY/4mFJ0jlvNS7jvVXSOW/XczRRrX2t3jc4nPmStOcud3mXQ4FFzljv1XM0cS19r943OJz5i3XmaG63roEEtOc+Nem5mksH7XW5D+0B8QLmXaSbf73IhfpjkT93vP4P3+9/ofOKZi5ll8v3+b/L9jtdzL9NYexrnHWkfiUfaR47x57SPrBM5nkzdWbSPRv8Eu9GCowfouH9u9C/A8n/GBjieAQpPon00+kcUjlYc/TvEcf/c6D9h1uQIxzNC5Tm0j5ao9n2jJZcjLP2Tetq/t4xogr4azRzPEKWn0D5as9p3jdZcz3DNJmvuT1hnNELXI5s4njFqz6B9VMLa95Scb3rKIZZwX8n9AWVIM/S8wn2OZ5DiE2gf1bT2HTXno45yLgMXXHO/V6c0RMc23eN4Rqn+Oe0jce2vyfnqWj2XfMFyP2dMU1zbx685nmHKf0z7SDxesFis61ziBYv9nDHjBYvHC3Y849T/lPaReLxgqVjYscQLlvo5Y8YLFo8X7Hhu0OBD2kfiC+0vCC18eMGpLMQvCP2cMRcGuSC+EL/geO7Q4TPaR+Ir7dtkVr5scygr8TaZnzPmyiRt4ivxNsdzixYf0T4SL7RvEil82uRMCvEmkZ8zZmGUJvFCvMnx3KPHJ7SPxCvtWyQq37Y4kkq8ReLnjFmZpUW8Em9xPDdp8gHtI3G0bxDAxw1OBPEGgZ8zJoZpEEe8wfHcpcv7tI/EH7Q/8/7B12cO5EH8zPufM+aDac7EH8TPHM9t2rxN+0j8SfsTr598fuI8nsRPvP45Yz4Z50T8SfzE8dynz7u0j8RftD/y9sX3R47jRfzI258z5ot5jsRfxI8czxs0epP2kfiG9gdebihw4DQ2xA+8/DljbhjoQHxD/MDxvEOn92gfiW9pv+fdlgp7DmNLfM+7nzPmlon2xLfE9xzPW7R6i/aR+I72O17tKLHjLHbEd7z6OWPuGGlHfEd8x/G8R693aB+J72m/5c2eGluOYk98y5ufM+aembbE98S3HM+bNHuD9pH4gfYbXhwosuEkDsQ3vPg5Yx4YakP8QHzD8bxLt/u0j8SPtH/x/EiVFwdxJP7i+c8Z88hUL+JH4i+O523a3aZ9JH6i/ZPHJ8o8OYcT8SePf86YJ8Z6Ej8Rf3I879PvLu0j8TPtHzw9U+fBMZyJP3j6c8Y8M9eD+Jn4g+P5gIY3aR+JN2iPhw0K4RQaxPHw54zZYDDEG8RxPJ/Q8R7tI/EW7SvPWlSqHEKLeOXZzxmzxWSVeIt45Xg+ouUt2kfiTdoXHjUpVTiDJvHCo58zZpPRCvEm8cLxfEbPO7SPxNu0X3nSptbKEbSJrzz5OWO2mW0l3ia+cjwf0vQG7SPxC9ovPLig2MIJXBBfePBzxrxguIX4BfGF4/mUruO0j8SvaB8HUC3d7+uC/f5zxrxiujif+LT7vX3B2kfil7SP/ZVL9/u8YL/+nDEvGS/OJz7tfu9esPaR+LXR9upZ/5q4337OmNdG5xN3PBNoPEj7SLxjtHutZ/uOmvbLz9Upe0bnq+l6OlPUxoNq90y8Z7R5qWf5nhL288+VIftG5yvhcjiTlMaDSvMB4l2jvdd6du9as378ubJ0MDrfmi0XM8vaeFAZdIB432jrpZ7V+5aon36ubh2MzrdE68XMUk5xSB00Ew9GOw/e73LBfvg5awej882+3/ELNmgknow2Hrzf//3l9/vv6Hyz73eY847sE4n/nHOcxjqReGTMyLVMo2w0+geXDS8yaHhA55gM5+yTDP8NbMzEtUyjbDT6J9ON/5U6ZnxCBxmM5ywUjP8b2JiBa5lG2WiJ2qhvWcUXc9wYsR5kcCNno77RejWalUuZSNlozdaN+tZdfDLFnRnLQQZ3clbqGq33yCbrvjMpG5Vw2aivLOObGUpfP0eled+tnJ16Ss43Pa9wX9l3ImWjmi5TdtVtfDRB7euXqHbvuZezVEfN+ahjm+6p+86jbCRex+ywjq8+p6/fIu2v3czZ6pqcr67t49fsO42ykXi8YOtMu2Btp12w2HDOWpfEYj3xeMHWnUbZSDxesHWmXbCu0y5YajxnrytSsZ54vGDbTqNsJL4w5wXrLHz4IU0XHkTaXxBaeHBBaGGxC0ILH14QX4hfsOw0ykbiK3O2WWfly8/oufIk0r5NZuVJm8zKZm0yK1+2ia/E2+w6jbKReGHOJusUPv2IloVHkfZNIoVHTSKF1ZpECp82iRfiTVadRtlIvDJni3Uq335Cx8qzSPsWicqzFonKbi0SlW9bxCvxFptOo2wkjjkbrIOPP6AhHkbaNwjgYYMAlmsQwMcN4og3WHQaZSPxB3OeWefB1+/T78HTSPsz7x88PfP+wXZn3j/4+kz8QfzMntMoG4k/mfPEOk8+f5t2Tx5H2p94/eTxiddP1jvx+snnJ+JP4ifWnEbZSPzFnEfWefH9u3R78TzS/sjbF8+PvH2x35G3L74/En8RP7LlNMpG4hvmPLDOhgJv0mzDi0j7Ay83vDjwcsOCB15uKHAgviF+YMlplI3Et8y5Z50tFd6j15Y3kfZ73m15s+fdlg33vNtSYU98S3zPjtMoG4nvmHPHOjtKvEWrHa8i7Xe82vFqx6sdK+54taPEjviO+I4Vp1E2Et8z55Z19tR4h0573kXab3mz592WN3t23PJmT40t8T3xLRtOo2wkfmDODescKPIGjQ68jLTf8OLAyw0vDiy54cWBIhviB+IbFpxG2Uj8yJwv1jlS5T59jryNtH/x/MjbF8+PbPni+ZEqL+JH4i/2m0bZSPzEnE/WOVHmNm1OvI60f/L4xOsnj0+s+eTxiTJP4ifiT9abRtlI/MycD9Y5U+cuXc68j7R/8PTM+wdPz+z54OmZOg/iZ+IPtptG2Ui8wZxYp0GhmzRpEIi0x8MGATxssCgeNiiEeIM4lptG2Ui8xZyVdVpUukePFolI+8qzFonKsxabVp61qFSJt4hXdptG2Ui8yZyFdZqUukWLJpFI+8KjJpHCoyarFh41KVWIN4kXVptG2Ui8zZwr67SpdYcObTKR9itP2mRWnrTZdeVJm1or8Tbxlc2mUTYSv2DOhXUuKHaDBheEIu0XHlwQWnhwwbILDy4othC/IL6w2DTKRuJXzJnu9/4Fq39FKtI+DiAVc7ZN9/uqJ35F/K+93+cFW+eScsOUvyQWaR/7i8WcddP9PuuJXxL/a+/3ccHWuabeKNWvyUWj7Udz9vXbNfXEr4nbahplI/GOOqZ1OhQcpHiHYDTafTRX9/VLR61X0z01balpatVMvKdMWbfpUnGM2j2S0Wjz0VzZ1889pV4J95WwnaYpRQeId61DlmUCJYco3SUajfYezT0vJVjrrdlkzVppmjLAAPG+ZcZ1l0jNESr3yUajrUdz7iRa6pULTJaojaapA2TiweD93rhghQPhaLTzaG7wfpd6bjD42+/3n8H7Hb9gdRPpaLTxaG7wfv8bvN9///b7/cf9RcpG9p5G2ciYkbI/57gj60Ti0fDBqJv4z6551E1MGak6zWhBxx1ZJxKPxk9G4cB/dk2kcGDISNFpRis67sg6kXi0RG0e1cLBUtJG06jcZ8ZIzWlGS9bTzqwTiUdrtm6elcLBWtNK0yjdZcRIyWlGa5bDHmCdSDwq4bL5gBLuK0XtNI3aPSaMVJxmtGg5lwHWicSjmi5TDqjpnlrVUtMo3mHASMFpRqvWc8msE4lH4nXMTPyasraaRvVr5ovUm2a0rHOJrBOJR+LTLljZn1+w8SLlplE21nUskXUi8Uh82gUr+/MLNl2k2jTKxsJOJbJOJB6JL8wZiV9QdmGxaTS4YLhIsWmUXXhwwaFE1onEI/GVOSPxNmVXNptGhzazRWpNo+zKkzZnElknEo/EC3NG4k3KFlabRosmo0VKTaNs4VGTI4msE4lH4pU5I/EWZSu7TaNHi8kilaZRtvKsxYlE1onEI3HMGYk3KIvlptGkwWCRQtMoi4cNDiSyTiQeiT+YMxI/U/bBdtPocmauSJ1plH3w9Mx5RNaJxCPxJ3NG4ifKPllvGm1OjBUpM42yTx6fOI7IOpF4JP5izkj8SNkX+02jz5GpIlWmUfbF8yOnEVknEo/EN8wZiR8ou2HBaTQ6MFSkyDTKbnhx4DAi60TikfiWOSPxPWW3bDiNTntmitSYRtktb/acRWSdSDwS3zFnJL6j7I4Vp9Fqx0iREtMou+PVjqOIrBOJR+J75ozEt5Tds+M0em2ZKFJhGmX3vNtyEpF1IvFI/MCckfiGsgeWnEazDQNFCkyj7IGXGw4isk4kHokfmTMSf1H2yJbT6PZinsj30yh75O2Lc4isE4lH4ifmjMSflD2x5jTaPRkn8vk0yp54/eQYIutE4pH4mTkj8Qdlz+w5jX4Ppol8PY2yZ94/OIXIOpF4JN5gzkgcZRssOo2GGCby8TTKNgjgECLrROKReIs5I/FK2RabTqNjZZbIt9Mo2yJROYPIOpF4JN5kzki8ULbJqtNoWRgl8uk0yjaJFI4gsk4kHom3mTMSXynbZtdp9FyZJPLlNMq2yaycQGSdSDwSv2DOSHyh7AXLTqPpwiCRD6dR9oLQwgFE1onEI/Er5ozEY1/bTqPr33q/r3b2j6wTiUfil8wZice+1p1G27/1fp/9rB9ZJxKPxK+ZMxJX9pp9p9HXFJGvplH2mpztI+tE4pF4hzmjmla2w8LT1L6GiHw0jbIdNWf5qG6TiUfiPeaMSljZnrrwPKWvGSLfTKNsT8nZPSrLDBCPxLvMGa1ZZbvKwhPdmdEn0yjbteasHq27jBCPxPvMGS1RZfvKyUx0Y0RfTKNs35KzeVTOe4B4JB6YMxrtW89mnr/8fpeuFo8ceCQeiSfmjEb7Op1p/vL7/d8fu19jTqNsZMxI2Ug8Eo+MGSkbiWfykXhkn2mUTfznVKZsIh2JZ+ZMhhvLZ/KReGSfaZQN/OfUAGUD4Uh8gEGD8c4+yOQj8cg+0yjbt/w7yZiRsn2ykfgIk/YtOZUjX2TykXhU15lH2a71/3QYM1K2SzQSH2LUrjWndOSTTD4Sj8o2Eynbs97vzAuWjMTHmLWn5NSOfJPJR+JRmXIiZTvK/U68YMFIfJBhO2pO8chHmXwkHtUx51H2Wr3feRcsF4mPMu01OdUjX2XykXhkzmmUveR+p12wWCQ+zLiXxP7/gg9c77QLlorEx5n3itT/X/CB210YM1L2glAkfoOBLwgtNIh8mMlH4pE5p1G2zeWujBkp2yYTid9h4jaZlQ6RLzP5SDwy5zTKNrnbwpiRsk0ikfgtRm4SKbSIfJrJR+KROadRtsXVVsaMlG2RiMTvMXOLRKVH5NtMPhKPzDmNsg1uFmNGyjYIROI3GbpBAE0iH2fykXhkzmmUPXOxD8aMlD3zPhK/y9Rn3j/oEvk6k4/EI3NOo+yJe30yZqTsideR+G3GPvH6SZvI55l8JB6Zcxplj1zrizEjZY+8jcTvM/eRty/6RL7P5CPxyJzTKHvgVjeMGSl74GUk/gaDH3i5oVGkQCYfiUfmnEbZPZe6ZcxI2T3vIvF3mHzPuy2dIhUy+Ug8Muc0yu640x1jRsrueBWJv8XoO17taBUpkclH4pE5p1F2y5XuGTNSdsubSPw9Zt/yZk+vSI1MPhKPzDmNshtu9MCYkbIbXkTibzL8hhcHmkWKZPKReGTOaZR9caFHxoyUffE8En+X6V88P9ItUiWTj8Qjc06j7JP7PDFmpOyTx5H424z/5PGJdpEymXwkHplzGmUfXOeZMSNlHzyNxN9n/gdPz/SL1MnkI/HInNMoi9tsMGakLB5G4h+wAB42aBgplMlH4pE5p1G2cpktxoyUrTyLxD9hg8qzFh0jlTL5SDwy5zTKFu6yyZiRsoVHkfhHrFB41KRlpFQmH4lH5pxG2ZWrbDNmpOzKk0j8M3ZYedKmZ6RWJh+JR+acRtmFm7xgzEjZhQeR+IcssfDggqaRYpl8JB6Zcxpl0/3ev2C/R+KfskU8IF0j1TL5SDwy5zTKpvu9fcF+jcQ/Zo14PtpGymXykXhkzmmUdY3XjBkp67dI/HP28Ns1fSP1MvlIPDLnNLWqW+wwZlSr+iWq6RnqHn7p0Diq9QbIR+KROacpRV1ijzGjUtTPUQnPUfbwc4/OUak3Qj4Sj8w5zVrTHXYZM1pr+jEqA0wyejZaR2u9IfKReGTOaZaSrrDPmNFS0k9RHWCS0aPROyqHPUI+Eo/MOc3g/d64YD9EBphk9GQ0jxx3Jh+JR+acZvB+xy/Y/0b6zzJ6MLpHjjtzPpG6kbKR+F/LeU+j7DSOMXN/kbqRsol0NNp39ACHG7uXZDg3aHRfxxj994cuWDga7Tt6guOdXUwwnhszuq9jjJak+4tUjlTuk41G+44e4Y3W9WKCG7kho/vWU8zWaLm9AbVypnSXaDTad/QM7/QuFxPcyY0Y3bcc4oCSXYuOKJUHqN0jGY32HT3EW81L0b5buQGj+5Y9BtRwqTqgpAco3iEYjfYdPcV73WvVnnu5bHTfukcmXctmNZ6pfk0uGu07eow32yt77WYuGt3XHtEjrm4kHyl/SSzSNvZ1jPEctZ92wWLDucS6cV9rROI/v2CpSNfY1zHGg9R+2gVLjecC28Z9bRGJ//yChSJNFx5ccIwLDy5ov/AgUvaC0MKDC0KRZRceXLBEJL747QXLRHquPGlzjCtP2rRfeRIp2yaz8qRNJrLrypM2O0Tiq59esEikZeFRk2MsPGrSvvAoUrZJpPCoSSSyauFRkxUi8eKXFywR6Vh51uIYK89atK88i5Rtkag8a5GIbFp51mKDSLz64QULRBriYYNjxMMG7fEwUrZBAA8bBCKL4mGDBSJxfnfB3kf6PXh65hgfPD3T/sHTSNkz7x88PfM+sueDp2fmj8QffnbBXkfaPXl84hifPD7R/snjSNkTr588PvE6suaTxyfGj8SffnXB3ka6vXh+5BhfPD/S/sXzSNkjb188P/I2suWL50emj8RffnTBXkaabXhx4Bg3vDjQfsOLSNkDLze8OPAysuSGFweGj8Q3fnPB3kV6bXmz5xi3vNnTfsubSNk977a82fMusuOWN3tmj8S3fnLBXkVa7Xi14xh3vNrRfserSNkdr3a82vEqsuKOVztGj8R3fnHB3kQ67Xm35Rj3vNvSfs+7SNktb/a82/ImsuGed1smj8T3fnDBXkQaHXi54RgPvNzQ/sDLSNkNLw683PAisuCBlxsGj8QPvn/Bnkf6HHn74hiPvH3R/sjbSNkXz4+8ffE8st+Rty/mjsSPvn7BHkfanHj95BhPvH7S/sTrSNknj0+8fvI4st6J10/GjsRPvn3Bnka6nHn/4BjPvH/Q/sz7SNkHT8+8f/A0st2Z9w+mjsTPvnzBHkaaNAjgGBsE0L5BIFIWDxsE8DCyXIMAho7EG757wZ5FerRIVI6xRaLSvkUiUrbyrEWi8iyyW4tEZeZIvOWrF+xRpEWTSOEYm0QK7ZtEImULj5pECo8iqzWJFEaOxJu+ecGeRDq0yawcY5vMSvs2mUjZlSdtMitPIpu1yaxMHIm3ffGCPYg0uCC0cIwXhBbaXxCKlF14cEFo4UFksQtCCwNH4he+d8F+j9S/IpXu93W82l+RipSN9yY1635f+5o3Er/ytQv2a6T8JbF0v8/z1f6SWKRsvDexWff73Ne4kfilb12w3yLVr8k5xmty2l+Ti/Zlr43msNU1OdNG4te+dMF+iRTvqDnH2FFztXtPzWXbqj2jucpSHTVn2Kime75zwX6O1O4puXqKXSVXmveV3IBX0b7RXGGnnpIza1TCfV+5YD9GSnetuXKIwZorSwdrbsSjZjKaW1mpa80ZNSpFg29csJ8ilfuW3HqG0ZKrWwel84BaMhvNLWzUt+RMGtWqwRcu2A+RwsHg/S6nbO1A82j03ibf77KvQSNlg/kX7H8jdZPB+/139Fx0j0bvbfL9/m/y/Y5f8CjtI/0j9zeNsj/neCLxyDrR6AWPDlj+0M0BxszMOY2yyWhudJF/nU8inlknGf07ePSvwPXPZBxhygEGnUbZYDQ3usm/gxcsPsA6weg/opeCfupbSrrBvjrjkDroPMr2jeZGV1nqOaE+8RFlmWTJDV3wWtCPXWvNeoN9a71RZdCJlO0azY3ustZzRF3iQ9aayZobueBS0M89pWi5wb5Sb1QpOpGyPaO50WVKPWfUIz6mFO0ruYELLrmBC65Vy9Zdtd6oWnUeZTtGc6Pb1HoOqUN8UK3aU3P5gmsuX7Cyde0O9UYpO42y10Zzo+uo55SuiY9S9ppcvGC5eMHKxgtWbpiy0yh7SSzmrBP3US5esPgwZS+JxQsWixesbLxg1cYpO42yV6RizjpxIdXiBYuPU/aKVLxgqYUHF5Rd2PuCYjcoO42yF4QWHlywzsKDC4otHNQF8RuUvSC06F+w0MqTNmVX9m5T6w5lp1G2TWblSZt1Vp60qbVyUm3idyjbJrPqXrBM4VGTsoW9m5S6RdlplG0SKTxqsk7hUZNShaNqEr9F2SaRonfBIpVnLcpW9m5R6R5lp1G2RaLyrMU6lWctKlXOqkX8HmVbJKrOBUvgYYOy2LtBoZuUnUbZBgE8bLAOHjYohMNqEL9J2QYBri9Y4MHTM2Uf7H2mzl3KTqPsmfcPnp5Z58HTM3UenNaZ+F3Knnn/cHnB3j95fKLsk71PlLlN2WmUPfH6yeMT6zx5fKLMk+M6Eb9N2ROvn64u2OsXz4+UfbH3kSr3KTuNskfevnh+ZJ0Xz49UeXFeR+L3KXvk7cvFBXu74cWBshv2PlDkDcpOo+yBlxteHFhnw4sDRTYc2IH4G5Q98HKjfcFebnmzp+yWvffUeIey0yi7592WN3vW2fJmT40tJ7Yn/g5l97zbal6wdzte7Si7Y+8dJd6i7DTK7ni149WOdXa82lFix5HtiL9F2R2vdloX7NWed1vK7tl7S4X3KDuNslve7Hm3ZZ0977ZU2HNmW+LvUXbLm73GBXtz4OWGsgf23lDgTcpOo+yGFwdebljnwMsNBQ4c2ob4m5Td8OLgfMFeHHn7ouyRvV98/y5lp1H2xfMjb1+sc+Tti++PnNqL+LuUffH86HTBnp94/aTsib2ffP42ZadR9snjE6+frHPi9ZPPTxzbk/jblH3y+OR4wR6fef+g7Jm9H3z9PmWnUfbB0zPvH6xz5v2Dr8+c24P4+5R98PTscMGeNgigbIO98fEHlJ1GWTxsEMA6DQL4uMHBIf4BZfGwYX/BHrZIVMq22Lvy7SeUnUbZyrMWico6LRKVb1ucXCX+CWUrz1p2F+xZk0ihbJO9C59+RNlplC08ahIprNMkUvi0ydEV4h9RtvCoaXvBHrXJrJRts/fKl59RdhplV560yays0yaz8mWbs1uJf0bZlSdtmwv25ILQQtkL9l748EPKTqPswoMLQgvrXBBa+PCCw1uIf0jZhQcXXhfswRWpdL+vC/bdp5SdRtlYWCrd72tN311xerPu99XO71eeF+z3S2Lpfp8X7LOPKTuNsrGuWLrf554+u+T4Zt3vs59fLz0u2K/X5JS9dtj7Y8pOM1pWzjrX5Hx1zfmJf05Zv11zwX7rqDllO3ZrT6DsNKNVa65u01NzPuqo51fTM9SqfumoF+yXnpKrVbs2W0+h7DSjRUuuLNNXcr7pKedXwnOUon7uKRfs5641V4oGz6UnUXaa0ZprrtxgMFpv9JxHrTX92LVesB/7Bu93vWBfzKHsNKMll1y9wWC03uT7XZv6qW+5YD8Fg/e7XLAPJlF2mtGKg/e7bOuDYPL9Ll39EPwz2nfwfv+dfL/zL9j/JoP3+89ovcn3O/jHAP333/8B82uEVNBYidQAAAAASUVORK5CYII=);
}
<body>
<header>
<h1>All posts</h1>
<p>That's it</p>
</header>
<nav class="flexRow">
Home |
Blog |
New
</nav>
<main>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
<article>
<h2>This is a post</h2>
<hr>
<p>This is a preview of the post ...</p>
</article>
</main>
</body>
You may want to take a look at this https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
Most (all?) modern browsers use asynchronous rendering for scrolling. So the events dont arrive like you would think they would.
I'm using this javascript to make a div with 3 tabs; http://www.barelyfitz.com/projects/tabber/ (maybe it's easier to see the css code there instead of copying it all here?)
Anyway, I want to use a image inside of the tab instead of the H2 heading, which it uses by default. Is that possible?
<div class="tabber">
<div class="tabbertab">
<h2>Tab 1 <img src doesn't work here></h2>
<p>Tab 1 content.</p>
</div>
<div class="tabbertab">
<h2>Tab 2</h2>
<p>Tab 2 content.</p>
</div>
<div class="tabbertab">
<h2>Tab 3</h2>
<p>Tab 3 content.</p>
</div>
Thanks in advance!
<div class="tabber">
<div class="tabbertab">
<h2>Tab 1 <img src="http://slembassyusa.org/downloads/Flag_of_Sri_Lanka.png" width=100 height=20 /></h2>
<p>Tab 1 content.</p>
</div>
<div class="tabbertab">
<h2>Tab 2</h2>
<p>Tab 2 content.</p>
</div>
<div class="tabbertab">
<h2>Tab 3</h2>
<p>Tab 3 content.</p>
</div>
DEMO
You could use a tiny bit of additional js/jQuery code, something in this direction maybe:
$(".tabbernav a").each(function(i){
var $img = $("div.tabbertab:nth-child("+(i+2)+") h2 img")
if($img.length > 0) $(this).html($img);
});
that will grab the image from your h2 tag and place it into the tab instead of the heading text.
Demo
Hope this helps you in the right direction!