my question is related to this question this question.
This is my fiddle I have four videos on my page and I want each video to play only when the user scroll down to it.
I set the videos on my page at autoplay. So, they all start playing at the same time. Is there a way, they play only when I scroll to that part of the page. This is my page
HTML
<div id="tv_container">
<video width="245" height="240" autoplay loop id="vid1">
<source src="../snapchat/wp-content/uploads/2016/02/Snapchat%20Video%20main.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
CSS
#tv_container {
width: 360px;
height: 800px;
position: relative;
}
#tv_container:after{
content: '';
display: block;
background: url('http://mediacentral.ie/snapchat/wp-content/uploads/2016/02/Cell.jpg') no-repeat;
width: 100%;
height: 100%;
left: 0px;
JS
var bindScroll = function(ele, evt, fcn) {
ele[window.addEventListener ? 'addEventListener' : 'attachEvent']( window.addEventListener ? evt : 'on' + evt, fcn, false);
}
var scrollPos = function() {
var doc = document.documentElement;
return {
'left': (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0),
'top': (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0)
};
}
var playerOffset = document.getElementById('vid1').offsetTop;
var scrollPlayed = false;
var playerInView = function() {
var diff = playerOffset - scrollPos().top;
var adjust = window.innerHeight > (480/2) ? window.innerHeight : 100;
return diff > -100 && diff < adjust;
}
var checker = null;
bindScroll(window, 'scroll', function(e) {
clearTimeout(checker);
if(!scrollPlayed && playerInView()) {
checker = setTimeout(function() {
vid1.play(true);
scrollPlayed = true;
}, 100);
}
});
Update
This demo can clearly show that each of the 4 videos will start playing once scrolled into view. The best way to test it is to wait for about 10 seconds to pass before you scroll on to the next one and you'll see the time lag (which you wouldn't see if the videos were playing simultaneously.
My multiple video version JS was too slow, fortunately I found one a jQuery solution that was astonishingly 10 times faster (first time I've seen a JQ have a significant speed advantage over JS). It wasn't just my JS, but a couple of others I've tried as well.
Snippet
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>35486236</title>
<style>
.tv_container { width: 360px; height: 800px; position: relative; margin-bottom: 200px; }
.tv_container:after { content: ''; display: block; background: url('http://mediacentral.ie/snapchat/wp-content/uploads/2016/02/Cell.jpg') no-repeat; width: 100%; height: 100%; }
.tv_container video { position: absolute; left: 40px; z-index: 5; }
video { width: 240px; height: 600px; }
</style>
</head>
<body>
<section id="zone0">
<div class="tv_container">
<video width="245" height="240" loop id="vid0" class="vid">
<source src="https://glpjt.s3.amazonaws.com/so/av/vs12s3.mp4" type="video/mp4">
</video>
</div>
</section>
<section id="zone1">
<div class="tv_container">
<video width="245" height="240" loop id="vid1" class="vid">
<source src="https://glpjt.s3.amazonaws.com/so/av/vs12s3.mp4" type="video/mp4">
</video>
</div>
</section>
<section id="zone2">
<div class="tv_container">
<video width="245" height="240" loop id="vid2" class="vid">
<source src="https://glpjt.s3.amazonaws.com/so/av/vs12s3.mp4" type="video/mp4">
</video>
</div>
</section>
<section id="zone3">
<div class="tv_container">
<video width="245" height="240" loop id="vid3" class="vid">
<source src="https://glpjt.s3.amazonaws.com/so/av/vs12s3.mp4" type="video/mp4">
</video>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
// https://stackoverflow.com/a/26508106/2813224
<script>
$(document).ready(function() {
var media = $('video').not("[autoplay='autoplay']");
var tolerancePixel = 40;
function checkMedia(){
var scrollTop = $(window).scrollTop() + tolerancePixel;
var scrollBottom = $(window).scrollTop() + $(window).height() - tolerancePixel;
media.each(function(index, el) {
var yTopMedia = $(this).offset().top;
var yBottomMedia = $(this).height() + yTopMedia;
if(scrollTop < yBottomMedia && scrollBottom > yTopMedia){
$(this).get(0).play();
} else {
$(this).get(0).pause();
}
});
}
$(document).on('scroll', checkMedia);
});
</script>
</body>
</html>
Here's a demo I got and adapted from a JWPlayer demo. works by binding an event listener to scroll event. It'll measure the player's offset from window and compare it vs. scroll position.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Scroll Video in View</title>
<style>
#vid1 { margin: 20px auto; display: block; }
</style>
</head>
<body>
<main class="container">
<h2>Scroll into video viewport</h2>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis enim non lorem eleifend condimentum. Praesent quis fermentum orci, eu vestibulum dolor. Vestibulum nec tempor purus, at hendrerit quam. Donec ex quam, fermentum eu dui at, varius convallis justo. Sed dictum laoreet dui, id congue nisl fermentum quis. Sed egestas tincidunt egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam nec venenatis ligula, ac suscipit diam. Ut nec odio diam. Integer vitae arcu hendrerit, venenatis ex nec, fermentum massa. Duis iaculis nulla ut lorem porta vehicula. Cras venenatis arcu a neque vestibulum mollis in eget neque. Mauris egestas felis sed augue lacinia placerat. Morbi vel enim at justo ultrices cursus ut vitae tortor. Sed scelerisque massa a elit accumsan, eget aliquam ante imperdiet. Proin ac magna tempor, fringilla ante mattis, bibendum justo.</p>
<p>
Sed laoreet ex hendrerit, pellentesque massa non, porta velit. Pellentesque eleifend nunc eget aliquam vehicula. Donec libero neque, rhoncus non imperdiet ac, ornare eu velit. Nullam fringilla venenatis nulla, non faucibus nisl vulputate id. Integer sit amet lacinia eros. Donec eros tortor, blandit non tempor at, commodo non turpis. Sed accumsan sed lacus ac sagittis. Donec eget feugiat tortor. Vestibulum vulputate turpis vel augue tincidunt facilisis. Nullam lectus leo, laoreet ut consectetur sit amet, vestibulum bibendum lectus. Sed sed ipsum sed urna malesuada finibus. Ut egestas ullamcorper molestie. Aenean ultricies mi felis, non fringilla augue luctus quis. Suspendisse odio metus, semper sit amet ullamcorper vitae, pellentesque eu diam.</p>
<p>
In luctus augue at aliquam suscipit. Aliquam a gravida massa. Sed rhoncus lacus ac mattis efficitur. Pellentesque sit amet ipsum sit amet eros venenatis consectetur non vel ex. Sed vitae rhoncus augue. Proin molestie mattis nibh, sed tincidunt orci viverra ut. Curabitur finibus tempus blandit. Donec vitae sagittis urna, in condimentum turpis. Cras elit odio, tempor sed pretium sit amet, posuere at arcu. Integer urna mi, pulvinar ut risus id, iaculis rhoncus turpis. Nam faucibus, enim nec faucibus pellentesque, sem lectus luctus purus, vitae ultricies dolor magna eu ex. In hac habitasse platea dictumst.</p>
<p>
Duis sollicitudin accumsan quam, eget ultricies metus consectetur vel. Sed sollicitudin elementum felis. Sed laoreet vehicula massa sed ultrices. Nullam hendrerit elit ac egestas bibendum. Mauris eleifend posuere vulputate. Nullam in arcu eu dui rutrum scelerisque id mattis urna. Aliquam ut tellus urna. Ut sit amet tellus ut justo hendrerit scelerisque eget at leo. Nullam facilisis scelerisque ultrices.</p>
<p>
Etiam egestas tincidunt eros, eu dictum odio molestie quis. Curabitur rhoncus lacinia felis, eu imperdiet risus consequat ut. Nulla egestas massa vulputate justo molestie, a ultricies ex euismod. Curabitur eleifend congue turpis non ornare. Fusce lacinia blandit ligula, tristique dapibus tellus sodales consectetur. Cras dolor nisl, condimentum ac nisl non, hendrerit venenatis dui. Donec sed libero in ante auctor aliquam eu posuere tellus. Vestibulum eget laoreet ipsum. Suspendisse dictum, sapien sed semper scelerisque, tellus massa lobortis ante, in luctus enim sapien ac diam.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis enim non lorem eleifend condimentum. Praesent quis fermentum orci, eu vestibulum dolor. Vestibulum nec tempor purus, at hendrerit quam. Donec ex quam, fermentum eu dui at, varius convallis justo. Sed dictum laoreet dui, id congue nisl fermentum quis. Sed egestas tincidunt egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam nec venenatis ligula, ac suscipit diam. Ut nec odio diam. Integer vitae arcu hendrerit, venenatis ex nec, fermentum massa. Duis iaculis nulla ut lorem porta vehicula. Cras venenatis arcu a neque vestibulum mollis in eget neque. Mauris egestas felis sed augue lacinia placerat. Morbi vel enim at justo ultrices cursus ut vitae tortor. Sed scelerisque massa a elit accumsan, eget aliquam ante imperdiet. Proin ac magna tempor, fringilla ante mattis, bibendum justo.</p>
<p>
Sed laoreet ex hendrerit, pellentesque massa non, porta velit. Pellentesque eleifend nunc eget aliquam vehicula. Donec libero neque, rhoncus non imperdiet ac, ornare eu velit. Nullam fringilla venenatis nulla, non faucibus nisl vulputate id. Integer sit amet lacinia eros. Donec eros tortor, blandit non tempor at, commodo non turpis. Sed accumsan sed lacus ac sagittis. Donec eget feugiat tortor. Vestibulum vulputate turpis vel augue tincidunt facilisis. Nullam lectus leo, laoreet ut consectetur sit amet, vestibulum bibendum lectus. Sed sed ipsum sed urna malesuada finibus. Ut egestas ullamcorper molestie. Aenean ultricies mi felis, non fringilla augue luctus quis. Suspendisse odio metus, semper sit amet ullamcorper vitae, pellentesque eu diam.</p>
<p>
In luctus augue at aliquam suscipit. Aliquam a gravida massa. Sed rhoncus lacus ac mattis efficitur. Pellentesque sit amet ipsum sit amet eros venenatis consectetur non vel ex. Sed vitae rhoncus augue. Proin molestie mattis nibh, sed tincidunt orci viverra ut. Curabitur finibus tempus blandit. Donec vitae sagittis urna, in condimentum turpis. Cras elit odio, tempor sed pretium sit amet, posuere at arcu. Integer urna mi, pulvinar ut risus id, iaculis rhoncus turpis. Nam faucibus, enim nec faucibus pellentesque, sem lectus luctus purus, vitae ultricies dolor magna eu ex. In hac habitasse platea dictumst.</p>
<p>
Duis sollicitudin accumsan quam, eget ultricies metus consectetur vel. Sed sollicitudin elementum felis. Sed laoreet vehicula massa sed ultrices. Nullam hendrerit elit ac egestas bibendum. Mauris eleifend posuere vulputate. Nullam in arcu eu dui rutrum scelerisque id mattis urna. Aliquam ut tellus urna. Ut sit amet tellus ut justo hendrerit scelerisque eget at leo. Nullam facilisis scelerisque ultrices.</p>
<p>
Etiam egestas tincidunt eros, eu dictum odio molestie quis. Curabitur rhoncus lacinia felis, eu imperdiet risus consequat ut. Nulla egestas massa vulputate justo molestie, a ultricies ex euismod. Curabitur eleifend congue turpis non ornare. Fusce lacinia blandit ligula, tristique dapibus tellus sodales consectetur. Cras dolor nisl, condimentum ac nisl non, hendrerit venenatis dui. Donec sed libero in ante auctor aliquam eu posuere tellus. Vestibulum eget laoreet ipsum. Suspendisse dictum, sapien sed semper scelerisque, tellus massa lobortis ante, in luctus enim sapien ac diam.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis enim non lorem eleifend condimentum. Praesent quis fermentum orci, eu vestibulum dolor. Vestibulum nec tempor purus, at hendrerit quam. Donec ex quam, fermentum eu dui at, varius convallis justo. Sed dictum laoreet dui, id congue nisl fermentum quis. Sed egestas tincidunt egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam nec venenatis ligula, ac suscipit diam. Ut nec odio diam. Integer vitae arcu hendrerit, venenatis ex nec, fermentum massa. Duis iaculis nulla ut lorem porta vehicula. Cras venenatis arcu a neque vestibulum mollis in eget neque. Mauris egestas felis sed augue lacinia placerat. Morbi vel enim at justo ultrices cursus ut vitae tortor. Sed scelerisque massa a elit accumsan, eget aliquam ante imperdiet. Proin ac magna tempor, fringilla ante mattis, bibendum justo.</p>
<p>
Sed laoreet ex hendrerit, pellentesque massa non, porta velit. Pellentesque eleifend nunc eget aliquam vehicula. Donec libero neque, rhoncus non imperdiet ac, ornare eu velit. Nullam fringilla venenatis nulla, non faucibus nisl vulputate id. Integer sit amet lacinia eros. Donec eros tortor, blandit non tempor at, commodo non turpis. Sed accumsan sed lacus ac sagittis. Donec eget feugiat tortor. Vestibulum vulputate turpis vel augue tincidunt facilisis. Nullam lectus leo, laoreet ut consectetur sit amet, vestibulum bibendum lectus. Sed sed ipsum sed urna malesuada finibus. Ut egestas ullamcorper molestie. Aenean ultricies mi felis, non fringilla augue luctus quis. Suspendisse odio metus, semper sit amet ullamcorper vitae, pellentesque eu diam.</p>
<p>
In luctus augue at aliquam suscipit. Aliquam a gravida massa. Sed rhoncus lacus ac mattis efficitur. Pellentesque sit amet ipsum sit amet eros venenatis consectetur non vel ex. Sed vitae rhoncus augue. Proin molestie mattis nibh, sed tincidunt orci viverra ut. Curabitur finibus tempus blandit. Donec vitae sagittis urna, in condimentum turpis. Cras elit odio, tempor sed pretium sit amet, posuere at arcu. Integer urna mi, pulvinar ut risus id, iaculis rhoncus turpis. Nam faucibus, enim nec faucibus pellentesque, sem lectus luctus purus, vitae ultricies dolor magna eu ex. In hac habitasse platea dictumst.</p>
<p>
Duis sollicitudin accumsan quam, eget ultricies metus consectetur vel. Sed sollicitudin elementum felis. Sed laoreet vehicula massa sed ultrices. Nullam hendrerit elit ac egestas bibendum. Mauris eleifend posuere vulputate. Nullam in arcu eu dui rutrum scelerisque id mattis urna. Aliquam ut tellus urna. Ut sit amet tellus ut justo hendrerit scelerisque eget at leo. Nullam facilisis scelerisque ultrices.</p>
<p>
Etiam egestas tincidunt eros, eu dictum odio molestie quis. Curabitur rhoncus lacinia felis, eu imperdiet risus consequat ut. Nulla egestas massa vulputate justo molestie, a ultricies ex euismod. Curabitur eleifend congue turpis non ornare. Fusce lacinia blandit ligula, tristique dapibus tellus sodales consectetur. Cras dolor nisl, condimentum ac nisl non, hendrerit venenatis dui. Donec sed libero in ante auctor aliquam eu posuere tellus. Vestibulum eget laoreet ipsum. Suspendisse dictum, sapien sed semper scelerisque, tellus massa lobortis ante, in luctus enim sapien ac diam.</p>
<video id="vid1" src="https://glpjt.s3.amazonaws.com/so/av/vs12s3.mp4" controls width="640" height="auto"></video>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis enim non lorem eleifend condimentum. Praesent quis fermentum orci, eu vestibulum dolor. Vestibulum nec tempor purus, at hendrerit quam. Donec ex quam, fermentum eu dui at, varius convallis justo. Sed dictum laoreet dui, id congue nisl fermentum quis. Sed egestas tincidunt egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam nec venenatis ligula, ac suscipit diam. Ut nec odio diam. Integer vitae arcu hendrerit, venenatis ex nec, fermentum massa. Duis iaculis nulla ut lorem porta vehicula. Cras venenatis arcu a neque vestibulum mollis in eget neque. Mauris egestas felis sed augue lacinia placerat. Morbi vel enim at justo ultrices cursus ut vitae tortor. Sed scelerisque massa a elit accumsan, eget aliquam ante imperdiet. Proin ac magna tempor, fringilla ante mattis, bibendum justo.</p>
<p>
Sed laoreet ex hendrerit, pellentesque massa non, porta velit. Pellentesque eleifend nunc eget aliquam vehicula. Donec libero neque, rhoncus non imperdiet ac, ornare eu velit. Nullam fringilla venenatis nulla, non faucibus nisl vulputate id. Integer sit amet lacinia eros. Donec eros tortor, blandit non tempor at, commodo non turpis. Sed accumsan sed lacus ac sagittis. Donec eget feugiat tortor. Vestibulum vulputate turpis vel augue tincidunt facilisis. Nullam lectus leo, laoreet ut consectetur sit amet, vestibulum bibendum lectus. Sed sed ipsum sed urna malesuada finibus. Ut egestas ullamcorper molestie. Aenean ultricies mi felis, non fringilla augue luctus quis. Suspendisse odio metus, semper sit amet ullamcorper vitae, pellentesque eu diam.</p>
<p>
In luctus augue at aliquam suscipit. Aliquam a gravida massa. Sed rhoncus lacus ac mattis efficitur. Pellentesque sit amet ipsum sit amet eros venenatis consectetur non vel ex. Sed vitae rhoncus augue. Proin molestie mattis nibh, sed tincidunt orci viverra ut. Curabitur finibus tempus blandit. Donec vitae sagittis urna, in condimentum turpis. Cras elit odio, tempor sed pretium sit amet, posuere at arcu. Integer urna mi, pulvinar ut risus id, iaculis rhoncus turpis. Nam faucibus, enim nec faucibus pellentesque, sem lectus luctus purus, vitae ultricies dolor magna eu ex. In hac habitasse platea dictumst.</p>
<p>
Duis sollicitudin accumsan quam, eget ultricies metus consectetur vel. Sed sollicitudin elementum felis. Sed laoreet vehicula massa sed ultrices. Nullam hendrerit elit ac egestas bibendum. Mauris eleifend posuere vulputate. Nullam in arcu eu dui rutrum scelerisque id mattis urna. Aliquam ut tellus urna. Ut sit amet tellus ut justo hendrerit scelerisque eget at leo. Nullam facilisis scelerisque ultrices.</p>
<p>
Etiam egestas tincidunt eros, eu dictum odio molestie quis. Curabitur rhoncus lacinia felis, eu imperdiet risus consequat ut. Nulla egestas massa vulputate justo molestie, a ultricies ex euismod. Curabitur eleifend congue turpis non ornare. Fusce lacinia blandit ligula, tristique dapibus tellus sodales consectetur. Cras dolor nisl, condimentum ac nisl non, hendrerit venenatis dui. Donec sed libero in ante auctor aliquam eu posuere tellus. Vestibulum eget laoreet ipsum. Suspendisse dictum, sapien sed semper scelerisque, tellus massa lobortis ante, in luctus enim sapien ac diam.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis enim non lorem eleifend condimentum. Praesent quis fermentum orci, eu vestibulum dolor. Vestibulum nec tempor purus, at hendrerit quam. Donec ex quam, fermentum eu dui at, varius convallis justo. Sed dictum laoreet dui, id congue nisl fermentum quis. Sed egestas tincidunt egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam nec venenatis ligula, ac suscipit diam. Ut nec odio diam. Integer vitae arcu hendrerit, venenatis ex nec, fermentum massa. Duis iaculis nulla ut lorem porta vehicula. Cras venenatis arcu a neque vestibulum mollis in eget neque. Mauris egestas felis sed augue lacinia placerat. Morbi vel enim at justo ultrices cursus ut vitae tortor. Sed scelerisque massa a elit accumsan, eget aliquam ante imperdiet. Proin ac magna tempor, fringilla ante mattis, bibendum justo.</p>
<p>
Sed laoreet ex hendrerit, pellentesque massa non, porta velit. Pellentesque eleifend nunc eget aliquam vehicula. Donec libero neque, rhoncus non imperdiet ac, ornare eu velit. Nullam fringilla venenatis nulla, non faucibus nisl vulputate id. Integer sit amet lacinia eros. Donec eros tortor, blandit non tempor at, commodo non turpis. Sed accumsan sed lacus ac sagittis. Donec eget feugiat tortor. Vestibulum vulputate turpis vel augue tincidunt facilisis. Nullam lectus leo, laoreet ut consectetur sit amet, vestibulum bibendum lectus. Sed sed ipsum sed urna malesuada finibus. Ut egestas ullamcorper molestie. Aenean ultricies mi felis, non fringilla augue luctus quis. Suspendisse odio metus, semper sit amet ullamcorper vitae, pellentesque eu diam.</p>
<p>
In luctus augue at aliquam suscipit. Aliquam a gravida massa. Sed rhoncus lacus ac mattis efficitur. Pellentesque sit amet ipsum sit amet eros venenatis consectetur non vel ex. Sed vitae rhoncus augue. Proin molestie mattis nibh, sed tincidunt orci viverra ut. Curabitur finibus tempus blandit. Donec vitae sagittis urna, in condimentum turpis. Cras elit odio, tempor sed pretium sit amet, posuere at arcu. Integer urna mi, pulvinar ut risus id, iaculis rhoncus turpis. Nam faucibus, enim nec faucibus pellentesque, sem lectus luctus purus, vitae ultricies dolor magna eu ex. In hac habitasse platea dictumst.</p>
<p>
Duis sollicitudin accumsan quam, eget ultricies metus consectetur vel. Sed sollicitudin elementum felis. Sed laoreet vehicula massa sed ultrices. Nullam hendrerit elit ac egestas bibendum. Mauris eleifend posuere vulputate. Nullam in arcu eu dui rutrum scelerisque id mattis urna. Aliquam ut tellus urna. Ut sit amet tellus ut justo hendrerit scelerisque eget at leo. Nullam facilisis scelerisque ultrices.</p>
<p>
Etiam egestas tincidunt eros, eu dictum odio molestie quis. Curabitur rhoncus lacinia felis, eu imperdiet risus consequat ut. Nulla egestas massa vulputate justo molestie, a ultricies ex euismod. Curabitur eleifend congue turpis non ornare. Fusce lacinia blandit ligula, tristique dapibus tellus sodales consectetur. Cras dolor nisl, condimentum ac nisl non, hendrerit venenatis dui. Donec sed libero in ante auctor aliquam eu posuere tellus. Vestibulum eget laoreet ipsum. Suspendisse dictum, sapien sed semper scelerisque, tellus massa lobortis ante, in luctus enim sapien ac diam.</p>
</section>
</main>
<script>
var bindScroll = function(ele, evt, fcn) {
ele[window.addEventListener ? 'addEventListener' : 'attachEvent']( window.addEventListener ? evt : 'on' + evt, fcn, false);
}
var scrollPos = function() {
var doc = document.documentElement;
return {
'left': (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0),
'top': (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0)
};
}
var playerOffset = document.getElementById('vid1').offsetTop;
var scrollPlayed = false;
var playerInView = function() {
var diff = playerOffset - scrollPos().top;
var adjust = window.innerHeight > (480/2) ? window.innerHeight : 100;
return diff > -100 && diff < adjust;
}
var checker = null;
bindScroll(window, 'scroll', function(e) {
clearTimeout(checker);
if(!scrollPlayed && playerInView()) {
checker = setTimeout(function() {
vid1.play(true);
scrollPlayed = true;
}, 100);
}
});
</script>
</body>
</html>
Related
CSS error here
Image here
Does anyone know why it says this, when I have referred to many documents?
I have a pop-up image that I want to appear from the bottom of the page and stops at the center.
HTML:
<div class="image-wrapper">
<div id="circle-parent" class="circle-parent" style="display: none">
<img id="circle" class="circle" src="assets/images/thanks_for_visiting_img.png">
<img id="close-button" class="close-button" src="assets/images/close_green.png" onclick="handleButtonClick()">
<img id="quotes-button" class="quotes-button" src="assets/images/btn.png" onclick="handleButtonClick()">
<div class="background">
</div>
</div>
</div>
CSS:
.circle-parent {
position: fixed;
top: 0;
left: 0;
width: 550px;
height: 550px;
z-index: 1;
right: 0px;
margin: auto;
bottom: 0px;
display: block;
outline: none;
max-width: none;
max-height: none;
cursor: default;
}
JS:
// window.addEventListener("load", function() {
// const popUp = document.getElementById("circle-parent")
// popUp.style.top = "20vh";
// })
Edithed according to your new (Edith).
function handleButtonClick() {
const popUp = document.getElementById("circle-parent");
console.log("onclick buttons work!");
if (popUp.style.display === "none") {
popUp.style.display = "block"; // elements visible
} else {
popUp.style.display = "none"; // elements hidden
}
}
window.addEventListener("load", function() {
const popUp = document.getElementById("circle-parent");
popUp.style.top = "10vh";
// handleClose for close/get quotes button
document.addEventListener("visibilitychange", () => {
// if (!cookieExists()) {
if (document.visibilityState === "hidden") {
popUp.style.display = "none";
} else if (document.visibilityState === "visible") {
popUp.style.display = "block";
// setCookie(cookieName);
}
// }
// else {
// setCookie(uklFocusCookie)
// }
});
});
.circle-parent {
position: fixed;
left: calc(50% - 225px);
width: 550px;
height: 550px;
z-index: 1;
right: 0px;
outline: none;
top: 140vh;
transition: all 1s ease;
}
.close-button {
position: absolute;
left: 80%;
top: 5%;
z-index: 1;
cursor: pointer;
}
.quotes-button {
position: absolute;
top: 67%;
left: 22%;
z-index: 1;
cursor: pointer;
}
.background {
display: block;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: -1;
overflow: auto;
background-color: rgb(0, 0, 0);
opacity: 0.83;
}
<div class="image-wrapper">
<div id="circle-parent" class="circle-parent">
<img id="circle" class="circle" src="assets/images/thanks_for_visiting_img.png">
<img id="close-button" class="close-button" src="assets/images/close_green.png" onclick="handleButtonClick()">
<img id="quotes-button" class="quotes-button" src="assets/images/btn.png" onclick="handleButtonClick()">
<div class="background">
</div>
</div>
</div>
<div class="other-stuff-behind">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sapien dolor, consequat a ipsum id, pharetra mattis felis. Cras blandit urna tellus, et facilisis ante auctor vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Integer sollicitudin erat ac lacus luctus consectetur. Donec ac lectus nulla. Aenean maximus rhoncus justo, ut dictum justo finibus eu. Donec dignissim erat at odio facilisis, sed placerat odio accumsan. Nulla vehicula arcu id semper
fermentum. Nulla vel tempus nisl. Fusce efficitur viverra blandit. Nunc condimentum sodales convallis. Aliquam malesuada enim nec vestibulum vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
Phasellus consectetur tristique justo, quis dignissim felis dapibus id. Curabitur eu orci a odio egestas sodales. Morbi luctus metus quis ipsum pharetra gravida. Vivamus nec condimentum elit. Vivamus rutrum imperdiet nisi, pulvinar condimentum
leo consequat nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer ac felis et nibh mollis porta non in augue. Phasellus sollicitudin erat ac orci auctor, eget efficitur diam pulvinar. Etiam
eu elit ac purus interdum laoreet. Vivamus rutrum, urna sed ultrices sagittis, libero urna aliquam justo, vel tincidunt lorem quam vel est. Maecenas ut tortor nec leo vestibulum ullamcorper at vitae sem. Quisque libero nulla, vulputate in
mauris et, tempor cursus nisi. In sed metus pulvinar tortor varius dapibus. In quis diam sagittis, dictum arcu in, congue nibh. Suspendisse interdum nisl ac risus elementum, sit amet accumsan lorem semper. Curabitur laoreet a dolor at dictum.
Ut ac facilisis quam. Mauris ut ultricies enim, ultrices auctor lorem. Proin fermentum nisl felis, aliquet maximus urna eleifend tincidunt. Nulla quam arcu, porttitor suscipit turpis eu, dignissim varius ipsum. Nulla non urna nunc. Phasellus
egestas laoreet leo in ultricies. Donec gravida fermentum nunc at ultrices. Integer quis lacus id enim lacinia convallis lacinia non neque. Integer molestie tempus fringilla. Suspendisse non leo pulvinar odio placerat aliquam eget sit amet
sem. Aenean pulvinar porta diam at finibus. Aenean pellentesque orci sit amet augue imperdiet, ut sollicitudin leo accumsan. Ut aliquam tortor quis quam volutpat, pulvinar semper augue egestas. Nullam dapibus accumsan gravida. Integer euismod
justo a elit dictum, eget pulvinar elit sagittis. Pellentesque et felis lacus. Curabitur scelerisque, mi vitae sollicitudin placerat, risus odio eleifend mi, non tincidunt nisi odio at orci. Etiam sit amet ex lacinia, molestie ligula sed,
luctus justo. Fusce eget aliquam mi, non lobortis ex. Ut bibendum sem sapien, sed placerat justo hendrerit in. Etiam mi nisi, interdum ut malesuada vitae, tempus at ipsum. Praesent quis turpis pharetra, tincidunt magna id, aliquet leo. Nullam
mollis mi at interdum lacinia. Maecenas ut magna feugiat, euismod augue eget, posuere diam. In hac habitasse platea dictumst. Duis fringilla interdum cursus. Sed nisi massa, ultricies vitae blandit et, sodales ut mauris. Sed sed metus diam.
Nullam vestibulum consectetur facilisis. Morbi in purus commodo, congue urna eu, interdum metus. Duis dolor dui, elementum id rhoncus ac, ultrices ac libero. Vivamus vestibulum blandit consequat. In at turpis ut augue efficitur tristique nec
sed erat. Sed fermentum augue eget ipsum convallis ornare. Nullam ut tortor risus. Maecenas consequat pharetra porttitor. Proin nec odio rhoncus, aliquam metus id, laoreet arcu. Nullam ullamcorper magna sit amet metus consectetur, at mollis
ex tincidunt. Donec consequat purus dui, in laoreet libero cursus quis. Fusce ut felis sit amet velit tempus lobortis. Vestibulum sed eleifend urna, quis vestibulum nulla. Sed at scelerisque risus. Maecenas molestie massa eget felis vehicula
accumsan. Sed feugiat in dolor sit amet placerat. Morbi lacinia ante ac lacus pretium consectetur et eu odio. Pellentesque tempus pretium rhoncus. Praesent at faucibus neque. Nulla sed est sit amet ex feugiat iaculis vel vitae lectus. Donec
tempus elit eu turpis porta viverra. Suspendisse commodo nisl purus, nec ultricies lorem commodo et. Vivamus lacinia porttitor enim a efficitur. Cras porttitor justo id sem auctor dignissim. Morbi ut ante et augue convallis pellentesque viverra
ac felis. Morbi non bibendum nunc. Vivamus nec vehicula ipsum. Sed dictum felis eget est condimentum, at sodales eros aliquet. Proin maximus ut sem at iaculis. Nulla ex purus, viverra posuere arcu non, bibendum condimentum arcu. In tortor
felis, molestie non pharetra at, malesuada vitae ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere, urna a rutrum efficitur, ante eros maximus dolor, ac consequat quam ante ut est. Ut aliquam, nulla fringilla
convallis consectetur, nisi dolor semper risus, quis vestibulum elit felis eget metus. Quisque egestas ultricies tempor. Phasellus sodales sem vitae justo facilisis, sit amet commodo diam gravida. Aenean cursus mi mauris, quis accumsan leo
sodales blandit. Cras sed sollicitudin velit. Donec eleifend mauris id eros fermentum porta. Integer luctus dolor nunc, sit amet semper nisi convallis vitae. Vivamus in sem ex. Fusce eu efficitur mauris, at pretium ligula. Sed dignissim, dolor
quis iaculis sagittis, nibh ex scelerisque mauris, sed faucibus nibh augue at mi. Aenean ultricies ac tortor eu sagittis. Sed facilisis sodales eros, et commodo ante vestibulum nec. Sed posuere condimentum pellentesque. Nulla vehicula tincidunt
nisl vitae finibus. Nunc erat dolor, pretium dictum commodo ultricies, aliquam a mauris. Fusce eget aliquam mi, non lobortis ex. Ut bibendum sem sapien, sed placerat justo hendrerit in. Etiam mi nisi, interdum ut malesuada vitae, tempus at
ipsum. Praesent quis turpis pharetra, tincidunt magna id, aliquet leo. Nullam mollis mi at interdum lacinia. Maecenas ut magna feugiat, euismod augue eget, posuere diam. In hac habitasse platea dictumst. Duis fringilla interdum cursus. Sed
nisi massa, ultricies vitae blandit et, sodales ut mauris. Sed sed metus diam. Nullam vestibulum consectetur facilisis. Morbi in purus commodo, congue urna eu, interdum metus. Duis dolor dui, elementum id rhoncus ac, ultrices ac libero. Vivamus
vestibulum blandit consequat. In at turpis ut augue efficitur tristique nec sed erat. Sed fermentum augue eget ipsum convallis ornare. Nullam ut tortor risus. Maecenas consequat pharetra porttitor. Proin nec odio rhoncus, aliquam metus id,
laoreet arcu. Nullam ullamcorper magna sit amet metus consectetur, at mollis ex tincidunt. Donec consequat purus dui, in laoreet libero cursus quis. Fusce ut felis sit amet velit tempus lobortis. Vestibulum sed eleifend urna, quis vestibulum
nulla. Sed at scelerisque risus. Maecenas molestie massa eget felis vehicula accumsan. Sed feugiat in dolor sit amet placerat. Morbi lacinia ante ac lacus pretium consectetur et eu odio. Pellentesque tempus pretium rhoncus. Praesent at faucibus
neque. Nulla sed est sit amet ex feugiat iaculis vel vitae lectus. Donec tempus elit eu turpis porta viverra. Suspendisse commodo nisl purus, nec ultricies lorem commodo et. Vivamus lacinia porttitor enim a efficitur. Cras porttitor justo
id sem auctor dignissim. Morbi ut ante et augue convallis pellentesque viverra ac felis. Morbi non bibendum nunc. Vivamus nec vehicula ipsum. Sed dictum felis eget est condimentum, at sodales eros aliquet. Proin maximus ut sem at iaculis.
Nulla ex purus, viverra posuere arcu non, bibendum condimentum arcu. In tortor felis, molestie non pharetra at, malesuada vitae ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere, urna a rutrum efficitur, ante
eros maximus dolor, ac consequat quam ante ut est. Ut aliquam, nulla fringilla convallis consectetur, nisi dolor semper risus, quis vestibulum elit felis eget metus. Quisque egestas ultricies tempor. Phasellus sodales sem vitae justo facilisis,
sit amet commodo diam gravida. Aenean cursus mi mauris, quis accumsan leo sodales blandit. Cras sed sollicitudin velit. Donec eleifend mauris id eros fermentum porta. Integer luctus dolor nunc, sit amet semper nisi convallis vitae. Vivamus
in sem ex. Fusce eu efficitur mauris, at pretium ligula. Sed dignissim, dolor quis iaculis sagittis, nibh ex scelerisque mauris, sed faucibus nibh augue at mi. Aenean ultricies ac tortor eu sagittis. Sed facilisis sodales eros, et commodo
ante vestibulum nec. Sed posuere condimentum pellentesque. Nulla vehicula tincidunt nisl vitae finibus. Nunc erat dolor, pretium dictum commodo ultricies, aliquam a mauris.
</div>
I'm trying to find a way to float an image to the top of the paragraph it comes after. It must come after the text of the paragraph in the HTML, such that screen readers and small screens (with the image not floated due to media queries) see the image after the text of the paragraph. I can put the <img> inside or outside the <p>, but it must be after the text.
Is there a way to make the image appear at the top right of the text of the paragraph, and have the text of the paragraph appropriately wrap around the image, using only CSS?
[...document.querySelectorAll('img')].forEach(img => {
const rand = Math.floor(Math.random() * 300 + 100);
img.setAttribute('src', `https://placekitten.com/150/${rand}/`);
img.setAttribute('height', rand);
});
img {
float: right;
width: 150px;
height: auto;
}
body {
display: flex;
}
<div class="inside">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere odio in tincidunt posuere. Phasellus id lectus erat. Proin sollicitudin tortor risus, vel tincidunt est accumsan id. Donec urna erat, interdum in elit sit amet, egestas ullamcorper tortor. Nam a leo nec lectus varius tristique. Cras et erat ac lectus auctor interdum. Ut eros tellus, interdum a rutrum vitae, rutrum ac ex. Curabitur aliquet purus libero, in porttitor dui egestas non. Pellentesque ex dui, commodo vitae lectus non, aliquam pretium mauris. Etiam viverra imperdiet sem et vestibulum. Aenean eu sapien eget diam tincidunt sagittis vitae ac turpis. Praesent nec libero condimentum, imperdiet lorem et, semper lectus. Curabitur ac erat eu neque volutpat aliquam sit amet ut nisi. Sed vestibulum augue arcu, at luctus urna dignissim at. Vestibulum pretium consequat erat vel placerat. Phasellus id lectus erat. Proin sollicitudin tortor risus, vel tincidunt est accumsan id. Donec urna erat, interdum in elit sit amet, egestas ullamcorper tortor. Nam a leo nec lectus varius tristique. Cras et erat ac lectus auctor interdum. Ut eros tellus, interdum a rutrum vitae, rutrum ac ex. Curabitur aliquet purus libero, in porttitor dui egestas non. Pellentesque ex dui, commodo vitae lectus non, aliquam pretium mauris. Etiam viverra imperdiet sem et vestibulum. Aenean eu sapien eget diam tincidunt sagittis vitae ac turpis. Praesent nec libero condimentum, imperdiet lorem et, semper lectus. Curabitur ac erat eu neque volutpat aliquam sit amet ut nisi. Sed vestibulum augue arcu, at luctus urna dignissim at. Vestibulum pretium consequat erat vel placerat. Phasellus id lectus erat. Proin sollicitudin tortor risus, vel tincidunt est accumsan id. Donec urna erat, interdum in elit sit amet, egestas ullamcorper tortor. Nam a leo nec lectus varius tristique. Cras et erat ac lectus auctor interdum. Ut eros tellus, interdum a rutrum vitae, rutrum ac ex. Curabitur aliquet purus libero, in porttitor dui egestas non. Pellentesque ex dui, commodo vitae lectus non, aliquam pretium mauris. Etiam viverra imperdiet sem et vestibulum. Aenean eu sapien eget diam tincidunt sagittis vitae ac turpis. Praesent nec libero condimentum, imperdiet lorem et, semper lectus. Curabitur ac erat eu neque volutpat aliquam sit amet ut nisi. Sed vestibulum augue arcu, at luctus urna dignissim at. Vestibulum pretium consequat erat vel placerat.
<img src="https://placekitten.com/150/200" width="150" height="200" alt="Cat">
</p>
</div>
<div class="outside">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere odio in tincidunt posuere. Phasellus id lectus erat. Proin sollicitudin tortor risus, vel tincidunt est accumsan id. Donec urna erat, interdum in elit sit amet, egestas ullamcorper tortor. Nam a leo nec lectus varius tristique. Cras et erat ac lectus auctor interdum. Ut eros tellus, interdum a rutrum vitae, rutrum ac ex. Curabitur aliquet purus libero, in porttitor dui egestas non. Pellentesque ex dui, commodo vitae lectus non, aliquam pretium mauris. Etiam viverra imperdiet sem et vestibulum. Aenean eu sapien eget diam tincidunt sagittis vitae ac turpis. Praesent nec libero condimentum, imperdiet lorem et, semper lectus. Curabitur ac erat eu neque volutpat aliquam sit amet ut nisi. Sed vestibulum augue arcu, at luctus urna dignissim at. Vestibulum pretium consequat erat vel placerat. Phasellus id lectus erat. Proin sollicitudin tortor risus, vel tincidunt est accumsan id. Donec urna erat, interdum in elit sit amet, egestas ullamcorper tortor. Nam a leo nec lectus varius tristique. Cras et erat ac lectus auctor interdum. Ut eros tellus, interdum a rutrum vitae, rutrum ac ex. Curabitur aliquet purus libero, in porttitor dui egestas non. Pellentesque ex dui, commodo vitae lectus non, aliquam pretium mauris. Etiam viverra imperdiet sem et vestibulum. Aenean eu sapien eget diam tincidunt sagittis vitae ac turpis. Praesent nec libero condimentum, imperdiet lorem et, semper lectus. Curabitur ac erat eu neque volutpat aliquam sit amet ut nisi. Sed vestibulum augue arcu, at luctus urna dignissim at. Vestibulum pretium consequat erat vel placerat. Phasellus id lectus erat. Proin sollicitudin tortor risus, vel tincidunt est accumsan id. Donec urna erat, interdum in elit sit amet, egestas ullamcorper tortor. Nam a leo nec lectus varius tristique. Cras et erat ac lectus auctor interdum. Ut eros tellus, interdum a rutrum vitae, rutrum ac ex. Curabitur aliquet purus libero, in porttitor dui egestas non. Pellentesque ex dui, commodo vitae lectus non, aliquam pretium mauris. Etiam viverra imperdiet sem et vestibulum. Aenean eu sapien eget diam tincidunt sagittis vitae ac turpis. Praesent nec libero condimentum, imperdiet lorem et, semper lectus. Curabitur ac erat eu neque volutpat aliquam sit amet ut nisi. Sed vestibulum augue arcu, at luctus urna dignissim at. Vestibulum pretium consequat erat vel placerat.
</p>
<img src="https://placekitten.com/200/200" width="200" height="200" alt="Cat">
</div>
I am trying to fix this footer. If i remove positon it works fine but some other pages still have a problem. I need this footer at the bottom of every page...
footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 16px;
background:white;
}
<footer>
<div class="container text-center"> <span>Copyright © 2017 LeagueOn. all rights reserved </span> </div>
</footer>
Try to avoid position: absolute where you don't really need it.
You can achieve this via flexbox. Your footer should be direct child of body:
body {
margin: 0;
display: flex;
flex-direction: column;
height: 100vh; /* min-height: 100vh will also work everywhere except IE */
}
footer {
/* move footer to the bottom */
margin-top: auto;
}
/* This styles are just for demo */
body {
background-color: lightsteelblue;
}
footer {
background-color: lime;
padding: 16px;
text-align: center;
}
<footer>Copyright © 2017 LeagueOn. all rights reserved</footer>
This will work even in case of long page:
body {
margin: 0;
display: flex;
flex-direction: column;
height: 100vh; /* min-height: 100vh will also work everywhere except IE */
}
footer {
/* move footer to the bottom */
margin-top: auto;
}
/* This styles are just for demo */
body {
background-color: lightsteelblue;
}
footer {
background-color: lime;
padding: 16px;
text-align: center;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sodales molestie orci vitae facilisis. Duis non urna eget felis blandit facilisis vel sit amet purus. Donec finibus ex eget ultrices ultricies. Sed porttitor lobortis mi dignissim lacinia. Phasellus eget iaculis mauris, quis placerat augue. Quisque luctus condimentum neque, sed feugiat ipsum sagittis at. Mauris ut commodo eros.
Sed vel faucibus lacus, efficitur dapibus lectus. Sed consectetur luctus odio. Sed tempus aliquet enim, ac ullamcorper augue tincidunt at. Pellentesque vehicula iaculis elit eleifend viverra. Etiam scelerisque maximus felis. Aenean mollis nisl non eros faucibus mattis. Phasellus dictum venenatis ex vel ultricies.
Suspendisse auctor, nunc at ullamcorper hendrerit, dui enim laoreet nisl, id ullamcorper elit ex in lorem. Ut malesuada ipsum et euismod fermentum. Etiam euismod feugiat lacus eget luctus. Sed tempor vestibulum lectus. Suspendisse tincidunt ut massa ac interdum. Pellentesque mattis sapien in augue imperdiet, vel imperdiet massa convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum nec consectetur nunc.
Mauris vel sodales ex. Aenean at lectus non libero sagittis aliquam nec eget nisi. Proin massa tortor, iaculis in ante ut, hendrerit sodales sem. Aenean blandit vestibulum dolor et viverra. Mauris non nunc eget odio vulputate viverra. Morbi sagittis nisl at risus convallis vestibulum. Aenean pellentesque sit amet nibh id lobortis.
Ut consequat ligula risus, sit amet congue dolor consequat maximus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur ultrices tellus at placerat hendrerit. Fusce ullamcorper ante id urna scelerisque, eget interdum libero feugiat. Sed consectetur eget metus et euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Maecenas malesuada interdum mauris, tempor porttitor odio porttitor eu. Vestibulum sollicitudin justo velit, nec porttitor risus luctus non. Fusce tempor dapibus magna a luctus. Donec ex turpis, venenatis vulputate lacus in, pharetra auctor nisi. Pellentesque dictum elit ut mollis vehicula. Donec vulputate suscipit felis vitae accumsan. Ut fermentum aliquam ipsum sit amet condimentum. Phasellus sollicitudin ligula elit, in efficitur leo dignissim a. Quisque dignissim dolor malesuada interdum interdum.
Nulla congue nibh erat, et tincidunt nulla maximus id. Duis placerat suscipit ex. Integer ut tortor sapien. Vestibulum dapibus sed ex at pharetra. Aliquam blandit facilisis erat. Proin imperdiet cursus arcu, non congue neque tempor nec. Maecenas ut nibh semper, dictum velit sit amet, vehicula nisl. Nullam ac tempor libero. Donec elit lorem, luctus et maximus in, iaculis sed neque. Duis vehicula lacus vitae eros congue, at molestie nisi eleifend. Nulla erat diam, dapibus eu consectetur et, rutrum non quam. Duis imperdiet laoreet elit ac varius. Nulla ultricies pellentesque libero, eget tincidunt tortor elementum quis.
Morbi vitae pharetra ante. Aenean maximus rutrum nunc, eget tempor nunc. Aenean nisi erat, egestas a rhoncus ut, tempus non nisl. Donec venenatis aliquam pulvinar. Sed in tortor neque. Fusce sollicitudin arcu vitae justo faucibus, sit amet sodales neque suscipit. Aliquam in sollicitudin diam. Donec a eros magna. Quisque vel posuere ipsum, quis vehicula odio. Morbi non dolor velit. Vivamus varius velit purus, bibendum volutpat magna eleifend ut. Quisque imperdiet pharetra nunc, id efficitur eros interdum sit amet. Sed commodo maximus risus et iaculis.
Fusce facilisis hendrerit leo. Donec a justo vel velit pellentesque congue et convallis sem. Nullam et urna justo. Donec aliquet mi ac turpis lacinia, in faucibus nunc tempor. Mauris at magna vitae ex volutpat blandit. Integer sed faucibus odio, in congue turpis. Vivamus pellentesque condimentum sagittis. Aliquam fermentum consequat massa non imperdiet.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris pellentesque interdum arcu, at tempor tortor tincidunt sed. Aliquam quis odio rhoncus, pharetra ligula vitae, tempus ante. Aenean ultrices ultrices purus eu interdum. Nullam malesuada dui sit amet enim feugiat dignissim. Vestibulum purus orci, fermentum vitae augue ac, semper scelerisque lectus. Etiam congue erat nec eleifend dapibus. Vestibulum vel mattis lacus. Proin urna nunc, sollicitudin quis volutpat varius, posuere vitae elit. Mauris felis ex, elementum et venenatis at, sagittis at quam. Donec nec pulvinar metus. Morbi sit amet tortor tortor.
Sed cursus fermentum nibh, ac fringilla ante dignissim non. Morbi in hendrerit lacus. Nam pulvinar ultricies dolor vitae ultrices. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent at neque sapien. Nam nisi velit, porta nec ultricies venenatis, semper sit amet mauris. Praesent sagittis ullamcorper lorem, imperdiet eleifend nisl vehicula quis. Cras ut vulputate metus. Ut in congue enim, vel efficitur tortor.
Integer velit erat, fringilla tincidunt porttitor gravida, pulvinar nec elit. Pellentesque ornare porttitor lorem ut congue. Pellentesque sagittis libero in est tristique feugiat. Suspendisse et ex fringilla dui tincidunt iaculis. Etiam a mollis enim, in scelerisque orci. Sed accumsan viverra nunc, a varius tellus molestie malesuada. Nam nec fringilla tellus, sed facilisis tortor. Nulla sed est sed orci tincidunt tincidunt. Morbi luctus imperdiet mi, eget molestie purus venenatis vel.
Integer venenatis dignissim nisi vel dignissim. Mauris vitae maximus felis, et tincidunt eros. Vivamus luctus scelerisque ligula, nec semper turpis volutpat ut. Ut vestibulum nisi vel justo iaculis, sed congue ante vulputate. Maecenas suscipit, mi at pulvinar tempus, nisl lorem molestie massa, ac vestibulum risus neque sit amet purus. Cras ultrices vulputate eros, a volutpat urna luctus ac. Curabitur viverra nunc in mauris mattis, pretium faucibus nibh convallis. Vivamus fermentum magna consectetur velit condimentum finibus. Vestibulum luctus dolor ut elit dictum, sed posuere ligula aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt nisi tellus, nec iaculis tellus feugiat nec. Vivamus sodales molestie velit, quis porta augue rhoncus ac. Sed elementum mi in est venenatis, vitae posuere risus imperdiet.
Pellentesque scelerisque id urna iaculis interdum. Nulla cursus nibh at quam pretium mattis. Quisque at elit metus. Sed pellentesque, lacus et placerat tincidunt, orci metus rutrum ante, pharetra iaculis urna ipsum ac ipsum. Ut maximus ante sit amet finibus vestibulum. Nam lacinia tellus vehicula, gravida tellus vitae, maximus lacus. Integer placerat enim et fringilla commodo.
Cras non accumsan erat, vel dapibus velit. Sed eu dolor tellus. Integer varius mauris nibh, quis pharetra magna congue non. Aliquam libero nisl, suscipit eu congue id, tristique in magna. Maecenas rutrum magna non tincidunt convallis. Aliquam aliquam, mi ut dictum rhoncus, nisl neque lobortis tortor, at mattis odio eros ut justo. Vestibulum egestas risus nec nisl placerat maximus. Nunc orci purus, egestas at rutrum id, eleifend semper erat. In hac habitasse platea dictumst. Vivamus diam ipsum, aliquam ut placerat ac, ultrices nec arcu. Integer eu ultrices dolor, non luctus orci. Proin sodales pulvinar dui, et sollicitudin tellus dapibus nec. Praesent quis consectetur eros, non ornare tortor.
Curabitur vitae lorem vitae est scelerisque facilisis vitae non augue. Duis erat metus, iaculis a velit et, iaculis vehicula nisl. Mauris tristique pellentesque suscipit. Maecenas a nisl dui. In lacus justo, fringilla ut tortor non, dignissim aliquet nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam non lectus libero. Proin consequat eleifend justo. Praesent dolor enim, fringilla ut accumsan sit amet, egestas et augue. Nunc mattis dolor quis sodales tempus.
Integer sed ornare dolor. Quisque id dapibus tortor. Quisque ornare, ex quis consequat porttitor, arcu justo aliquet diam, in sollicitudin odio sem laoreet dolor. Ut elit dolor, semper vitae consectetur rutrum, finibus in felis. Nunc volutpat quam ut ligula varius volutpat. Nunc porttitor dictum libero et facilisis. Nam a libero a nisi aliquet mollis. Integer eget ipsum accumsan, interdum elit sit amet, ultrices massa. Nullam nec est id lorem dignissim aliquet nec at urna. Maecenas ante lorem, rutrum ac commodo ac, viverra quis enim. Etiam convallis sapien eu leo dignissim condimentum. Morbi ut ex eu enim fermentum varius at non turpis. Nulla sed libero pharetra, ornare mi sit amet, scelerisque odio. Mauris sit amet mi non mi ornare commodo. Proin eget lacinia erat. Nunc dictum lobortis justo sed vulputate.
Proin ullamcorper finibus nisi egestas aliquam. Sed tempor ornare massa at semper. Integer ultrices diam a libero fringilla faucibus. Proin vitae leo nec neque laoreet imperdiet. Donec mattis gravida massa ac blandit. Aliquam et accumsan urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam rhoncus elementum est nec iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et sapien orci. Vestibulum ut venenatis velit. Sed sodales volutpat risus vel aliquam. In hac habitasse platea dictumst.
Sed tempus nibh tempus bibendum viverra. Maecenas sit amet magna pretium, pharetra nisl at, ullamcorper elit. Integer ipsum diam, laoreet at consectetur at, rutrum eu mi. Duis et neque mauris. Pellentesque consequat augue et tortor commodo ornare. Nulla sed dui non sem vehicula bibendum vitae nec nibh. Curabitur ut arcu lacus. Donec vel orci dolor. Nam vel nibh a turpis ultricies dapibus rhoncus sit amet lorem. Aliquam condimentum mollis aliquam. Pellentesque laoreet vitae mauris id ornare. In id malesuada nisi.
Phasellus eu aliquam magna, sed efficitur dui. Morbi sagittis tellus vitae velit lacinia, ac molestie massa accumsan. Nullam molestie odio non turpis bibendum rutrum. Donec pellentesque nunc in massa ultrices, a pulvinar ex porta. Curabitur pretium placerat eleifend. Vivamus in dolor id dolor dapibus scelerisque. Etiam pretium placerat laoreet.
Nam at varius nibh, nec ullamcorper tellus. Vivamus ut metus sit amet ligula lobortis ultrices. Vestibulum sed metus id tortor pellentesque dignissim sit amet quis tellus. Integer porta laoreet massa. Fusce tincidunt eros sed neque egestas tristique. Donec eleifend elit volutpat purus sagittis gravida ut vitae purus. Suspendisse a neque id enim euismod egestas et in arcu. Vivamus placerat nulla vel ex dapibus, nec rutrum risus imperdiet. Nam aliquet felis vel turpis varius venenatis. Curabitur a tempus velit, eget vulputate dolor. Nullam feugiat risus risus, in finibus mauris egestas eu.
Donec arcu ligula, pulvinar eu dapibus ut, viverra id ante. Integer in tempus leo, quis finibus felis. Sed sollicitudin libero quis mi vehicula, et blandit tellus porttitor. In in interdum leo. Pellentesque blandit nisi eu quam tempus, vel bibendum augue accumsan. Nam eget suscipit magna, sit amet lacinia velit. Nullam tincidunt, quam a lobortis pharetra, arcu velit pulvinar risus, quis fermentum erat lacus ut neque. Aenean ex elit, feugiat semper vestibulum sed, porttitor at massa.
Proin turpis metus, commodo porta sem non, faucibus hendrerit magna. Nulla sodales gravida quam ac aliquet. Nam posuere lobortis ultricies. Nulla ac odio venenatis, tempor lorem at, varius diam. Suspendisse malesuada lacus vel sapien malesuada, quis faucibus urna eleifend. Donec aliquam erat ut est pellentesque suscipit. Nunc diam lorem, semper et porttitor vitae, commodo eget nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec eu dapibus lorem. Aenean auctor, risus vel efficitur fringilla, neque ex elementum augue, eget aliquam arcu risus quis ligula. Sed viverra mauris tortor, ut tempus risus luctus vitae. Vestibulum tincidunt blandit tortor, eu scelerisque nisl pulvinar et. Ut placerat odio urna, at consequat risus sagittis ac. Fusce imperdiet, enim ut commodo auctor, lectus ante efficitur velit, sed ullamcorper dui purus eu nunc. Nam in mauris venenatis, pretium tortor a, accumsan metus.
Donec efficitur suscipit metus id ullamcorper. Etiam ipsum eros, luctus ut maximus non, pellentesque ut dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempor leo eu dolor pulvinar, at rutrum nulla volutpat. Curabitur quis mollis augue. Nunc porttitor suscipit odio, laoreet facilisis mi luctus convallis. Nunc urna purus, mattis at sollicitudin eget, pharetra quis sapien. Sed porttitor, lacus sed posuere aliquam, quam odio pellentesque ante, sed volutpat est justo sit amet purus. Aenean consequat condimentum tellus, in sagittis dolor molestie quis. Aenean eget enim sem. Vivamus rutrum mi in magna rutrum, vitae euismod lorem pulvinar. Quisque viverra urna odio, eu tristique orci ultricies eu. Nam facilisis malesuada mattis. Ut tempor nibh eu sapien pellentesque facilisis. Aenean fringilla urna ut lorem viverra, quis condimentum elit iaculis.
Nullam aliquam, leo nec iaculis maximus, nisl nulla pretium leo, vitae iaculis nunc mi sit amet ante. Donec ullamcorper velit vitae dictum placerat. Nulla facilisi. Donec lobortis ut diam et pulvinar. Pellentesque suscipit suscipit aliquet. Nulla et pharetra tellus, nec semper erat. Praesent metus mauris, accumsan ut tempus ut, dignissim eget ante. Nulla eget diam sit amet enim luctus interdum. Quisque volutpat, enim vitae sollicitudin fermentum, odio metus fermentum ante, nec ultrices augue dolor eu eros. Nam eu venenatis dui. Vivamus volutpat accumsan nibh, in tincidunt lorem commodo sit amet.
Ut rhoncus, nunc ut lacinia vulputate, nisi purus efficitur massa, id suscipit ex felis nec mauris. Cras malesuada sapien et congue consectetur. Mauris molestie nisl vel purus convallis rutrum. Sed tristique dictum consectetur. Curabitur justo ante, semper sit amet ultrices at, placerat at lacus. Aenean lorem quam, tempor nec arcu nec, viverra ornare mi. Aenean ante velit, vestibulum non libero a, ullamcorper vulputate lectus. Aenean congue, metus ac lobortis dignissim, elit nunc interdum magna, eu sagittis neque mi vitae nibh. Etiam eget lacus quam. Duis quis augue eget eros congue molestie eget at dui.
<footer>Copyright © 2017 LeagueOn. all rights reserved</footer>
I have encountered the issue described above in a report that I have created and requires printing from within an ASP.NET application.
I have created a simplified version so I could try and find the problem.
Please take a look. Preview the page in the browsers print preview, you will see that the code I have highlighted bold causes the table header to not repeat. Remove the page-break-before and the header should reappear.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#media print
{
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
tbody {display: table-row-group; }
}
</style>
</head>
<body>
<div style='margin-left: auto; margin-right: auto; width: 602px; border: 0px solid #000000; padding: 0px 5px 5px 5px; font-size: 10pt; font-family: Tahoma'>
<table style="font-size: 12pt; font-family: verdana">
<thead>
<tr><th align="center">HEADER</th></tr>
</thead>
<tbody>
<tr><td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in tellus ante, eu pharetra neque. Pellentesque a blandit odio. Donec porta sodales arcu vitae commodo. Praesent eu dolor justo. Cras facilisis, tellus sit amet laoreet blandit, libero nibh pharetra lacus, nec sagittis odio tortor quis leo. Quisque rhoncus nisi at urna tempor feugiat. Sed fermentum augue ultricies nunc facilisis vel dignissim ante dapibus. Mauris auctor, lorem sit amet vestibulum ultrices, erat neque fringilla lacus, at laoreet sem risus pulvinar enim. Proin laoreet pellentesque neque, et elementum magna volutpat vitae. Curabitur et nulla velit, ut tincidunt ante. Proin ac nulla sit amet odio rutrum viverra a in nibh. In hac habitasse platea dictumst.
<br /><br />
Pellentesque eu lacus non nisi ornare viverra. Quisque arcu nunc, pretium in feugiat et, tristique venenatis odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc arcu velit, suscipit sit amet porta vel, volutpat id ante. Mauris et nulla dui. Cras elementum posuere euismod. Donec ante dui, molestie non tempus quis, fermentum quis tellus. Proin viverra tellus quis lectus pharetra ut iaculis neque pharetra.
<br /><br />
Sed sed gravida tellus. Etiam pulvinar nibh quis est tempus dapibus eu quis eros. Etiam vel urna nunc. Suspendisse potenti. Aliquam sit amet libero nec neque adipiscing feugiat quis non odio. Fusce malesuada magna et orci egestas eget lacinia erat adipiscing. Proin vitae euismod elit. Cras ut sem nisl. Ut ornare dolor at erat dignissim eu cursus tortor ullamcorper.
<br /><br />
Suspendisse vel odio a elit sagittis porta et vitae justo. Nam quis sodales neque. Donec magna sem, faucibus et semper sit amet, adipiscing sit amet mi. Vestibulum non neque ligula, vitae luctus nulla. Mauris quis libero pulvinar justo iaculis lacinia. Donec gravida eleifend tortor. Maecenas tristique iaculis nunc, eu sagittis dolor interdum et. In hac habitasse platea dictumst.
<br /><br />
Duis orci leo, dapibus vestibulum luctus nec, accumsan tempor dolor. Donec blandit venenatis erat, et volutpat quam hendrerit eu. Suspendisse potenti. Quisque risus nulla, malesuada sed semper ac, molestie nec est. In nec dignissim sem. Nulla enim nunc, eleifend eu fringilla sagittis, pellentesque non urna. Sed mi diam, ullamcorper et accumsan quis, placerat ut nisi. Nunc purus neque, semper non posuere ut, vestibulum vel odio.
<br /><br />
Maecenas aliquam sodales eros, sed faucibus mauris mattis eget. Nulla erat lectus, luctus id fermentum eu, posuere ac tellus. Praesent nisl erat, cursus eu tincidunt congue, viverra rhoncus enim. Pellentesque orci nisi, sagittis vel pretium posuere, pellentesque at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus felis odio, tincidunt in molestie id, aliquet id magna. Vestibulum sit amet orci eget felis tempus cursus. Nullam aliquet, lacus eget pharetra rhoncus, nisi orci pellentesque felis, id vestibulum mauris turpis aliquet risus. Sed rutrum est non est adipiscing ut dictum odio feugiat. Integer arcu nunc, porta pharetra facilisis ut, congue congue dolor. Quisque metus leo, cursus eget viverra iaculis, sodales eu leo. Vivamus ipsum lorem, fringilla sed sagittis vel, commodo quis lectus. Nunc ornare accumsan diam, ut aliquet purus laoreet sit amet. Pellentesque lacinia ligula quis ipsum dictum quis malesuada turpis semper.
<br /><br />
Duis laoreet auctor nibh a fermentum. Phasellus sapien risus, sodales et mollis in, dictum at nisi. Vestibulum eu nibh nec nulla pretium ornare. Aenean at ipsum orci, a laoreet nisl. In fermentum feugiat eros, sed gravida ipsum porta nec. Suspendisse luctus porta erat sit amet gravida. Nunc in lacus in odio accumsan euismod et a elit. Curabitur bibendum mauris bibendum dolor gravida dapibus. Quisque urna dolor, pulvinar tincidunt posuere dignissim, fringilla vel tortor. Morbi pellentesque sollicitudin eros ac tempus. Aliquam erat volutpat.
<br /><br />
Aliquam erat volutpat. Etiam congue, mi aliquet eleifend consequat, metus eros posuere augue, sed accumsan nunc justo sit amet est. Duis sed felis vel elit scelerisque tristique sit amet quis diam. Fusce ut ultricies odio. Mauris scelerisque placerat tempor. Sed vestibulum mollis velit nec imperdiet. Sed elementum sodales metus, et fermentum leo aliquet auctor. Ut at nisl vitae purus rhoncus aliquam. Sed aliquet libero ac est egestas quis condimentum nisi rutrum. Donec condimentum vehicula odio, eu dignissim neque pulvinar a. Integer lobortis tempus blandit. Nullam faucibus lorem sed mauris consectetur id viverra turpis suscipit.
<br /><br />
Sed id diam neque. Donec elementum, enim sit amet ultrices semper, quam justo fringilla dolor, quis condimentum velit orci vel felis. Duis a elit vel nibh convallis dictum. Nam vel arcu nibh, id pretium orci. Maecenas vel dui nisi, id consequat nibh. Nulla blandit eleifend nunc varius semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut condimentum nibh. Pellentesque sit amet faucibus justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Sed eget leo mauris. Vivamus luctus, felis at aliquet imperdiet, nibh erat auctor lacus, ac dignissim orci neque faucibus sapien. Suspendisse tempus venenatis purus ac facilisis. Aenean ac ultrices arcu.
<br /><br />
Suspendisse posuere, orci eget luctus tristique, odio lectus varius orci, eu mattis erat ante ac risus. Donec dictum pretium leo, eu porta enim dapibus eget. Donec in libero tortor, id tempus libero. Nunc magna tellus, placerat ut adipiscing vitae, volutpat ac arcu. Quisque sit amet leo massa. Nunc cursus, odio nec molestie sollicitudin, leo tellus dictum magna, eu sollicitudin libero ligula ac urna. Morbi ac sapien libero, ut eleifend massa. Etiam a risus vitae ipsum tempus pharetra sit amet vitae erat. Morbi sit amet lorem vulputate magna ultrices tincidunt sed vel urna. Aenean pulvinar, risus quis pharetra tincidunt, purus est accumsan odio, et accumsan turpis massa vitae leo. Vivamus at eros dolor. Donec ornare, nulla ut venenatis adipiscing, purus urna vestibulum nisi, placerat tincidunt nibh tortor vitae arcu. Vestibulum id turpis erat, ut adipiscing lorem. Duis venenatis, magna id lobortis accumsan, velit nisl convallis augue, sit amet interdum urna lorem sit amet sapien. Curabitur facilisis convallis lorem sit amet mollis. In hac habitasse platea dictumst.
<br /><br />
Quisque eget nunc leo. Vivamus rhoncus ultrices dolor in porta. Phasellus condimentum tempor justo nec facilisis. Sed consequat dictum dui, eget lacinia arcu rhoncus eget. Curabitur vehicula laoreet nunc quis tincidunt. Maecenas eget massa sed ligula interdum euismod quis vitae urna. Praesent luctus, dolor a faucibus tristique, purus lorem aliquam lectus, sed hendrerit ante nisl vel ligula.
<br /><br />
**<div style="page-break-before: always">**
Curabitur pulvinar sollicitudin est id elementum. Vestibulum quis lacus nisl. In pretium quam vel diam iaculis sit amet tristique justo viverra. Vestibulum ut magna nibh, quis pulvinar enim. Nulla facilisi. Sed posuere pulvinar urna, a porta odio congue in. Curabitur faucibus turpis quis nibh semper tincidunt. Ut egestas, justo ut vehicula elementum, magna eros sagittis nulla, placerat euismod nibh quam eget quam. Nullam placerat turpis vel lorem pharetra pharetra. Nunc eros nisl, aliquet rutrum sollicitudin et, ultrices volutpat augue. Maecenas dapibus adipiscing mattis. Nulla vitae velit tortor. Proin suscipit, augue in egestas aliquam, massa nisl pharetra mauris, sed vulputate lacus mi sit amet nibh. Donec ut justo tortor, non semper ligula. Nunc facilisis blandit lorem at pulvinar.
</div>
<br /><br />
Integer imperdiet faucibus mattis. Integer condimentum scelerisque erat, sed adipiscing dui condimentum vel. Etiam aliquet tempus neque, in fermentum massa tristique eu. Sed tempus neque vel eros tincidunt eget lobortis massa accumsan. Ut enim elit, rutrum vel adipiscing egestas, gravida nec urna. Proin fringilla aliquet hendrerit. Aenean a porttitor nunc. Ut vestibulum malesuada massa sit amet dictum. Duis ut sem ac augue fermentum tincidunt. Aliquam convallis pellentesque elementum. Suspendisse accumsan, lectus vitae tempus elementum, risus urna lacinia nunc, non dapibus sem nunc sit amet neque. Integer eu metus erat. Donec at ante neque. Nullam convallis odio sit amet enim sollicitudin vel vestibulum turpis aliquam.
<br /><br />
Aenean mattis velit vel ipsum eleifend sit amet auctor metus fringilla. Quisque a lacus orci. Ut luctus vulputate imperdiet. Mauris luctus massa at erat posuere sit amet convallis magna malesuada. Mauris tempus auctor suscipit. Phasellus eu est vel metus pharetra commodo ac posuere orci. Duis massa purus, lobortis et fringilla et, venenatis eget odio. Fusce vel sapien nisl. Suspendisse nisi nisi, tempor ut volutpat vitae, pharetra id ligula. Donec ipsum enim, dignissim et pharetra nec, vehicula et mauris. Ut sit amet nisl odio. Sed eleifend auctor metus, vel laoreet diam varius vel. Vestibulum sit amet augue nec massa faucibus rhoncus. Nulla sodales justo nec nisl commodo facilisis. Aenean euismod tortor eget lorem ultricies tincidunt.
<br /><br />
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque mi dolor, hendrerit a laoreet vehicula, elementum ut elit. Nullam sodales justo sed turpis volutpat blandit. Mauris augue est, tincidunt at vestibulum vitae, vestibulum non velit. Ut ac bibendum orci. Vestibulum lacus velit, rhoncus sed pellentesque ac, aliquam vitae sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam condimentum nulla lacinia purus luctus et molestie eros cursus. Ut quis erat at magna aliquet laoreet. Suspendisse iaculis hendrerit vulputate.
<br /><br />
Etiam lobortis tortor lectus. Curabitur a ligula lorem. Donec vel odio a urna fermentum tincidunt in in libero. In hac habitasse platea dictumst. Morbi vel dui vitae ligula interdum ultricies in nec nisi. Sed sit amet odio in massa sodales mattis. Nunc non dolor ac turpis laoreet ultrices quis pellentesque felis. In egestas justo sed libero molestie in posuere odio condimentum. Morbi ultrices nibh vitae nisi posuere molestie. Fusce tempor porttitor leo, quis congue turpis congue non. Aliquam lorem libero, lacinia eget egestas nec, consectetur vitae eros. Cras interdum elementum odio, a venenatis odio gravida in. In vestibulum volutpat libero id vehicula. Nulla et vehicula eros. Mauris lacinia leo vitae lectus accumsan dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br /><br />
Vestibulum sollicitudin sollicitudin consectetur. Vivamus fringilla gravida tempus. Phasellus vel fermentum erat. Maecenas auctor euismod lectus et vestibulum. Vivamus fringilla urna et justo rutrum imperdiet. Nunc a diam interdum nulla porta tempor. Nulla tellus risus, dignissim fringilla laoreet ac, lacinia et risus. Aliquam ut est orci, non molestie turpis. Etiam fringilla leo eget felis luctus et blandit nulla porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
<br /><br />
In sapien neque, varius at elementum vel, rutrum ut mauris. Phasellus pellentesque facilisis lacinia. Vivamus interdum nibh quis elit vehicula eget faucibus mauris commodo. Donec odio leo, faucibus in pellentesque a, pulvinar vel velit. Phasellus et sagittis felis. Phasellus ultrices elit sed mi tincidunt vel viverra nisl vestibulum. In eu augue nec odio ultrices tempor. Aliquam erat volutpat. Mauris ut urna ligula. Pellentesque tempus, tellus blandit placerat faucibus, nulla lorem dignissim neque, ut iaculis tortor orci nec ligula. Nunc sodales convallis mattis. Etiam ac neque ac nisi volutpat imperdiet. Sed semper eleifend tellus, eget porta eros molestie ut. Quisque at ante sem. Donec non dolor tincidunt ipsum convallis suscipit. Aliquam ipsum nibh, dapibus at imperdiet tempus, fermentum ut velit.
<br /><br />
Vestibulum nibh orci, tincidunt nec sodales sit amet, lacinia vel nisi. Praesent tempor porttitor commodo. In hac habitasse platea dictumst. Donec suscipit, nunc in condimentum semper, tellus orci egestas nisl, pellentesque malesuada lacus lacus ac turpis. Donec at sapien ante. Praesent cursus dapibus turpis et porta. Etiam imperdiet aliquam augue, in varius sem tempor vitae. Phasellus at nunc id nisl vulputate porta vitae vitae quam.
<br /><br />
Morbi sodales nibh non lectus tincidunt elementum. Donec feugiat, nisi sit amet accumsan molestie, tellus lectus condimentum est, ut vulputate tellus ipsum in nisi. Duis mattis lorem et est vestibulum eu sollicitudin erat sodales. Integer porta varius imperdiet. Ut suscipit, lacus vel gravida iaculis, ipsum erat ultricies turpis, et egestas lacus sem id libero. Proin at mauris vel mi lobortis convallis vitae et tortor. In elementum mi vel ipsum tempus bibendum. Nam adipiscing, sem non semper rutrum, felis est lacinia felis, faucibus mollis diam ante et nisl. Nam erat eros, faucibus non porta vitae, rhoncus sit amet velit. Vestibulum sed elementum mauris. Praesent neque dolor, bibendum vel luctus lacinia, viverra nec odio. Morbi pharetra luctus ante non rutrum. Pellentesque rutrum, orci eu fringilla condimentum, felis massa tempor purus, quis rhoncus massa libero ac tortor. Phasellus a sapien est. Integer vulputate mauris eu erat pellentesque dictum. Phasellus eu lorem sed eros commodo convallis a at odio. </td></tr>
</tbody>
</table>
</div>
</body>
</html>
Please use this instead it solves your problem, however, it is strongly advised not to use page-breaking properties and table together by w3schools
code is here jsfiddle
<table style="font-size: 12pt; font-family: verdana; page-break-before: always">
<thead>
<tr><th align="center">HEADER</th></tr>
</thead>
<tbody>
<tr><td>
Basically, I created a second table where your desired page break should occur. And place the style of page-break-before: always on the table.
I have got a div that needs to have a fixed height and will have either floated or non-floated content.I had no issues with the CSS in Firefox and Safari but started having problems with IE6.Im using overflow:hidden to clear the float but the content gets clipped in IE6,so I used zoom to trigger the hasLayout property.The float gets cleared in IE 6 but I need the container to have a fixed height,if I specify a fixed height for the container the content gets clipped.Is it possbile to hav a div container that can have a fixed height and aslo have the overflow:hidden to clear the floats?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
#boxContent{background:red;min-height:425px;height:auto !important;height:425px;overflow:hidden;zoom: 1;}
#box1{background:yellow;float:left;width:50%}
#box2{background:green;float:left;width:50%}
</style>
</head>
<body>
<div id="boxContent">
<div id="box1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat scelerisque purus nec elementum. Maecenas tempus sollicitudin tincidunt. Integer tincidunt volutpat ullamcorper. Etiam laoreet tincidunt nunc, sit amet venenatis est rhoncus vel. Aenean enim dui, blandit eget egestas blandit, blandit id purus. Curabitur non tortor neque, et ornare elit. Mauris at nisi turpis. Vivamus tempus, enim quis posuere laoreet, elit est varius tellus, vel faucibus nunc enim vel lacus. Sed semper feugiat nisi sit amet pulvinar. Duis mattis cursus nunc vel volutpat. Etiam ornare mollis leo ac mattis.
Cras sagittis mauris mi, et pellentesque arcu. Phasellus aliquet nisi sed tortor dictum faucibus. Morbi facilisis pretium lorem, in cursus augue fringilla eu. Morbi felis lectus, commodo at fermentum eget, varius at sem. Aenean dapibus lacus eu orci mollis porttitor. Curabitur nec purus quis risus imperdiet malesuada. Suspendisse potenti. In ipsum lorem, molestie ac sollicitudin at, dignissim eget est. Curabitur arcu eros, accumsan et pretium dignissim, pellentesque eget mi. In fringilla neque pharetra leo imperdiet ut dictum odio hendrerit. Etiam ligula nisl, feugiat vel mattis vel, pulvinar vitae dui.
Cras felis massa, porttitor sed bibendum at, vestibulum in nisi. Nulla egestas hendrerit felis, accumsan imperdiet tellus commodo id. Maecenas tincidunt justo ut erat porta et faucibus ante dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In gravida tristique tristique. Etiam non dolor mi, id eleifend odio. Sed cursus nisl ut enim dictum adipiscing sed volutpat lacus. Quisque ut quam felis, quis vulputate velit. Fusce consequat, metus sed vulputate ultricies, leo leo tempor elit, vitae fringilla odio orci id leo. Sed nec neque nisl, eu fermentum arcu. Nunc facilisis scelerisque ipsum dictum feugiat. In hac habitasse platea dictumst. Pellentesque et nisl lacus, nec vulputate turpis. Nulla volutpat faucibus arcu et dapibus. Integer in erat libero, quis dignissim magna. Mauris metus felis, suscipit in euismod at, congue quis libero.
Vestibulum volutpat aliquet ligula commodo dignissim. Donec laoreet quam et massa consequat scelerisque viverra turpis tincidunt. Morbi quis leo lacus, at porttitor nunc. Fusce fermentum elementum felis id viverra. Sed semper varius convallis. Duis quam lorem, facilisis id consequat in, commodo eget diam. Curabitur dolor elit, volutpat id tincidunt vel, rutrum eu arcu. Fusce scelerisque gravida porttitor. Duis accumsan porttitor fermentum. Integer fringilla tincidunt ipsum, sed condimentum diam consequat in. Maecenas malesuada lacinia nisi, eu condimentum lectus molestie pretium. Sed quam nisi, blandit non pretium in, luctus id quam. Morbi ac feugiat orci. In ac convallis ipsum.
</p>
</div>
<div id="box2">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat scelerisque purus nec elementum. Maecenas tempus sollicitudin tincidunt. Integer tincidunt volutpat ullamcorper. Etiam laoreet tincidunt nunc, sit amet venenatis est rhoncus vel. Aenean enim dui, blandit eget egestas blandit, blandit id purus. Curabitur non tortor neque, et ornare elit. Mauris at nisi turpis. Vivamus tempus, enim quis posuere laoreet, elit est varius tellus, vel faucibus nunc enim vel lacus. Sed semper feugiat nisi sit amet pulvinar. Duis mattis cursus nunc vel volutpat. Etiam ornare mollis leo ac mattis.
Cras sagittis mauris mi, et pellentesque arcu. Phasellus aliquet nisi sed tortor dictum faucibus. Morbi facilisis pretium lorem, in cursus augue fringilla eu. Morbi felis lectus, commodo at fermentum eget, varius at sem. Aenean dapibus lacus eu orci mollis porttitor. Curabitur nec purus quis risus imperdiet malesuada. Suspendisse potenti. In ipsum lorem, molestie ac sollicitudin at, dignissim eget est. Curabitur arcu eros, accumsan et pretium dignissim, pellentesque eget mi. In fringilla neque pharetra leo imperdiet ut dictum odio hendrerit. Etiam ligula nisl, feugiat vel mattis vel, pulvinar vitae dui.
Cras felis massa, porttitor sed bibendum at, vestibulum in nisi. Nulla egestas hendrerit felis, accumsan imperdiet tellus commodo id. Maecenas tincidunt justo ut erat porta et faucibus ante dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In gravida tristique tristique. Etiam non dolor mi, id eleifend odio. Sed cursus nisl ut enim dictum adipiscing sed volutpat lacus. Quisque ut quam felis, quis vulputate velit. Fusce consequat, metus sed vulputate ultricies, leo leo tempor elit, vitae fringilla odio orci id leo. Sed nec neque nisl, eu fermentum arcu. Nunc facilisis scelerisque ipsum dictum feugiat. In hac habitasse platea dictumst. Pellentesque et nisl lacus, nec vulputate turpis. Nulla volutpat faucibus arcu et dapibus. Integer in erat libero, quis dignissim magna. Mauris metus felis, suscipit in euismod at, congue quis libero.
Vestibulum volutpat aliquet ligula commodo dignissim. Donec laoreet quam et massa consequat scelerisque viverra turpis tincidunt. Morbi quis leo lacus, at porttitor nunc. Fusce fermentum elementum felis id viverra. Sed semper varius convallis. Duis quam lorem, facilisis id consequat in, commodo eget diam. Curabitur dolor elit, volutpat id tincidunt vel, rutrum eu arcu. Fusce scelerisque gravida porttitor. Duis accumsan porttitor fermentum. Integer fringilla tincidunt ipsum, sed condimentum diam consequat in. Maecenas malesuada lacinia nisi, eu condimentum lectus molestie pretium. Sed quam nisi, blandit non pretium in, luctus id quam. Morbi ac feugiat orci. In ac convallis ipsum.
</p>
</div>
</div>
</body>
</html>
http://jsfiddle.net/hLwy8/10/
http://jsfiddle.net/hLwy8/11/
overflow:hidden hack does not work in ie6!
you need old style clear:both; at the end of the container