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

Community
  • 1
  • 1
Abilash Erikson
  • 341
  • 4
  • 26
  • 55
  • 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: https://jsfiddle.net/4cfjq1tg/1/ – FFdeveloper May 14 '17 at 13:08
  • no in this also problem .see this https://jsfiddle.net/4cfjq1tg/2/ . when you scroll down it is alerting hi more than one time – Abilash Erikson May 14 '17 at 13:12
  • @FFdeveloper can you please write the answer so that i can accept . i found this logic by your js fiddle https://jsfiddle.net/4cfjq1tg/5/ – Abilash Erikson May 14 '17 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 – FFdeveloper May 14 '17 at 14:51

3 Answers3

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>
Adeel
  • 2,901
  • 7
  • 24
  • 34
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.

Farzin Kanzi
  • 3,380
  • 2
  • 21
  • 23
  • 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 / – Abilash Erikson May 14 '17 at 13:17
  • 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. – Farzin Kanzi May 14 '17 at 13:20
  • You can see this: http://stackoverflow.com/questions/32480694/hide-menu-on-scroll-down-then-show-the-menu-when-the-scroll-up-reach-0-javascri – Farzin Kanzi May 14 '17 at 13:22
  • 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`. – Farzin Kanzi May 14 '17 at 13:40
  • Please see my update :) – Abilash Erikson May 14 '17 at 13:52
  • Yes it's ok. but it was better to using a boolean to check condition, instead of a number ('in'). – Farzin Kanzi May 14 '17 at 15:47
  • ok. then can you update the answer with code . – Abilash Erikson May 16 '17 at 12:25
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.

Community
  • 1
  • 1
FFdeveloper
  • 241
  • 3
  • 14