We Keep Coding

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

This question already has answers here:
JavaScript: Simple way to check if variable is equal to one of two or more values? [duplicate]
(8 answers)
Closed 3 years ago.
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)
})

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.

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>

Javascript - onclick function change boolean value and change attr visibility

So I'm learning Javascript and I have a doubt on changing a global variable with boolean variable, while changing the attr of visibility on an element.
The code is this:
var lastView=false;
$("#idShipmentActionsCombo-icon").on('click', function(){
if (lastview=false){
$('#idShipmentActionsCombo-lb').attr('style', 'visibility: visible');
lastView=true;
}
else if(lastView=true){
$('#idShipmentActionsCombo-lb').attr('style', 'visibility: hidden');
lastView===false;
}
}
So #idShipmentActionsCombo-icon is the element I click in, #idShipmentActionsCombo-lb and this is what I want to show and hide depending on the value of lastView.
Thanks in advance, and I apologize for my English since it's not my main language.

Since you use jQuery use .toggle() method instead of booleans, conditions and style.
$("#idShipmentActionsCombo-icon").on('click', function(){
$('#idShipmentActionsCombo-lb').toggle();
})

Looks like you're missing a closing ); at the very end from your .on( In addition, there are a few cases where "===" and "=" are confused and where capitalization is incorrect. See this: http://jsfiddle.net/215sxj90/3/

In my opinion you're confusing assignment with logical operators.
The following is the assignment:
lastView = true;
and the following is the logical operator - comparison:
lastView === true
The latter should be used in your conditional statements - if, else if etc.:
var lastView = false;
$("#idShipmentActionsCombo-icon").on('click', function () {
if (lastview === false) {
$('#idShipmentActionsCombo-lb').attr('style', 'visibility: visible');
lastView = true;
}
else if (lastView === true) {
$('#idShipmentActionsCombo-lb').attr('style', 'visibility: hidden');
lastView = false;
}
}

jQuery check if element has a specific style property (display)

I need to have a if/else statement inside a function. How do you check if an element (e.g. #cadrage) has a display style property? This is what I have found around the net and yet, it is not working..
if( $('#cadrage').attr('style').display == 'block' ) {
// do something
} else {
// do something
}

The jQuery .css() function seems to be what you want.
if( $('#cadrage').css('display') == 'block' ) {
console.log('It equal block');
} else {
console.log('It did not equal block');
}
http://jsfiddle.net/SamMonk/FtP6W/

Your code doesn't work because style property only contains inline styles, not those coming from a stylesheet.
To get the computed style, you can use css method:
$('#cadrage').css('display') == 'block'

Try this:
if( $('#cadrage').css('display')== 'block' ) {
// do something
} else {
// do something
}

You can get your element display property with the following code snippet
$('#cadrage').css('display');
Note that the css method can return any css property of your element so it is very handy.
Therefore your statement code will be:
if( $('#cadrage').css('display').display == 'block' ) {
// do something
} else {
// do something
}

Not exactly what you ask for, but perhaps what you are looking for...
You can use the :visible pseudo selector to check if the element is visible:
if( $('#cadrage').is(':visible')) {
// do something
} else {
// do something
}
Note that this doesn't actually check the display style, but rather if the element has a size so that it could be seen in the page.

hide() does not work at runtime

I write a script that can hide or show my classes by some considered radio buttons, but it does not work at runtime and does not change dynamically, any ideas?
My script:
$(document).ready(function() {
if (document.getElementById('addContent').checked) {
$(".contentForm").show();
$(".searchContentForm").hide();
}
else if (document.getElementById('editContent').checked ||
document.getElementById('deleteContent').checked) {
$(".searchContentForm").show();
$(".contentForm").hide();
}
else {
$(".searchContentForm").hide();
$(".contentForm").hide();
}
});​
JsFiddle Demo:
http://jsfiddle.net/BpMed/

Simplified code:
$(".searchContentForm").hide();
$(".contentForm").hide();
$('input[name=tContent]').click(function() {
if ($('#addContent').is(':checked')) {
$(".contentForm").show();
$(".searchContentForm").hide();
}
else if ($('#editContent').is(':checked') ||
$('#deleteContent').is(':checked')) {
$(".searchContentForm").show();
$(".contentForm").hide();
}
});
Refer LIVE DEMO
​

Please try this:
function forDynamic()
{
if (document.getElementById('addContent').checked) {
$(".contentForm").show();
$(".searchContentForm").hide();
}
else if (document.getElementById('editContent').checked ||
document.getElementById('deleteContent').checked) {
$(".searchContentForm").show();
$(".contentForm").hide();
}
else {
$(".searchContentForm").hide();
$(".contentForm").hide();
}
}
Add above code in your javascript. and each update time, you just make a call forDynamic();

For one, why are you using document.getElementById while using jquery?
You also need to wrap your if block in side of a function that is looking for those radios to be clicked. See this jsfiddle. I added a class of changeup to each checkbox, you of course can add whatever you'd like.
$(".changeUp").click(function() {
if ($('#addContent').is(':checked')) {
$(".contentForm").show();
$(".searchContentForm").hide();
}
else if ($('#editContent').is(':checked')) {
$(".searchContentForm").show();
$(".contentForm").hide();
}
else if ($('#deleteContent').is(':checked')) {
$(".searchContentForm").show();
$(".contentForm").hide();
}
else {
$(".searchContentForm").hide();
$(".contentForm").hide();
}
});

It's hard to say with so little context, but it looks like this function is only being executed on document.ready - the initial page load. You need to bind (http://api.jquery.com/bind/) your function to the change event of those checkboxes if you want something more dynamic.
very basic example of something similar:
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onchange

I know you already accepted an answer, but you can use toggle and pass in a condition - so true=show and false=hide - this pretty much gets rid of your duplication inside an if/else statement just to show/hide elements.
$(".searchContentForm").hide();
$(".contentForm").hide();
$('input[name=contentMng]').change(function() {
var adc = $('#addContent').is(':checked');
var edc = $('#editContent').is(':checked') || $('#deleteContent').is(':checked');
$(".contentForm").toggle(adc);
$(".searchContentForm").toggle(edc);
});
http://jsfiddle.net/HLmru/
​

jQuery: Checking if next element exists

Is there a way to check if a next element exists? Check my code:
if($("#people .making-of .mask ul li.current").next("li") != null) {
alert("Exists");
}
else {
alert("Dont exists");
}
What am I doing wrong? Thanks a lot!

Have you tried looking at .next('li').length?

Use jQuery .is(), using .is() you can even check what tag, class or ID next element have?
if($("#people .making-of .mask ul li.current").next().is('li')) {
alert("Exists");
}
else {
alert("Dont exists");
}

The briefest method is just:
if( $( ... ).next('li')[0] ) {
Since jQuery functions always return a jQuery object, it's never equal to null. But accessing a jQuery object like an array acts like you are using an array of DOM objects, so [0] will pull the first matched DOM element or null. Checking .length() against 0 works, as well.

Use the length method in jQuery:
if($(...).next().length > 0) {
alert("Exists.")
} else {
alert("Doesn't exist!")
}

if($("#people .making-of .mask ul li.current").next("li").length > 0) {
alert("Exists");
}
else {
alert("Dont exists");
}

Like the post above says, you need to check the length of the item. Jquery.next() will always return a jquery object, but if there is no next item, it will have a length of 0.
if($("#people .making-of .mask ul li.current").next("li").length > 0) {
alert("Exists");
}
else {
alert("Dont exists");
}

I think this is good to use like.
if ($(this).nextAll().length > 0) {
alert("Exists");
}else{
alert("Don't exists");
}