How to add multiple CSS property in JavaScript If statement? [duplicate]

Question

I have this script

$(document).ready(function() {
            setInterval(function() {
              if ($('#myfooter').css('visibility') == 'hidden'){
                    document.location.href = "http://www.templatezy.com";
                }
            }, 3000)
        })

Since the above script have only css property "visibility:hidden" while i also want to include "visibility:collapse" property in the script by using OR operator.

So can anyone provide me coding something like below example.

$(document).ready(function() {
            setInterval(function() {
              if ($('#myfooter').css('visibility') == 'hidden')||.css('visibility') == 'collapse'){
                    document.location.href = "http://www.templatezy.com";
                }
            }, 3000)
        })

This one is just example it does not work. I just share idea what i want..I want to use OR operator rather than using separate script for "visibility:collapse". i hope you guys will add OR operator in the existing script by adding "visibitity:collapse" proeprty too. thanks

**

OR

** Guys You can see here.. i shared both script below...now make it one script by adjusting visibility:hidden and visibility:collapse property in one line. I hope you can now understand...using two script will increase coding make it one by using these two css property in one line. thanks

$(document).ready(function() {
        setInterval(function() {
            if ($('#myfooter').css('visibility') == 'hidden') {
                document.location.href = "http://www.templatezy.com";
            }
        }, 3000)
    })

$(document).ready(function() {
        setInterval(function() {
            if ($('#myfooter').css('visibility') == 'collapse') {
                document.location.href = "http://www.templatezy.com";
            }
        }, 3000)
    })

What is changing the visibility of the footer? Checking this with an interval is... not a good way of doing this at all. — Kevin B
– Kevin B, Commented Dec 10, 2019 at 21:56
@HereticMonkey i think yes....the simple thing is that i want to add visibility:collapse property to the existing script. It has only visibility:hidden property and i want to add the visibility:collapse property too with OR operator. something like that for #footer add css If (visibility:hidden || visibility:collapse) do this {} — Jun Rung
– Jun Rung, Commented Dec 10, 2019 at 22:01
@JunRung but your if statement doesn't set any CSS properties at all; it just changes the document URL. It's not clear what it is that you're asking here. — Pointy
– Pointy, Commented Dec 10, 2019 at 22:05
"If you people don't understand" - Pro tip: This is not how one asks for help from a community of volunteers. Aside from that, the answers posted below successfully address what's being asked. It's up to you to define for us what "isn't working" in the solution. For all anybody here knows you didn't apply the solution properly, or have another problem unrelated to the question being asked. One of the answers posted has a runnable code snippet, clearly demonstrating that it "works" as designed. If further help is needed, you need to clarify the problem. — David
– David, Commented Dec 10, 2019 at 22:13

Pointy · Accepted Answer · 2019-12-10 21:46:53Z

1

Simplest thing to do is get the visibility value and save it:

           let vis = $("#myfooter").css("visibility");
           if (vis == 'hidden' || vis == 'collapse'){
                document.location.href = "http://www.templatezy.com";
           }

Your solution was (as you probably noted) a syntax error. It could have been fixed by repeating $("#myfooter") on the other side of the || operator, but then you'd have two jQuery calls to go and find the same element.

answered Dec 10, 2019 at 21:46

Pointy

415k62 gold badges600 silver badges631 bronze badges

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

5 Comments

Jun Rung Over a year ago

its not working

Pointy Over a year ago

@JunRung when you're asking for help here, you have to help us understand. Saying "it's not working" tells me absolutely nothing about the problem.

Ivan86 Over a year ago

@Pointy The craziest thing is we got downvoted - at least I did - for presenting a valid solution. Not an issue, just pretty ironic.

Jun Rung Over a year ago

@Pointy check my updated script after OR above...what i want thanks

Jun Rung Over a year ago

@Pointy you and Ivan86 shared script working fine..i was getting error from template. So thanks bundles to both of you...it working fine.

Ivan86 · Accepted Answer · 2019-12-10 22:29:26Z

You can save the visibility of the element in a variable in order to make the if statement simpler and easier to read. Also, you don't want to call $('#myfooter').css('visibility'); twice if you can do it once.

Below is an example of the same code handling both visibilities:

visibility: hidden

$(document).ready(function() {
  setInterval(function() {
    let visibility = $('#myfooter').css('visibility');
    if (visibility == 'hidden' || visibility == 'collapse') {
      document.location.href = "http://www.templatezy.com";
    }
  }, 3000);
});

#myfooter {
  visibility: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="myfooter"></div>

visibility: collapse

$(document).ready(function() {
  setInterval(function() {
    let visibility = $('#myfooter').css('visibility');
    if (visibility == 'hidden' || visibility == 'collapse') {
      document.location.href = "http://www.templatezy.com";
    }
  }, 3000);
});

#myfooter {
  visibility: collapse;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="myfooter"></div>

@JunRung: Both posted answers appear to be doing exactly what they intend to do. Please specify what is "not working" about them.
@JunRung It already does that. The code checks if the element has visibility hidden OR collapse and if it does, it will execute the document.location.href = "http://www.templatezy.com";.
@JunRung: Perhaps you could edit your question to include an example which attempts to use this solution, and in that example demonstrate/explain what isn't working as expected?
@JunRung Did you try running the example above? You can click the "Run code snippet" button to test it.
@Ivan86 Thanks buddy your code is working..i have issue with my template it is working fine...upvote to both of you..thanks bundles

Collectives™ on Stack Overflow

How to add multiple CSS property in JavaScript If statement? [duplicate]

OR

2 Answers 2

5 Comments

13 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

OR

2 Answers 2

5 Comments

13 Comments

Linked

Related