Home

jQuery is display block or none

Created August 29, 2010

jQuery is excellent for creating compelling user interfaces. Some of the most common jquery functions include the .show, .hide, .toggle, .slideDown, .slideUp, or .slideToggle. Each of these functions toggle the CSS display attribute of that particular object. if it is hidden the display is set to 'none' otherwise if it is shown the display value is set to 'block'.

I wish jQuery would incorporate a .isDisplayed function; however, it is not available. There is the .isVisible function; although, this only returns true or false whether the visible attribute is set to visible or hidden. As we all know the best way to show and hide an element on a page is to toggle the display attribute. So, with all that said here is a simple function which will return true or false based on an objects display value.

//************************************************************
//
//	isDisplayed('#div_id') will return true if the object is
//	displayed on the screen otherwise it will return false
//
//************************************************************

function isDisplayed(object)
{
	// if the object is visible return true
	if($(object).css('display') == 'block')
	{
		return true;
	}
	
	// if the object is not visible return false
	return false;
}

Enjoy! ;)