CODEWITHSUNDEEP
jquerycssif-statement
Myles
Myles

Reputation: 812

How to edit CSS class via jQuery if statement

I have an if statement which checks the url for "ivnt", I would like the div "carriage-promo" to have height changed from it's dafault of 0px, to 40px.

I do not want to add a class or remove a class, I know how to achieve this already and it doesn't solve this problem I'm afraid.

Consider:

$(document).ready(function () {
 if(window.location.href.indexOf("invt") > -1) { 
    $('#promo-carriage').css{
          height: '40px'}
         }
      });

However, this is not working for me. Any suggestions? I'm quite sure this will be a syntax error, but I'm new to jQuery/JS!

Upvotes: 3

Views: 775

Answers (4)

McRui
McRui

Reputation: 1931

In summary, whenever you need to pass just one key + value pair, you can pass it as:

$(element).css("attribute","value");

while if you want to pass more than one declaration, use an object

$(element).css({height:"200px", width:"100px", backgroundColor: "red"}); or $(element).css({height:"200px"});

Note the differences between the two examples. In the object, you may or not, define the key inside the quotes, but preferably you should use the javascript definitions with no quotes and where "background-color" becomes backgroundColor: The syntax also changes. Note that in the object, you separate the key and the value with double-colon : and the different pairs with comma.

For further reference, see http://api.jquery.com/css/

Upvotes: 2

Vahid Hallaji
Vahid Hallaji

Reputation: 7447

Use parenteses .css() and height inside a quote.

$(document).ready(function () {
    if(window.location.href.indexOf("invt") > -1) {
        $("#promo-carriage").css("height", "40px");
    }
});

Upvotes: 1

Soturi
Soturi

Reputation: 1496

You are missing the opening parentheses after the css method:

$('#promo-carriage').css({

However, if you are trying to hide/show something, I recommend not using the height property to do it. You want to use the CSS display property.

There are quick jQuery methods to change the display of an object:

$("#promo-carriage").toggle()
$("#promo-carriage").hide()
$("#promo-carriage").show()

Here is a quick and easy jsFiddle example.

Upvotes: 1

Suresh Atta
Suresh Atta

Reputation: 121998

'' missing for height I guess,And another possibility is use height method directly.

$(document).ready(function () {
 if(window.location.href.indexOf("invt") > -1) { 
    $('#promo-carriage').height('40px');
      });

Upvotes: 0

Related Questions