Browser Focus Forked

by hardiksondagar

HTML

<div class='page1' id="1"></div>
<div class='page1' id="2"></div>
<div class='page1' id="3"></div>
<div class='page1' id="4"></div>
<div class='page1' id="5"></div>
<div class='page1' id="6"></div>
<div class='page1' id="7"></div>
<div class='page1' id="8"></div>
<div class='page1' id="9"></div>

CSS

.page1 {
    height: 300px;
    width: 500px;
    margin: 50px 0;
    background: gray;
    padding-top:20px;
    text-align:center;
    font-size:20px;
    color:white;
    text-shadow:2px 2px 2px #000;
    font-family:"Verdana";
}

JavaScript

jQuery(allInView);
jQuery(window).scroll(allInView);
var current=0;
var focusid=1;
var active=jQuery(".page1");
function isScrolledIntoView(elem) {
    
    var docViewTop = jQuery(window).scrollTop();
    var docViewBottom = docViewTop + jQuery(window).height();
    

    var elemTop = jQuery(elem).offset().top;
    var elemBottom = elemTop + jQuery(elem).height();
    active[current].innerHTML=docViewTop+","+docViewBottom+","+elemTop+","+elemBottom;
    //var docViewBottom = docViewTop + (elemBottom - elemTop) + 50;
    if((elemTop <= docViewTop))
    {
        if(current<active.length)
        {current++;}
     
    }
    if((elemTop >= docViewTop) && (elemBottom >= docViewBottom))
    {
           if(current>0)
           {current--;}
     
    }
   
    
    return ((docViewTop < (elemTop - 70)));
}

function allInView() {
    
    
    

    
     if (isScrolledIntoView(active[current])){                          
          active[current].innerHTML="Focus";
                                  active[current].style.backgroundColor="green";
                                            }
    else{
        //active[current].innerHTML="Focus Lost";
            active[current].style.backgroundColor="gray";
        
    }
    
    
    
    
    
   
    
    
}