Check for unseen posts and update title

Question

I need to check wether the user has seen the post and change the document title based on how many posts he hasn't seen.

For example title with 2 unseen posts: "(2) - Post#123", or with no unseen posts: "Post #123".

I've looked into a couple of "scrolled into view" jQuery plugins, but I haven't found a good and quick solution to do this with ajaxed content (the posts are appended to a div, it checks for new every 5 seconds).

So for example this as markdown:

<div id="posts">
 <div class="reply" data-postid="1" data-seen="no">
 Post 1
 </div>
 <div class="reply" data-postid="2" data-seen="no">
 Post 2
 </div>
 <div class="reply" data-postid="3" data-seen="no">
 Post 3
 </div>
</div>

I'm guessing using an attribute for "seen" will be useful. Now how do I check if a user has seen (the posts have been scrolled by/on the screen) and store the unseen in a string to use in the title?

Useful info: The divs appended are gotten via xhr, they are echoed out as the body of another file "imported" or appended to #posts with xhr. The name of the function that is repeated every 5 seconds to get new posts is PostData().

EDIT: I'm trying this, but it's not working:

function isScrolledIntoView(elem){
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();

var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();

return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}


$(window).scroll(function(){
    isScrolledIntoView(".reply[data-seen='no']", function(){
        if ($(this) == true){
            $(this).attr("data-seen", "yes");
        }
    });
});

UPDATED WORKING CODE (for the bypassers):

function lescroll(){
        var amount = "0";
        $('.reply[data-seen="no"]').each(function(){
            amount++;
            if ( isScrolledIntoView(this) ) {
                $(this).attr("data-seen", "yes");
                amount--;
            };
        });
        document.title = "(" + amount + ") pagetitle";
        if (amount == 0){
            document.title = ">><?php echo($pageid); ?> - <?php echo($leboardname); ?> vikingchan";
        }
        setTimeout(lescroll, 5000); /* make it check while you are in another tab */
    }

$(window).scroll(function(){
    lescroll();
});
$(document).ready(function(){
    lescroll();
});

The simplest solution will be to make use of those "scrolled into view" jQuery plugins.. — T J, Sep 21 '14 at 14:39
@TJ None of the ones I've found have worked the way I wanted them to. They may return true if one unique object is in view and stuff, but I can't get it to work on each `.post` and so on. — Odin, Sep 21 '14 at 14:40
So you expect us to write a plugin for you which suits your needs..? — T J, Sep 21 '14 at 14:45
I found this: http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling — Mandera, Sep 21 '14 at 14:50
@TJ No I expect to get help, like this website was made for. — Odin, Sep 21 '14 at 15:07
@Mandera This only works on the first `.post` , it returns false on all of the other ones. I need to be able to count for every one that is scrolled into view, I updated the question with the code I'm using. — Odin, Sep 21 '14 at 15:12

score 0 · Accepted Answer · answered Sep 21 '14 at 15:25

0

To make your code run for all elements change the scroll callback to

$(window).scroll(function(){
    $('.reply[data-seen="no"]').each(function(){
        if ( isScrolledIntoView(this) ) {
            $(this).attr("data-seen", "yes");
        };
    });
});

But keep in mind that it might be a bit heavy since scroll is fired multiple times while scrolling. You might want to debounce the scroll event.

answered Sep 21 '14 at 15:25

Gabriele Petrioli

173,972
30
239
291

I tried changing the title like this, but for some reason the value is always wrong: `if ($('.reply[data-seen="no"]').length > 1){ document.title = "(" + $(".reply[data-seen='no']").size() + ") oldtitle"; }` – Odin Sep 21 '14 at 15:36
Via inspect element I see there are no `[data-seen="no"]` but for some reason, the title says "(2) oldtitle" – Odin Sep 21 '14 at 15:37
Where are you calling the code to change the title ? Do you have a link where we can see it in action ? – Gabriele Petrioli Sep 21 '14 at 15:41
@odin your title changing code has an `if` that will not allow the title to change if there are less than 2 unseen. `if ($('.reply[data-seen="no"]').length > 1)` You should remove this. – Gabriele Petrioli Sep 21 '14 at 15:48

score 0 · Answer 2 · answered Sep 21 '14 at 17:54

0

Try

$(window).on("scroll", function (e) {
    var title = function() {
    document.title = $("[data-seen=yes]").length === $(".reply").length
                     ? "Post#123" 
                     : "(" + $("[data-seen=no]").length + ")" + " - Post#123";
        return document.title
    };
    // console.log(document.title);
    $(".reply").each(function (i, el) {
        if (el.getBoundingClientRect().top <= window.innerHeight) {
            el.dataset.seen = "yes";
            title();
        } else {
            el.dataset.seen = "no";
            title();
        };
    });
    try {
      if (window.innerHeight + window.scrollY >= 
         Number($("[data-seen=yes]").css("height").replace(/px/, ""))) {

          $("[data-seen=yes]").next().data("seen", "yes");
          title();
          // console.log($("[data-seen=no]").length
          //               , $("[data-seen=yes]").length)
      }
    } catch (e) {
      console.log(e)
    };

}).trigger("scroll");

jsfiddle http://jsfiddle.net/guest271314/nqbbLuyL/

answered Sep 21 '14 at 17:54

guest271314

1
10
82
156

This adds up again when you scroll back? – Odin Sep 21 '14 at 18:04
Not certain what mean by "This adds up again when you scroll back?" ? If interpret correctly, yes, when `scroll` - either "down" , or "up" , `document.title` is changed , see `console` at jsfiddle. Thanks – guest271314 Sep 21 '14 at 18:07
I mean that the title changes back to 1, 2, 3 and so on when I scroll back up. The point of the script is to check if he's seen it. – Odin Sep 21 '14 at 18:09
Can add an action / function to "do stuff" when all `.reply` post have been seen . Or , alternatively , call `$(window).off("scroll")` - in which instance , would probably add a `namespace` to `scroll` event , if there were any _other_ `scroll` events were attached ; e.g., `$(window).on("scroll.seen")` , when all seen , `$(window).off("scroll.seen")` – guest271314 Sep 21 '14 at 18:15
I was just noting, your code is probably perfect for something else, but mine is already solved. – Odin Sep 21 '14 at 18:17

Check for unseen posts and update title

2 Answers2