Remove seen notifications based on scrolling using Jquery/Javascript/PHP

Question

I have to clear/remove notification based on user scrolling means clear the notification if user has seen it. It's a pop-up window for notification. The seen notification should be cleared/removed only after user close the pop-up notification window. I am new to Javascript/jQuery, so confused how to do it. Here is my code.

<div class="notifications" id="notifications">
   <p class="notif" id="1"> First notification <span id='time1'></span></p>
   <p class="notif" id="2"> Second notification <span id='time2'></span></p>
   <p class="notif" id="3"> Third notification <span id='time3'></span></p>
   <p class="notif" id="4"> Fourth notification <span id='time4'></span></p>
   <p class="notif" id="5"> Fifth notification <span id='time5'></span></p>
   <p class="notif" id="6"> Sixth notification <span id='time6'></span></p>
</div>
<script>
   jQuery(function($) {
      $('#notifications').on("scroll", function() {             
         $('.notif').each(function () {
            if( $(this).next().offset() ) {
               console.log("current: " + $(this).offset().top);
               console.log("next: " + $(this).next().offset().top);
               if( $(this).offset().top <= $(this).next().offset().top ) {
                  $(this).find( ".notif" ).css( "color", "red" );
                  //return;
               }
            }
         });
      });
   });
</script>

In console log, it displays current and next pos value and then it displays error: TypeError: $(...).next(...).offset(...) is undefined

I am also confuse how to clear/remove the seen notification after user close the pop-up notification window.

check if `$(this).next()` exist .last element has no next elements — Madhawa Priyashantha, Dec 17 '17 at 03:50
thank you. I have edited the code. Error is gone but still it's not changing the font color. — techno, Dec 17 '17 at 04:28

seokgyu · Accepted Answer · 2017-12-17T09:46:54.293

1

You need change $(this).find( ".notif" ).css( "color", "red" ); to $(this).css( "color", "red" ); . this is already .notif.

jQuery(function($) {
         $('#notifications').on("scroll", function() {       
         $('.notif').each(function () {
            if( $(this).next().offset() ) {
               console.log("current: " + $(this).offset().top);
               console.log("next: " + $(this).next().offset().top);
               if( $(this).offset().top <= 50)  {
                  $(this).css( "color", "red" );
                  //return;
               } else {
                 $(this).css( "color", "black" );
               }
            }
         });
      });
   });

#notifications {
  overflow:scroll;
  height:140px;
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="notifications" id="notifications">
   <p class="notif"> First notification </p>
   <p class="notif"> Second notification </p>
   <p class="notif"> Third notification </p>
   <p class="notif"> Fourth notification </p>
   <p class="notif"> Fifth notification </p>
   <p class="notif"> Sixth notification </p>
   <p class="notif"> Seventh notification </p>
   <p class="notif"> Eighth notification </p>
   <p class="notif"> Ninth notification </p>
   <p class="notif"> Tenth notification </p>
</div>

edited Dec 17 '17 at 09:46

answered Dec 17 '17 at 06:15

seokgyu

147
1
11

Thank you but this code changes color for all notifications. I need to change the color of the notifications one by one as user scroll down the pop-up window. – techno Dec 17 '17 at 06:43
Then, you need to change below. `if( $(this).offset().top <= $(this).next().offset().top ) { $(this).css( "color", "red" ); //return; }` Every `$(this)` is higher than `$(this).next()` so css is changed. – seokgyu Dec 17 '17 at 09:42
I edited code as you say, `if( $(this).offset().top <= 50) { $(this).css( "color", "red" ); //return; } else { $(this).css( "color", "black" ); }` Added. – seokgyu Dec 17 '17 at 09:47
thank you. It's not working for the notifications at the bottom of the pop-up window. Suppose, If there are 20 notifications, its only changing color for first 10. I think the reason is that scrollbar is smaller. Also, how come $(this).offset().top is less than 50? – techno Dec 17 '17 at 20:22
50 is just random value for example. Not special meaning. You can adjust value or add condition for your purpose. – seokgyu Dec 17 '17 at 20:35
Thank you. I have one more question. Is there any way to send id to javascript function inside div? In the code, I am calling displayTime( "12/12/2017", this.id); function. I need to pass date of notification and current element id but I can't get the id. Is there any way to send the current element id? – techno Dec 19 '17 at 04:17
https://stackoverflow.com/questions/3239598/how-can-i-get-the-id-of-an-element-using-jquery This may helpful for you. `$(this).attr('id')` returns id. – seokgyu Dec 19 '17 at 05:20

Remove seen notifications based on scrolling using Jquery/Javascript/PHP

1 Answers1