Can't Change CSS Bottom with jQuery

Question

I'm having trouble getting the "else" bit of this working. Anyone know what the problem is?

var navOpen = false;
                if (navOpen == false) {
                    $("nav").click(function() {
                        $(this).css("bottom","0");
                        navOpen = true;
                    });
                } else {
                    $("nav").click(function() {
                        $(this).css("bottom","-84");
                        navOpen = false;
                    });
                }

Where is the rest of the code? yo are setting navOpen to false just before the if, so it will never evaluate the else bit. — Moak
– Moak, Commented Feb 27, 2013 at 3:42

Moak · Accepted Answer · 2013-02-27 03:45:07Z

6

The condition is in the wrong place.

 var navOpen = false;
 $("nav").click(function() {
      if (navOpen == false) {
           $(this).css("bottom","0");
           navOpen = true;
      } else {
           $(this).css("bottom","-84px");
           navOpen = false;
      }
 });

answered Feb 27, 2013 at 3:45

Moak

12.9k27 gold badges117 silver badges168 bronze badges

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

1 Comment

JacobTheDev Over a year ago

Thanks, that worked perfectly. Shouldn't code late at night, things go over my head lol. I'll accept when it'll let me in a few minutes.

Ram · Accepted Answer · 2013-02-27 03:56:22Z

5

You are binding several handlers to the same element, you can use css method:

$("nav").click(function() {
   $(this).css("bottom", function(i, bottom) {
      return bottom === '0px' ? '-84px' : '0px';
     // return navOpen ? '-84px' : '0px';
   });
})

edited Feb 27, 2013 at 3:56

answered Feb 27, 2013 at 3:43

Ram

145k16 gold badges174 silver badges201 bronze badges

2 Comments

Daniel Imms Over a year ago

Beat me to it. You were missing the unit (px) and binding multiple time (super bad).

Moak Over a year ago

He might need to do more with the navOpen variable, but this is an elegant solution +1

martriay · Accepted Answer · 2013-02-27 03:42:26Z

4

Try with

$(this).css("bottom","-84px");

answered Feb 27, 2013 at 3:42

martriay

5,7423 gold badges32 silver badges39 bronze badges

Comments

Daniil Ryzhkov · Accepted Answer · 2013-02-27 03:44:29Z

4

You need to define metering (e.g px, %). CSS doesn't support just numering parameters like HTML attribute does.

answered Feb 27, 2013 at 3:44

Daniil Ryzhkov

7,6264 gold badges44 silver badges59 bronze badges

1 Comment

JacobTheDev Over a year ago

Wow, can't believe I didn't try that. Thanks. I'm accpeting another answer because it fixed another issue I was having, but you get an upvote.

Collectives™ on Stack Overflow

Can't Change CSS Bottom with jQuery

4 Answers 4

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related