PLATFORM
  • Tails

    Create websites with TailwindCSS

  • Blocks

    Design blocks for your website

  • Wave

    Start building the next great SAAS

  • Pines

    Alpine & Tailwind UI Library

  • Auth

    Plug'n Play Authentication for Laravel

  • Designer comingsoon

    Create website designs with AI

  • DevBlog comingsoon

    Blog platform for developers

  • Static

    Build a simple static website

  • SaaS Adventure

    21-day program to build a SAAS

Written By
Views

jQuery is display block or none

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! ;)

Comments (0)

loading comments