How to edit CSS class via jQuery if statement

Question

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!

McRui · Accepted Answer · 2013-09-03 16:03:21Z

2

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/

answered Sep 3, 2013 at 16:03

McRui

2,0213 gold badges21 silver badges32 bronze badges

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

2 Comments

Myles Over a year ago

Thanks for explaining, very clear. I haven't actually done this much but I'm finding it very useful!

Suresh Atta Over a year ago

@Myles at least you should upvote it.because other people can prefer to read it..

Vahid Hallaji · Accepted Answer · 2013-09-03 15:59:29Z

1

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

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

edited Sep 3, 2013 at 15:59

answered Sep 3, 2013 at 15:51

Vahid Hallaji

7,5576 gold badges46 silver badges52 bronze badges

1 Comment

Myles Over a year ago

Many thanks. This worked very well, I am still having an issue but that's relating to a scrollTop(); animate... I don't suppose you know how to make the height change and STAY changed haha? I've tried return; but that's not working!

Soturi · Accepted Answer · 2013-09-03 15:52:29Z

1

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.

answered Sep 3, 2013 at 15:52

Soturi

1,4961 gold badge14 silver badges30 bronze badges

1 Comment

Myles Over a year ago

There's lots of other jQuery going on for showing/hiding/animating this particular element. I don't want to complicate things further! Thanks for your answer though. :-)

Suresh Atta · Accepted Answer · 2013-09-03 15:49:45Z

0

'' 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');
      });

answered Sep 3, 2013 at 15:49

Suresh Atta

122k38 gold badges206 silver badges315 bronze badges

Collectives™ on Stack Overflow

How to edit CSS class via jQuery if statement

4 Answers 4

2 Comments

1 Comment

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

1 Comment

Comments

Related