- Thanks to its browser window scroll, dimensions, and placement API, a few lines of jQuery code give you everything about an element on the page. To check if it is visible or hidden (assuming you checked that the element exists), use the visibility pseudo-selectors ":visible" or ":hidden":
if( $("#homeLnk:visible").length )
alert( "This element is visible!" );
// if($("#homeLnk:hidden").length) is true if it's hidden with CSSTip: jQuery returns the element as hidden if it currently has either of these CSS properties:
"visibility:hidden" or "display:none" - Check them individually with the css() function:if( $("#homeLnk").css("display") == "none" )
alert( "This element is hidden with display:none!" ); - While this tells you if the element can be seen, it doesn't tell you where on screen it is: as users scroll, the viewable area changes, and the element can be above the fold or below, and above / below the viewable area (out of sight) when the user has scrolled, or within the viewable area - here are the functions and properties to check an element's placement on the page:
Note: use $("#elm")[0].scrollHeight instead of $("#elm").height() to include padding when you retrieve the element's actual height. jQuery's "offset().top" does include any vertical margins.
- Here's a complete script that will tell you if an element is within or outside the viewable area:
var pageTopToDivBottom = $("#sstut").offset().top + $("#sstut")[0].scrollHeight;
var scrolledPlusViewable = $(window).scrollTop()+$(window).height();
// First check if the element is outside the viewable area:
if( $(window).scrollTop() > pageTopToDivBottom )
alert( "Element hidden (above viewable area)" );
else if( scrolledPlusViewable < $("#sstut").offset().top )
alert( "Element hidden (below viewable area)" );
else
alert( "Element visible! (within viewable area)" ); - To check if an element is above the fold (before scrolling), simply check this statement:
var isAboveTheFold = $("#sstut").offset().top < $(window).height();That statement evaluates to false if the element in question is below the fold (before scrolling).Tip: to check if the element is partially or completely visible above the fold, add an integer (desired number of pixels) or its full height ( $("#sstut")[0].scrollHeight ) to the end.
Email AOL Mail Gmail Hotmail Yahoo Mail MS Office Excel 2010 OneNote 2010 Outlook 2010 Word 2010 OS & Devices Kindle Fire Windows 7 Web Dev C# and .NET JavaScript jQuery