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
– elclanrs, Commented Mar 18, 2012 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
– Tats_innit, Commented Mar 18, 2012 at 10:13
You can't just shove in an if statement in the middle of a statement. — ThiefMaster
– ThiefMaster, Commented Mar 18, 2012 at 10:14

Community · Accepted Answer · 2017-05-23 11:56:25Z

7

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

edited May 23, 2017 at 11:56

CommunityBot

11 silver badge

answered Mar 18, 2012 at 10:13

Manse

38.1k11 gold badges88 silver badges112 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:20:14Z

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, 2017 at 12:20

CommunityBot

11 silver badge

answered Mar 18, 2012 at 10:16

ThiefMaster

320k85 gold badges608 silver badges648 bronze badges

2 Comments

ThiefMaster Over a year ago

Depends on what he needs though

Manse Over a year ago

I dont think the css('left') function returns what the OP expects either way !

Collectives™ on Stack Overflow

jQuery if statement breaks my code

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related