Jquery if then statement for css value
if ($('div.x').css('height') === 'auto') {
$('.y').removeClass('a');
}
Targeting CSS Properties Through If/Else Statement
If you’re using jQuery (and it looks like you are) then you’re almost there:
if ($("#someObject").css('opacity') == 1) {
// do this
} else if ($("#someObject").css('opacity') == 0){
// do this instead
};
would be the correct code.
To be more specific about what this is doing, the .css()
method in jQuery when used with a single parameter is an accessor for the computed CSS on an element - pass in a CSS rule and you’ll get the set value back.
If I was going to make any change it’d be to cache the value first so that you don’t make a possible multiple selection / evaluation call. E.g.
var setOpacity = $("#someObject").css('opacity');
if (setOpacity == 1) {
// do this
} else if (setOpacity == 0){
// do this instead
};
if/else statement checking css attributes jquery
You need to put the IF/ELSE in a function. Then call that function when you want it to run on the change in height.
Like so:
function myFunction(){
if($(".header-wrapper").height() == 100){
console.log("true");
} else {
console.log("false");
};
};
then when you want to use it you can do myFunction();
jQuery if/else statement CSS
It appears that the right answer is to write the full path to the image. So, use url(http://www.myhost.com/img/image.png)
instead of url(img/image.png)
.
jQuery - use css in if statement argument
For Conversion of px
and vw
refer this
1px = (100 / document.documentElement.clientWidth)vw
e.g. — If your viewport was 500px
wide (equals by definition to 100vw
) then
1px = (100 / 500) = 0.2vw
Plus you had a syntax error ..Please handle the quotes properly
alert('you\'re good to go!');
jquery if (css_attribute = value)
The css
JQuery method, when given only one parameter, will return the value for the given paramenter. You can try this:
var color = $('.box').css('background-color');
if (color == 'rgb(0, 0, 255)' || color == 'blue') // =='blue' <- IE hack
alert("it's blue!\nColor detected: " + color);
The above sample will only work for the first element in the JQuery selector, therefore you should use the .each
JQuery method to iterate through the whole selector if you have more than one element in it.
Please note that the .css
JQuery method returns a RGB combination in most browsers (except IE), so testing it against a string such as blue
will not suffice for non-IE browsers. You can test that in the JQuery API site and my fiddle.
And here's with the proper .each
iteration:
$('.box').each(function(i){
var color = $(this).css('background-color');
if (color == 'rgb(0, 0, 255)' || color == 'blue') // =='blue' <- IE hack
alert("div " + i + " is blue!\nColor detected: " + color);
});
JSFiddle
Edit: over a year and half later, I feel like this answer deserves an update.
For most use cases, I'd recommend using a CSS class:
.blue {
color: blue;
}
This allows the usage of the addClass()
, removeClass()
, toggleClass()
methods for manipulation, as well as hasClass()
for checking:
if ( $('#myElem').hasClass('blue') ) {
//it has the .blue class!
}
This works seamlessly in all browsers without needing hacks, and as a plus you get better separation of concerns -- that is, if your styling ever changes, say .blue { color: lightblue; }
, the JS will keep working without modifications.
Note: of course, this approach is not suitable for a couple rare use cases where the color value is dynamically generated (e.g. using Math.random()
or picking a color value off a canvas pixel), in these rare use cases you can still use the first solution in this answer.
jquery css() in if else condition
Of course you could also just add a class
to #News
and apply all your styles in your CSS
#News.closed {
height: 45px;
width: 200px;
overflow: hidden;
}
#News.closed div {
right: -10px;
}
#News.closed div label {
font-size:12px;
top: -14px;
}
}
#News.closed div label p {
top: -15px;
right: -20px;
}
demo: http://jsfiddle.net/pavloschris/7G3Z4/10/
jQuery/javascript if-statement with css values
The javascript originally posted:
function bubbleTest(){
if($("#headlights").css("display") == "none" ) {
$("#speech-bubble").fadeOut('600');
$("#speech-bubble-sun").fadeOut('600', function(){
$("#speech-bubble-dark").fadeIn('600');
});
} else{
$("#speech-bubble").fadeOut('600');
$("#speech-bubble-dark").fadeOut('600', function(){
$("#speech-bubble-sun").fadeIn('600');
});
}
}
bubbleTest();
surprisingly works as intended, here is proof:
http://codepen.io/anon/pen/zoNevZ
The problem must have been how I was calling the function, which I did not provide at the time (5 years ago).
CSS manipulation in jQuery with if statement
Explanation : I have made a function changeScrSize()
, which makes the changes in CSS properties. In ready
event handler, the function is called, and sets the value of margin-left
accordingly. Besides that, I have added a resize
event handler, which modifies the value of margin-left
when you resize the screen. So it is responsive :)
NOTE : Please view the output on full screen mode, to see the changes.
var width;
$(document).ready(function(){
changeScrSize();
});
function changeScrSize(){
let box = $('.navbar-brand');
width = $(window).width();
(width < 800) ? box.css("margin-left", 0) : box.css("margin-left", "100px");
}
$(window).on("resize", changeScrSize);
* {
margin: 0;
padding: 0;
}
.navbar-brand {
background: red;
width: 25vh;
height: 25vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar-brand">
</div>
Related Topics
Scrolling Log File (Tail -F) Animation Using JavaScript
Avoid Having to Double-Click to Toggle Bootstrap Dropdown
Angular - Ngfor* Four Elements on Row
Absolute Positioned Floating Header Jitters in Safari
Browser Support for Angular Material
How to Set the Margin of an Object in Ie
Catch JavaScript Event in iOS Wkwebview with Swift
Change Image on Radio Button Click Using Js or HTML
Selecting Text in a Div Programmatically Using Position Values Belong to That Text
Are There Any Standards for Mobile Device Web Browsers in Terms of Thread Sleeping
React-Native Updating List View Datasource
How to Jump to Top of Browser Page
Why Blocking Event Loop Does Not Block CSS Animation
Update Progressbar in Each Loop
Detect If Page Is Loaded Inside Wkwebview in JavaScript