Menu
I am trying to find out if this is the correct way to get state of visibility of an div container which has position: absolute.
I have a sidebar on the left of my viewport. When clicking the "sidebar-button" the "sideBar" gets animated out of the visible area.
jQuery:
$('#sideBarButton').click(function(){
sidebar = $("#sideBar").outerWidth();
if(!$("#sideBar").hasClass('outof'))
{
$("#sideBar").animate({left: screenW},100).addClass('outof');
$("#boardContent").animate({width: screenW},200);
$("#sideBarButton").animate({left: "+=" + (sidebar -3)},100);
}
else
{
$("#boardContent").animate({width: bcW}, 50);
setTimeout(function(){
$("#sideBar").animate({left: screenW - sidebar}, 200).removeClass('outof');
$("#sideBarButton").animate({left: "-=" + (sidebar -3)},200);
}, 120);
}
$(this).find('img').toggle();
});
Since the sideBar now is not visible at all (for my eyes) and the left position of the sidebar is bigger than document.width my question is can I get the state of visibility (of sideBar) like this:
if($("#sideBar").is(":visible"))...
or is there a better way? I mean how does jQuery decide if an element is visible or not?
403
When an element is in the viewport, it appears in the visible part of the screen. If the element is in the viewport, the function returns true . Otherwise, it returns false .
jQuery position() MethodThe position() method returns the position (relative to its parent element) of the first matched element. This method returns an object with 2 properties; the top and left positions in pixels.
So even if it's a part of a element but it covers the full height of the screen, it should be 100% in viewport.
static : every element has a static position by default, so the element will stick to the normal page flow. So if there is a left/right/top/bottom/z-index set then there will be no effect on that element. relative : an element's original position remains in the flow of the document, just like the static value.
To quote jQuery itself
Elements are considered visible if they consume space in the document. Visible elements have a width or height that is greater than zero.
Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout.
So with visible, jQuery does not take into account elements that are pulled out of the viewport. Eg. if you scroll down a page, the header is still deemed visible, although you cannot see it with the eye.
To check if the sidebar is visible, some (not so) complicated calculations have to be done by yourself, or just add a class or data attribute when the sidebar is out, like you have already done using the outof class.
154
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
