jQuery if statement breaks my code

Question

This is my code:

$("#header").touchwipe({
//  if($('#cont-wide').css('left') == '-100%' ){
         wipeLeft: function() { 

                $('#cont-wide').animate({
                        left: '-201%'
                }, 500 );
                $('#nav-filters').fadeOut(200);
                $('#nav-map-l').delay(300).fadeIn(200);

                $('#one .col-inner').delay(500).hide(0);

                $('#three .col-inner').css('display','block');

                setTimeout(function() { 
                window.scrollTo(0, 1) }, 
                100);
            },
         wipeRight: function() { 

                $('#cont-wide').animate({
                        left: '1%'
                }, 500 );
                $('#nav-filters').fadeOut(200);
                $('#nav-map-r').delay(300).fadeIn(200);

                $('#one .col-inner').css('display','block');

                setTimeout(function() { 
                window.scrollTo(0, 1) }, 
                100);

            },
         min_move_x: 50,
         min_move_y: 50,
         preventDefaultEvents: false
//  }   
});

As it currently is it works fine. However when I remove the comments to add the conditional statement, the code and all my other JavaScript stops working. Thanks

What are you trying to do with that? I'm pretty sure the css function returns the value in pixels not percentages so you'd have to calculate it — elclanrs, Mar 18 '12 at 10:12
hey probably your comparison is wrong $('#cont-wide').css('left') == '-100%' ? are you expecting $('#cont-wide').css('left') to return string equivalent of '-100%' which seems wrong to me. hope it helps? or you can jsfiddle it and I can help you out, cheers! — Tats_innit, Mar 18 '12 at 10:13
You can't just shove in an `if` statement in the middle of a statement. — ThiefMaster, Mar 18 '12 at 10:14

score 7 · Accepted Answer · edited May 23 '17 at 11:56

You cannot put the if statement there ...

you could do this :

 wipeLeft: function() { 
      if($('#cont-wide').css('left') == '-100%' ){
         // the rest
      }
 },
 wipeRight: function() { 
      if($('#cont-wide').css('left') == '-100%' ){
         // the rest
      }
 }

Note - the css function my not produce the result you are expecting : http://jsfiddle.net/VccAn/ using a value of 10% for left in my example returns auto on Chrome ! See this question / answer for discussions related to this problem : jQuery .css("left") returns "auto" instead of actual value in Chrome

score 5 · Answer 2 · edited May 23 '17 at 12:20

5

You can't just shove in an if statement in the middle of a statement.

The best solution would be creating your options object before calling touchwipe():

var options = {};
if($('#cont-wide').css('left') == '-100%') {
    options.wipeLeft = function() {

    };

    options.wipeRight = function() {

    };
}

$("#header").touchwipe(options);

Note that the if condition is only evaluated once. If you want it to be evaluated on every event, @ManseUK's answer is the way to go.

edited May 23 '17 at 12:20

Community

1
1

answered Mar 18 '12 at 10:16

ThiefMaster

310,957
84
592
636

Depends on what he needs though – ThiefMaster Mar 18 '12 at 10:17
I dont think the `css('left')` function returns what the OP expects either way ! – Manse Mar 18 '12 at 10:19

jQuery if statement breaks my code

2 Answers2