Need to fire JavaScript function when bottom of page is reached - not working!

JavaScript
1

Hey all,

We would like to call certain JavaScript functions when the bottom of the page is reached.
The test page is here:

We are using this JS code to do this Job, but it is not working:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       alert("near bottom!");
   }
});

Can you suggest either what is wrong with this JS code that it is not firing when the bottom of the page is reached?
Or suggest another JS code that will get this Job done?

Regards,
Dean

2

It will work if you add a link to jquery before you start using jquery code.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<style>
html, body {
	margin:0;
	padding:0
}
</style>
</head>

<body>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script>
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
alert("near bottom!");
}
});
</script>
</body>
</html>
3

Hi,

1st, I had asked for non-JQuery code for this purpose, so did not know it was JQuery.

So I have gone ahead and done as you said and added JQ code, and still not working, here:

https://www.anoox.com/temp/check_bottom_page.php

4

Use the url //code.jquery.com/jquery-latest.min.js instead of defining http.

If you look at your browser’s console (usually press F12, then go to the tab that says “console”) it will tell you the error.

Mixed Content: The page at ‘https://www.anoox.com/temp/check_bottom_page.php’ was loaded over HTTPS, but requested an insecure script ‘http://code.jquery.com/jquery-latest.min.js’. This request has been blocked; the content must be served over HTTPS.

If you ommit it entirely, the browser will grab the one you’re on.

5

Hi,

I did what you suggested. And now there are other problems:

1- The alert(“near bottom!”); is firing with any movement in the Cursor and surely far from hitting bottom of the page

2- It is graying out the entire screen!

3- The alert is not going away after being triggered!

All of which you can see via the sample page provided.

Let me ask you this: Do you have a Pure JavaScript code (No JQuery) for detecting when the bottom of a Web page is reached?

Regards,
Dean

6 
window.onscroll = function(ev) {
  if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
    // you're at the bottom of the page
    console.log("Bottom of page");
  }
};

Source: http://stackoverflow.com/questions/9439725/javascript-how-to-detect-if-browser-window-is-scrolled-to-bottom

2 Likes
7

You didn’t ask that here as you just posted the jquery code yourself :slight_smile: How were we supposed to know?

Did you check your page against mine as I gave a working example? A little trial and error would have shown you that the antiquated doctype you are using is not compatible with the functions you were testing.

You must use a modern doctype or all bets are off!!!

However, I believe @James_Hibbard 's solution will work with your old doctype but you will need to test.

3 Likes
8

Hi,

Your suggestion is not working.
You can see it here:

https://www.anoox.com/temp/check_bottom_page_2.php

Any ideas?

9

Obviously that is not the issue.

But just to make you happy, since you always list such ctitical replies about our site being “Outdated”, I added the HTML5 and beyond Doctype, as listed here:

And still Nothing. As you can see here:

https://www.anoox.com/temp/check_bottom_page_2.php

10

Maybe if you fix things there will be a better chance of the script working?

https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.anoox.com%2Ftemp%2Fcheck_bottom_page_2.php

Error: Duplicate ID top_place.
From line 45, column 1; to line 45, column 79
↩ </div>↩↩<div id="top_place" style="height: 100px; width: 100%; border: 1px solid red;">↩		<p>
Warning: The first occurrence of ID top_place was here.
From line 30, column 1; to line 30, column 82
<p>↩<br>↩↩<div id="top_place" style="height: 1500px; width: 100%;  border: 1px solid blue;">↩↩↩	<p

re “transitional”
the name itself suggests the intended use is “give us time while we change from old to new”

11

Lol, works on Chrome latest and FF latest. Anyway, define “not working”.

12

Should work for all browsers that run JavaScript - it is only jScript (IE8 and earlier) where the commands were different

13

My point :slight_smile:

14

Seems to be working ok and if you look at the console log in the web inspector the message is shown in the console as you reach the bottom.

That’s working also.

If you were expecting an ‘alert’ to show then that won’t happen as the message was written to the console.log instead as it is a better way to debug.

15

particularly in browsers where you have turned alert off to avoid seeing other people’s debugging leftovers.

16

Thanks that duplicate DIV names is Fixed.

17

Yes, it is now working.
And was moved from Test page to the actual page.
You can see it Live here:

FYI: the purpose was as you role to the bottom of page, it loads more Questions & Discussions. Which it is doing now.

Thanks for your suggestion.

1 Like
18

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.