I want to check if an element is visible and if yes, I want to scroll down to it. I am trying to achieve that with the following jquery:
var j = jQuery.noConflict();
jQuery(document).ready(function($) {
if(j('#element').css('display') == 'block'){
j('body').scrollTo('#target');
};
});
but it does not work.
// jQuery no conflict mode
var j = $.noConflict();
// retain meaning of jQuery's handle (optional but makes it
// sometimes easier if you don't use one-letter assignments
// of jQuery)
(function($){
// document read
$(function(){
// if element is visible (a visible #element was found)
if $('#element:visible').size() > 0){
// scroll to #target
$('body').scrollTo('#target');
}
});
})(j);
:visible
makes it easier. You're can't just test against display=='block'
, you'd also have to test for inline-block
and others in addition to checking the visibility
setting. For example, the element could have display:block:visibility:hidden
which doesn't make it :visible
.