using jquery appear for checking if an element is visible on screen

Yes.. sometimes i like using jquery as well, as it can make things so easy! :)

Here is a quick demo using the JQuery Appear plugin so make an element change if it on or off screen. 

Plugin Link: https://cdnjs.com/libraries/jquery.appear 

This requires JQuery and also a Document Ready

* Still trying to get this demo code working properly

HTML

<div class="moo" id="moo">I Am Hidden (almost)</div>

CSS

.moo {
 height:100px;
 width:300px;
 border:3px solid #333;
 padding:30px;
 border-radius:3px;
 text-align:center;
}

Scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.appear/0.4.1/jquery.appear.js" integrity="sha512-dPZE9SLz1NVUX9tSX9TYOs2SyaJRBZC9ogOc/VasDFSFrxSDkXv3ZCdgkG8/AzHQ+YVklyqDgSS3aDgMradlNg==" crossorigin="anonymous"></script>

Javascript

$(document).ready(function(){
  $('#moo').on('appear', function(event, $all_appeared_elements) {
    // this element is now inside browser viewport
    $("#moo").text("i am visible");
  });
  $('someselector').on('disappear', function(event, $all_disappeared_elements) {
    // this element is now outside browser viewport
    $("#moo").text("i am <b>NOT</b> visible");
  });
});

/*
$(document).ready(function(){
 $('#moo').appear(function() {
  $("#moo").text("moo");
 });
});
$('<div>test</div>').appear();
*/
I Am Hidden (almost)

Page Views

This page has been viewed 115 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

β€πŸ‘©β€πŸ’»πŸ•Ή

Random Quote
I believe that in order to better your knowledge base, it takes a lot of failing in order to succeed. I don't consider anything a failure as long as you get back up and you learn from your own mistakes.
Unknown