How to add multiple CSS property in JavaScript If statement?

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, Dec 10 '19 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, Dec 10 '19 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, Dec 10 '19 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, Dec 10 '19 at 22:13

Ivan86 · Answer 1 · 2019-12-10T22:29:26.493

1

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>

edited Dec 10 '19 at 22:29

answered Dec 10 '19 at 21:46

Ivan86

5,695
2
14
30

Your script is not working – Jun Rung Dec 10 '19 at 21:54
@JunRung Thanks for letting me know, will check and edit. – Ivan86 Dec 10 '19 at 21:55
2

@JunRung: Both posted answers appear to be doing exactly what they intend to do. Please specify what is "not working" about them. – David Dec 10 '19 at 21:58
@JunRung There you go, a working example. Run it below and let me know. After 3 seconds the webpage `http://www.templatezy.com` should show up. – Ivan86 Dec 10 '19 at 21:59
Please check my updated script so you know the idea. – Jun Rung Dec 10 '19 at 22:04
@Ivan86 can you call $('#myfooter').css('visibility') twice in one add visibility:hidden while in other add visibility:collapse ...if you can do this..thanks – Jun Rung Dec 10 '19 at 22:14
@JunRung Sorry, didn't understand that. Can you explain please. – Ivan86 Dec 10 '19 at 22:18
@Ivan86 i want somthing like this: $(document).ready(function() { setInterval(function() { if ($('#myfooter').css('visibility') == 'hidden') if ($('#myfooter').css('visibility') == 'collapse') { document.location.href = "http://www.templatezy.com"; } }, 3000) }) but it should work – Jun Rung Dec 10 '19 at 22:19
1

@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";`. – Ivan86 Dec 10 '19 at 22:21
1

@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? – David Dec 10 '19 at 22:22
1

@JunRung Did you try running the example above? You can click the "Run code snippet" button to test it. – Ivan86 Dec 10 '19 at 22:26
@JunRung Here... I'll add one more example with the same code but with `visibility: collapse` so you can see that it coverrs both situations. – Ivan86 Dec 10 '19 at 22:27
1

@Ivan86 Thanks buddy your code is working..i have issue with my template it is working fine...upvote to both of you..thanks bundles – Jun Rung Dec 10 '19 at 22:29

score 1 · Answer 2 · answered Dec 10 '19 at 21:46

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 '19 at 21:46

Pointy

405,095
59
585
614

its not working – Jun Rung Dec 10 '19 at 21:53
2

@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. – Pointy Dec 10 '19 at 22:04
@Pointy The craziest thing is we got downvoted - at least I did - for presenting a valid solution. Not an issue, just pretty ironic. – Ivan86 Dec 10 '19 at 22:07
@Pointy check my updated script after OR above...what i want thanks – Jun Rung Dec 10 '19 at 22:11
1

@Pointy you and Ivan86 shared script working fine..i was getting error from template. So thanks bundles to both of you...it working fine. – Jun Rung Dec 10 '19 at 22:30

How to add multiple CSS property in JavaScript If statement?

OR

2 Answers2