TheAnonymous/test_if_element_in_viewport.html

## test_if_element_in_viewport.html

<!DOCTYPE html>
<html>
    <header>
         <meta charset="utf-8"/>
         <title>Test if element is in viewport</title>
    </header>
    <body>

    </body>
    <script>
        "use strict"
        var foo = document.getElementsByTagName("body")[0];
        for (var i=0;i < 10000; i++){
            var node = document.createElement("p");
            node.appendChild(document.createTextNode("Foobar"));
            foo.appendChild(node);
          }
          setInterval(function(){
          var elements = document.getElementsByTagName("p");
          var windowBottom = (window.pageYOffset + window.innerHeight);
          var windowTop = window.pageYOffset;
          console.log(windowBottom);
          console.log(windowTop);
          var start = (new Date()).getTime();
          for (var i = 0; i < elements.length; i++) {
              var tmp = elements[i];
              if((tmp.offsetHeight + tmp.offsetTop) > windowTop && (tmp.offsetHeight + tmp.offsetTop) < windowBottom){
                  //console.log("Element sichtbar", tmp);
                  tmp.style.color = "Red";
                  tmp.style.fontSize = "large";
              }
              else
              {
                tmp.style.color = "Black";
                tmp.style.fontSize = "medium";
              }
          };
          var end = (new Date()).getTime();
          console.log("Stopwatch", (end - start));
          }, 3000);


    </script>
</html>

	<!DOCTYPE html>
	<html>
	<header>
	<meta charset="utf-8"/>
	<title>Test if element is in viewport</title>
	</header>
	<body>

	</body>
	<script>
	"use strict"
	var foo = document.getElementsByTagName("body")[0];
	for (var i=0;i < 10000; i++){
	var node = document.createElement("p");
	node.appendChild(document.createTextNode("Foobar"));
	foo.appendChild(node);
	}
	setInterval(function(){
	var elements = document.getElementsByTagName("p");
	var windowBottom = (window.pageYOffset + window.innerHeight);
	var windowTop = window.pageYOffset;
	console.log(windowBottom);
	console.log(windowTop);
	var start = (new Date()).getTime();
	for (var i = 0; i < elements.length; i++) {
	var tmp = elements[i];
	if((tmp.offsetHeight + tmp.offsetTop) > windowTop && (tmp.offsetHeight + tmp.offsetTop) < windowBottom){
	//console.log("Element sichtbar", tmp);
	tmp.style.color = "Red";
	tmp.style.fontSize = "large";
	}
	else
	{
	tmp.style.color = "Black";
	tmp.style.fontSize = "medium";
	}
	};
	var end = (new Date()).getTime();
	console.log("Stopwatch", (end - start));
	}, 3000);



	</script>
	</html>