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.

Answer 1

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