Search code examples
jqueryviewport

jQuery viewport with visible()

I have this jQuery code that sets a message as read when the document has focus and the message in the viewport:

$('.message').each(function() {
    var the_message = $(this);
    var message_id = $(this).data('id');
    if ($(this).hasClass('message-not-read')) {
        if ($('#message-' + message_id).visible() && document.hasFocus()) {
            $.get('message-set-read.php?message-id=' + message_id, function(data) {
                if (data == 'is-set-read') {
                    the_message.removeClass('message-not-read');
                }
            });
        }
    }
});

The problem is that when the message is bigger than the viewport this it will not be set as read, the whole message must be within the viewport.

How to set it as read when the user scrolls the message through the viewport in smaller screens.

Solution

  • If you're using the jquery-visible plugin, it has options to trigger on partial visibility - .visible( true ) - docs at https://github.com/customd/jquery-visible

    $('.message').each(function() {
    var the_message = $(this);
    var message_id = $(this).data('id');
    if ($(this).hasClass('message-not-read')) {
        if ($('#message-' + message_id).visible( true ) && document.hasFocus()) {
            $.get('message-set-read.php?message-id=' + message_id, function(data) {
                if (data == 'is-set-read') {
                    the_message.removeClass('message-not-read');
                }
            });
        }
    }
});