how to check whether element is visible on screen

Sometime we need to load some content when that element is visible on browser. So first we need to find whether that element is visible on the browser or not.


Below is the demo example :


Javascript function :
function isVisible(elem)

var TopView = $(window).scrollTop();
var BotView = TopView + $(window).height();
var TopElement = $(elem).offset().top;
var BotElement = TopElement + $(elem).height();
return ((BotElement <= BotView) && (TopElement >= TopView));


HTML Part :

<div id="my_element" class="no_visible">

<script type="text/javascript">
$(window).scroll(function ()

if($("#my_element").hasClass("no_visible"))
isOnView = isVisible("#my_element");
if(isOnView)
$("#my_element").removeClass("no_visible");



);

</script>
</div>


Use Facebook to Comment on this Post


Comments

Popular posts from this blog

Get URL Parameters Using Javascript

PHP 5.4 beta1 released

Ternary Operators