3

In my html page ther is one load-more class.<p class="load-more">Load more</p>. When user scroll down to this div i need to execute a function . For example i need to alert "Hi". For this i used the following code .

$(window).scroll(function() {
    var hT = $(".load-more").offset().top,
        hH = $(".load-more").outerHeight(),
        wH = $(window).height(),
        wS = $(this).scrollTop();
    if (wS > (hT+hH-wH)){
        alert("Hi");
    }
});

But here alert is working more than one time . Ie alert is repeating 4,5 times . Why this is happening ? i see this answer Run jQuery event only once after a condition matches but it is not working .

Please see this js fiddle https://jsfiddle.net/4cfjq1tg/2/. Here when we scroll down to bottom , it is alerting hi more than one time .

Here what i need is

how can i execute some function on certain condition ? for example when scroll down to load more then i need to check the css display value of .load-more. If that load-more is display block alert Hi . else don't do anything

UPDATE

I solve this issue using this solution 

var in= 0;

$(window).scroll(function(e) {
    var hT = $(".load-more").offset().top,
        hH = $(".load-more").outerHeight(),
        wH = $(window).height(),
        wS = $(this).scrollTop();
   if(in==0){
     if (wS > (hT+hH-wH)){
       if($(".load-modre").css("display")!=="block"){
             alert("hii");
             in ++;
            }
            }  } 

    });

All credits are going to FFdeveloper and Farzin Kanzi .

Thank you friends

Improve this question
4
  • 1
    Please give us some more details. Maybe your problem is in some other parts of your code because this piece, as is, works for me. JSFiddle: jsfiddle.net/4cfjq1tg/1 Commented May 14, 2017 at 13:08
  • no in this also problem .see this jsfiddle.net/4cfjq1tg/2 . when you scroll down it is alerting hi more than one time Commented May 14, 2017 at 13:12
  • @FFdeveloper can you please write the answer so that i can accept . i found this logic by your js fiddle jsfiddle.net/4cfjq1tg/5 Commented May 14, 2017 at 13:58
  • @abilash er that logic doesn't work as it should. I found another post that seems to work, i answered with the link Commented May 14, 2017 at 14:51

3 Answers 3

Reset to default
3

Below code snippet to stop alerting more then one time on scroll

You can also check the link Auto Load More Data On Page Scroll (jQuery/PHP) and append results into the div

var loading = true;

$(window).scroll(function() {

	var loadMoreTop		= $('.load-more').position().top,
		loadMoreHeight	= $(".load-more").outerHeight(),
		windowScrollTop	= $(window).scrollTop(),
		windowHeight	= $(window).height()
		windowPosition	= windowScrollTop + windowHeight - loadMoreHeight;
		
	if (windowPosition >= loadMoreTop && loading) { 
		alert('Hi');
		loading = false;
	}
	
});
.container {height: 100%;}
.load-more {background: #000; padding: 10px; color: #fff;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper">
	<ul id="results">
	  <li>Hi</li>
	  <li>Hi</li>
	  <li>Hi</li>
	  <li>Hi</li>
	  <li>Hi</li>
	  <li>Hi</li>
	  <li>Hi</li>
	  <li>Hi</li>
	  <li>Hi</li>
	  <li>Hi</li>
	  <li>Hi</li>
	  <li>Hi</li>
	  <li>Hi</li>
	  <li>Hi</li>
	</ul>
	<div class="load-more">LOAD MORE...</div>
</div>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

When you scroll your page

 $(window).scroll(function()...

will fire multiple times. This is normal that you see multiple alerts.

Update:

It's better you do this:

var loaded = false;
$(window).scroll(function(e) {
     if(!loaded)
     {
         var hT = $(".load-more").offset().top,
             hH = $(".load-more").outerHeight(),
             wH = $(window).height(),
             wS = $(this).scrollTop();

         if (wS > (hT+hH-wH)){
             if($(".load-modre").css("display")!=="block"){
                 alert("hii");
                 loaded = true;
             }
         }
     }
});

It is also better in performance, because after loaded set to true, We have not any process in next scrolls.

Improve this answer

7 Comments

then how can i execute some condition ? for example when scroll down to load more then i need to check the css display value of .load-more. If that load-more is display block alert hi . else don't do anything /
Some conditions or css changes has not problem with repeat. They are different than alert that must show only one time. You can see many web pages that has scroll function to hide/show the top menu. For example top menu show on scrollTop > 200 It repeats but not any problem. I will find some sample to you.
You can see this: stackoverflow.com/questions/32480694/…
My english is not good, But just now I found what you want. To load more it must fire only one time. So you can use a boolean, if(this).scrollTop() > 200) myBoolean = true; This set your boolean true when page reaches to a scroll value and you can use this to check if load more is needed or not. The boolean changes from false to true but never chages back to false.
Please see my update :)
|
1

All the solutions i've seen for this question in this post seems to not work properly.

Please see the accepted answer of this post:

Trigger event when user scroll to specific element - with jQuery

Seems to work quite good.

Hope this could be the real solution of this post.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.