How to execute JQuery function when CSS display block is detected

Question

I have an HTML code with 2 types of messages when a Sign up DIV is clicked. When Sign Up error is clicked, the error message is displayed. When sign Up success is clicked, the success message is displayed. By default these messages are set to display:none.

My target output is to create a separate jQuery function "detectDisplay()" that executes "ONLY when success message has a CSS code display:block".

Below is my code. Any help is appreciated. Thanks.

CSS:

.cs_error { display: none; }
.cs_success { display: none; }

HTML:

<div class="cs_signUp" onclick="showError(); detectDisplay();">Sign up &raquo; error </div>
<div class="cs_signUp" onclick="showThanks(); detectDisplay();">Sign up &raquo; success </div>
<br/>
<div class="cs_success">
    <div>Thank you for signing up!</div>
</div>
<div class="cs_error">
    <div>Invalid input! Please try again!</div>
</div>

SCRIPT:

function showError() {
    $(".cs_success").css("display","none");
    $(".cs_error").css("display","block");
}

function showThanks() {
    $(".cs_error").css("display","none");
    $(".cs_success").css("display","block");
}

function detectDisplay() {

}

Since you want to fire the function only when the success message is displayed, you don't even have to check for the CSS display property. Just call the function within the showThanks() function will suffice, no? — Terry
– Terry, Commented Jan 8, 2016 at 6:54
Thanks for the comment Terry. As mentioned in my initial description, my target is to create a "separate" function. As in my implementation, the function showThanks() is somewhat hidden somewhere in the main script and untoucheable. I included showThanks() function to demonstrate in this mockup. — Philcyb
– Philcyb, Commented Jan 8, 2016 at 7:26

Bhojendra Rauniyar · Accepted Answer · 2016-01-08 06:44:56Z

2

You can check the element if it is visible?

if($('.cs_success').is(':visible')){
  //do stuff
}

answered Jan 8, 2016 at 6:44

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

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

2 Comments

Philcyb Over a year ago

Thanks. I'll give it a try.

Philcyb Over a year ago

Thanks. This one works locally. Manjot's suggestion also worked. I am still implementing it in the production merging it with other codes.

Manjot · Accepted Answer · 2016-01-08 06:51:01Z

2

you can use this to check if the element css is display block.

     <script type="text/javascript">
       if($('.cs_success').css('display') == 'block') { }
    </script>

answered Jan 8, 2016 at 6:51

Manjot

671 silver badge9 bronze badges

Comments

Ibrahim Khan · Accepted Answer · 2016-01-08 08:30:00Z

1

Your detectDisplay() should be like following.

function detectDisplay() {
    if($('.cs_success').is(':visible')){
        //do your task here
    }
}

answered Jan 8, 2016 at 8:30

Ibrahim Khan

20.8k7 gold badges46 silver badges57 bronze badges

Collectives™ on Stack Overflow

How to execute JQuery function when CSS display block is detected

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related