Creating a spash screen kind of pop up when you reach the end of the page - Javascript
Topics

--><!-- Nothing works without HTML -->





<div>



<h1>How to detect if user has scrolled to the bottom of the page - Javascript, pop up</h1>

<h6>Scroll right down and press the "sneak peak" button to see the code.</h6>



<p>
The condition that has to be met for the pop up to show is:
if ((window.innerHeight + window.pageYOffset)+1>= document.body.scrollHeight). Play with the window and resize
it (in height and width) to get a feel for
the values which are visible in the table. Resizing the window vertically will result in a different innerheight, resizing horizontally will
affect the scrollHeight.
</p>
<table id="display1" style="position:fixed; top:10px; left:-10px; background-color:#FBF2DD; color:black;border: 1px solid black; border-collapse:collapse; font-size:0.7em;">
<thead>
<tr>
<th style="padding:5px;border:solid 1px #444444;">scrollHeight:</th>
<th style="padding:5px;border:solid 1px #444444;">innerHeight:</th>
<th style="padding:5px;border:solid 1px #444444;">pageYOffset + innerheight:</th>
<th style="padding:5px;border:solid 1px #444444;">pageYOffset:</th>
</tr>
</thead>
<tbody>
<tr>
<td style="background-color:#80FFFF;padding:5px;border:solid 1px #444444;"></td>
<td style="background-color:#00FF80;padding:5px;border:solid 1px #444444;"></td>
<td style="background-color:#ABABFF;padding:5px;border:solid 1px #444444;"></td>
<td style="background-color:#FF69FF;padding:5px;border:solid 1px #444444;"></td>
</tr>
</tbody>
</table>

<img src="images_July_2015/boat.png" width="799" height="531" alt="Javascript event, onscroll, learn Javascript made easy, this is a symbol for the ease of understanding" />






<p id="this_is_some_text">

Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et
ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor
sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet. Sed diam
lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et
ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor
sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet. Sed diam
Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et
ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor
sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet. Sed diam
Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et
ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor
sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet. Scriptum
javae idoneum est.

</p>



<br/>
<br/>
<br/>



<?php $Weblog->share ();?>
<br/>


</div>


<script type="text/javascript">
function Show_me_some_Attributes () {
var display = document.getElementById ("display1");
display.rows[1].cells[0].innerHTML = document.body.scrollHeight;//entire height
display.rows[1].cells[1].innerHTML = window.innerHeight ;//height of the visible area
display.rows[1].cells[2].innerHTML = window.innerHeight + window.pageYOffset; // don't use scrollY as it's not compatible with ie9
display.rows[1].cells[3].innerHTML = window.pageYOffset;// pixels scrolled to what is visible in the upper left corner of the window
if ((window.innerHeight + window.pageYOffset)+1>= document.body.scrollHeight) { //+1 because it is not so exact
alert("Bottom of page");
}
}
window.onscroll = Show_me_some_Attributes; //execute function "Show_me_some_Attributes" if user scrolls
window.onresize = Show_me_some_Attributes; //execute function "Show_me_some_Attributes" if user resizes window
</script>



Sneak peek of the server side code