use if statement to check if an element is display: block jquery

Question

I'm trying to check if an element is display block, and if it is then i want to execute some code. Below is my code, its a large function but where I'm trying to check if a div is display block is at the bottom, and if it is display block then i want to execute the blur method. As you can see near the bottom, I started writing if ($suggestionsWrapper === and my intention was to write if suggestions wrapper is display none, then do this. I just can't figure out how to execute this, what I've written doesn't work. Also I am new to all of this so sorry if this is really messy or doesn't make sense, still very much learning.

 //Header Search Handler
    function headerSearchHandler(){
        var $searchInput = $(".header-search input[type=text]"),
            $searchSubmit = $(".header-search input[type=submit]"),
            $mobSearchBtn = $(".mobile-search-btn"),
            $myAccountText = $(".menu-utility-user .account-text"),
            $miniCart = $("#header #mini-cart"),
            $searchForm = $(".header-search form"),
            $headerPromo = $(".header-promo-area");
            $suggestionsWrapper = $('#suggestions-wrapper');

//        
        $mobSearchBtn.on("click touchend", function(e) {

            $(this).hide();
            //$myAccountText.hide();
            $searchInput.show();
            $searchInput.addClass('grey-line');
            $searchSubmit.show();
            $miniCart.addClass("search-open");
            $searchForm.addClass("search-open");
            setTimeout(function() {
                $searchInput.addClass("active").focus();
            }, 100);
            e.stopPropogation();

        });

        $searchInput.on("click touchend", function(e) {
             $searchInput.addClass('grey-line');
             e.stopPropogation();

        }).blur(function(e) {
            var $this = $(this);

            if($this.hasClass("active")){
                $this.removeClass("active");
                $searchSubmit.hide();
                $mobSearchBtn.show();
                $miniCart.removeClass("search-open");
                $searchForm.removeClass("search-open");
            }
        });
        $searchInput.focus(function(e){
            $(this).css('width', '145px');
        })
       if ($suggestionsWrapper.css('display') == 'none') {
        $searchInput.blur(function(e){
            $(this).removeClass('grey-line');
            $(this).css('width', '145px');  
        }
    })
    }//End Header Search Handler

Emad Dehnavi · Accepted Answer · 2018-05-07 03:36:03Z

2

You can create a helper method to check if display is block or not :

function checkDisplay(element) {
  return $(element).css('display') == 'block';
}

Then you can check it like :

 if(checkDisplay("#myElement")){
   console.log("Display is Block")
 }
 else {
   console.log("Display is NOT Block")
 }

here is an example : https://jsfiddle.net/fafgqv7v/

answered May 7, 2018 at 3:36

Emad Dehnavi

3,4795 gold badges24 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Simon · Accepted Answer · 2018-05-07 03:27:25Z

0

You can do something like this I think:

if ($suggestionsWrapper.css('display') == 'block')
{
   // true
} else {
   // false
}

Based off of your code I think you have the }) wrong, it should be:

if ($suggestionsWrapper.css('display') == 'none') {
        $searchInput.blur(function(e){
            $(this).removeClass('grey-line');
            $(this).css('width', '145px');  
        })
}

I hope this helps!

answered May 7, 2018 at 3:27

Simon

2,5484 gold badges36 silver badges82 bronze badges

Collectives™ on Stack Overflow

use if statement to check if an element is display: block jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related