2

I'm trying to make a row of div's which blinks in with time interval and one div should blink at a time. I have achieved this things.

Please see the demo : 

var arr = $(".boxes");  
var current = 0;  

function bgChange() {
  if (arr.length > 0) {
    arr.removeClass("active");     
    arr.eq(current).addClass("active");           
    current = (current + 1) % arr.length;
  }  
}  
setInterval(bgChange, 200);
.active {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>

Now, the case is like this, when the active class reaches the end of the visible part of page after that the records are there but the active record is not visible in visible portion of page. So, I want scroll the page with the active div.

Or

A paging can be added but that thing should also work automatically, like add active class in every div one-by-one and once the active class reaches the end div of the visible page than the page should be changed and process continues for adding active class to div.

halfer
  • 18,701
  • 13
  • 79
  • 158
Pikka pikka
  • 118
  • 7

2 Answers2

3

offset() method can be used to used to get the coordinates on current element, then .scrollTop( value ) can be used window. 

    var elem = arr.eq(current);
    elem .addClass("active");  
    //If element is not in view port
    if (elementInViewport2(elem.get(0)) == false) {
       $(window).scrollTop(elem.offset().top);  
    }       


var arr = $(".boxes");  
var current = 0;  

function bgChange() {
  if (arr.length > 0) {
    arr.removeClass("active");     
    var elem = arr.eq(current);
    elem.addClass("active");    
    if (elementInViewport2(elem.get(0)) == false) {
      $(window).scrollTop(elem.offset().top);  
    }
    current = (current + 1) % arr.length;
  }  
}  

function elementInViewport2(el) {
  var top = el.offsetTop;
  var left = el.offsetLeft;
  var width = el.offsetWidth;
  var height = el.offsetHeight;

  while(el.offsetParent) {
    el = el.offsetParent;
    top += el.offsetTop;
    left += el.offsetLeft;
  }

  return (
    top < (window.pageYOffset + window.innerHeight) &&
    left < (window.pageXOffset + window.innerWidth) &&
    (top + height) > window.pageYOffset &&
    (left + width) > window.pageXOffset
  );
}

setInterval(bgChange, 200);
.active {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>

With reference Prestaul answer to How to tell if a DOM element is visible in the current viewport?

Community
  • 1
  • 1
Satpal
  • 126,885
  • 12
  • 146
  • 163
  • Thanks for replying. I appreciate your code in one scenario it is working. But the record should scroll the page once it reaches the end of visible part of page. In your code its looking like the page is scrolling first and once it reaches the end than the active classes are added and than the color change of div is visible. – Pikka pikka Dec 21 '16 at 07:47
  • 1
    Many Many thanks, you saved my day. I wanted the same way. – Pikka pikka Dec 21 '16 at 09:03
1

You can check if the current highlighted element is out of the viewport and update scrollTop appropriately using something like this:

if (arr.eq(current).offset().top > viewportBottom)
  $window.scrollTop(viewportBottom);
if (arr.eq(current).offset().top < $window.scrollTop())
  $window.scrollTop(viewportTop);

See demo below:

var arr = $(".boxes");
var $window = $(window);
var viewportTop = $window.scrollTop();
var viewportBottom = viewportTop + $window.height();  
var current = 0;  

function bgChange() {
  if (arr.length > 0) {
    arr.removeClass("active");     
    arr.eq(current).addClass("active");           
    current = (current + 1) % arr.length;
    if (arr.eq(current).offset().top > viewportBottom)
      $window.scrollTop(viewportBottom);
    if (arr.eq(current).offset().top < $window.scrollTop())
      $window.scrollTop(viewportTop);
  }  
}  
setInterval(bgChange, 200);
.active {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
<div class="boxes">Test</div>
kukkuz
  • 37,972
  • 6
  • 47
  • 83