jQuery if do nothing else do something

Question

I have a snippit to alter the margin-left of a node based on a click:

$("#left").click(function(){
    var slidewidth = $('#slide_box').attr('width'),
        slideleft = $('#slide_box').attr('margin-left');
    if (slideleft == 0) {
    }
    else {
        $("#slide_box").animate({"margin-left": "+=135px"}, "fast");
    } 
});

Now, if slideleft == 0, it shouldn't do anything. But it does. However, when the var slidewidth is calculated, will it return 0 or 0px? How would I define that value in the if argument? When I tried if (slideleft == 0px) it just killed the script.

Just to help you in the future. Any easy way of debugging something like this is to use `console.debug` and you could see the value for yourself. — thatidiotguy, Dec 04 '12 at 20:39
The title of the post is very unclear. Did you try `if(slideleft == '0px')` — BlackCursor, Dec 04 '12 at 20:40
a quick way to see what slideleft really is would be to either print the variable in your browsers console (firebug for firefox or developer tools in IE) or use a handy window.alert("Slideleft = " + slideleft) — scrappedcola, Dec 04 '12 at 20:40

score 2 · Accepted Answer · answered Dec 04 '12 at 20:45

2

I don't think you are using the correct method to get your width and margin-left values; both are css values not attributes on the element and .attr() will only get element attributes (unless you really are setting an attribute on the element with these names which imho could be very confusing in the future). Instead try this:

$("#left").click(function(){
    var slidewidth = $('#slide_box').css('width'),
        slideleft = $('#slide_box').css('margin-left'); 
    /* or alternatively:
       var slidewidth = parseInt($('#slide_box').css('width'),10),
        slideleft = parseInt($('#slide_box').css('margin-left'), 10); 
     */
    if (slideleft == '0px' /* with parseInt values you would just need 0 here*/) {
    }
    else {
        $("#slide_box").animate({"margin-left": "+=135px"}, "fast");
    } 
});

answered Dec 04 '12 at 20:45

scrappedcola

10,423
1
32
43

What do you mean by "parseInt values"? – Plummer Dec 04 '12 at 20:48
Sorry I meant to type "with the parseInt values" ie the values that you would get by using the code i have commented under "/* or alternatively..." – scrappedcola Dec 04 '12 at 20:50
Parseint values are the values you got by parseInt($('#slide_box').css('width'),10) – scrappedcola Dec 04 '12 at 20:51
.css returns a string "120px" which you can turn into a number through the method "parseInt". So if you use just the value that is returned from .css you would need to use the string "0px" if you parsed that string into an integer you would use 0 – scrappedcola Dec 04 '12 at 20:52
What does the `10` have to do with anything? – Plummer Dec 04 '12 at 21:13
1

The method parseInt takes two arguments. The first is the value you wish to parse and the second is the radix or the number base you wish to use. This just ensures that you get a base 10 number versus an octal or some other number that you don't wish. In this example it is more a good habit to keep up as you are just looking for 0. There are many discussions on the topic of parsint with/without radix. Start here if you are really interested: http://stackoverflow.com/questions/850341/workarounds-for-javascript-parseint-octal-bug – scrappedcola Dec 04 '12 at 21:27

score 1 · Answer 2 · answered Dec 04 '12 at 20:44

1

You can use $('#slide_box').css('margin-left') rather than $('#slide_box').attr('margin-left') to get the margin and test using slideleft === '0px'

answered Dec 04 '12 at 20:44

gbabiars

575
3
7

Changing to `.css` fixed the issue. – Plummer Dec 04 '12 at 20:50

score 0 · Answer 3 · answered Dec 04 '12 at 20:39

0

Try this:

if (slideleft === '0px')

answered Dec 04 '12 at 20:39

Lowkase

5,631
2
30
48

score 0 · Answer 4 · answered Dec 04 '12 at 20:40

0

You can just do a console.log(slidewidth) to check the output. I'm pretty sure it will be 0px not 0.

answered Dec 04 '12 at 20:40

tuck

452
5
15

Sushanth -- · Answer 5 · 2012-12-04T20:50:55.517

0

if ( parseInt(slideleft,10) === 0) {

Better to Convert that to a number using parseInt .. That way it will solve the ambiguous problem..

OR just if ( +slideleft === 0) {

edited Dec 04 '12 at 20:50

answered Dec 04 '12 at 20:41

Sushanth --

55,259
9
66
105

jQuery if do nothing else do something

5 Answers5