Readability counts: марта 2012

Скрипт-игра. не скажу где используется и на что похоже;) Но это чудо эффективно может определить виден ли элемент клиенту (в текущем viewport'е) и как-то его отметить.

Собственно, листинг тестовой версии:

<html>
<head>
<title>TEST :: is element visible in viewport</title>

<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script>
/*
 * Получение текущего вьюпорта:  координаты верхнего левого угла и ширина с высотой
 */
function current_viewport()
{
 var w = $(window);
 
 return {
  "left": w.scrollLeft(),
  "top": w.scrollTop(),
  "width": w.width(),
  "height": w.height()
 };
}


/*
 * Проверка находится ли объект во вьюпорте
 *
 * paddings = {
 *     "left": ...,
 *     "top": ..., 
 *     "right": ...,
 *     "bottom": ...
 * }
 * эффективно увеличивают размеры объекта. по умолчанию 0
 */
function in_viewport(selector, paddings)
{
 var el = $(selector);
 var off = el.offset();
 var dim = {
  "width": el.width(),
  "height": el.height()
 };
 
 if(!paddings)
 {
  paddings = {
   "left": 0,
   "top": 0,
      "right": 0,
      "bottom": 0
  };
 }
 
 var viewport = current_viewport();
 
 return (
  (off.top - paddings.top) >= viewport.top &&
  (off.left - paddings.left) >= viewport.left &&
  (off.top + dim.height + paddings.bottom) <= (viewport.top + viewport.height) &&
        (off.left + dim.width + paddings.right) <= (viewport.left + viewport.width)
 );
}

/*
 * Помечает объект-ответ, как прочтенный
 */
function mark_as_read(obj)
{
    $(obj).css({
        "border": "1px solid #eeeeee"
    });
    $(obj).data('is_read', true);
}


$(document).ready(function() {
 
 // паддинги для проверки попадает ли объект во вьюпорт
 var paddings = {
        "left": 0,
        "top": 0,
        "right": 0,
        "bottom": 0
    };
 
 for(var i = 0; i < 40; i++)
 {
  $('<div class="ticket_reply"></div>').css({
   "height": "100px",
   "margin-bottom": "20px",
   "border": "1px solid blue"
  }).appendTo('body');
 }
 
 var replies = $('.ticket_reply');
 
 replies.each(function(i) {
  // отметим видимые при загрузке
  if( in_viewport(this, paddings) )
     mark_as_read(this);
 });
 
 // зарегистрируем проверку прочтения сообщений по скроллингу
 $(window).scroll(function() {
  replies.each(function(i) {
   if( !$(this).data('is_read') && in_viewport(this, paddings) )
       mark_as_read(this);
  });
 });
 
});
</script>

</head>
<body>

</body>
</html>

За основу взят вот этот пост на stackoverflow: http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport

Readability counts

вторник, 13 марта 2012 г.

Пометка элемента как просмотренного с jquery

вторник, 13 марта 2012 г.

Пометка элемента как просмотренного с jquery

вторник, 13 марта 2012 г.