jQuery 'if' statement not being recognised

Question

I'm having trouble getting my jQuery recognizing an if statement. Please see the CodePen

I have 4 page transitions within my site. Page right, page left, page up and page down. The contact page sits out of sight beneath the main hero sections. The up and down transitions slide the contact section up and down into view. The issue is that I want the contact page to slide back down out of sight should the user have it open and click on page right or left. i've added an if statement to query marginTop value of the contact div when in view but it isn't responding.

The below can be viewed at the CodePen link above.

$(document).ready(function() {

  // if statement that is not working but not sure why???

  if ($('.contact-wrapper').css("marginTop") == '-10%') {
    $('#down').trigger('click');

  }
  // --------------------------------------------

  $('#pg-right').click(function() {
    $('.home-wrapper, .about-wrapper').animate({
      marginLeft: '-=100%'
    }, 500);
  });

  $('#pg-left').click(function() {
    $('.home-wrapper, .about-wrapper').animate({
      marginLeft: '+=100%'
    }, 500);
  });

  $('#up').click(function() {
    $('.contact-wrapper').animate({
      marginTop: '-=10%'
    }, 500);
  });

  $('#down').click(function() {
    $('.contact-wrapper').animate({
      marginTop: '+=10%'
    }, 500);
  });
})

    .home-wrapper {

      position: fixed;

      background: blue;

      height: 90vh;

      left: 0;

      width: 100%;

    }

    .about-wrapper {

      position: fixed;

      background: green;

      height: 90vh;

      width: 100%;

      left: 100%;

    }

    .contact-wrapper {

      position: fixed;

      background: black;

      height: 80vh;

      width: 100%;

      left: 0;

      top: 90%;

    }

    #pg-right,

    #pg-left,

    #up,

    #down {

      position: fixed;

      font-size: 3em;

      color: white;

    }

    #pg-right {

      top: 10%;

      left: 80%;

    }

    #pg-left {

      top: 10%;

      left: 20%;

    }

    #up {

      top: 50%;

      left: 60%;

    }

    #down {

      top: 50%;

      left: 40%;

    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="home-wrapper"></div>

<div class="about-wrapper"></div>

<div class="contact-wrapper"></div>
<a href="#" id="pg-right">Right</a>
<a href="#" id="pg-left">Left</a>
<a href="#" id="up">Up</a>
<a href="#" id="down">Down</a>

Try logging `$('.contact-wrapper').css("marginTop")` and see what the result is. — Sebastian Simon, May 02 '16 at 02:42
@Xufox ahh good thought. It outputs "0px" and not "0%". So I guess I can solve this by using 'px' but for responsive reasons it's not ideal. I don't suppose you know a way for it to evaluate '%' do you? — RuNpiXelruN, May 02 '16 at 02:44
Always when you load your page you will have the same value (0px) and your if never be attended. I guess you would like to handle it on click handlers, isn't it? — Diego Polido Santana, May 02 '16 at 02:50

score 0 · Answer 1 · answered May 02 '16 at 03:05

Thanks to @Xufox for pointing me in the right direction. The problem was that the jQuery if statement evaluates in pixels, while I was using %. The way I solved this issue was converting the string to an Integer value and then querying if it was less than zero. See the code below and also here at the updated CodePen.

var x = $('.contact-wrapper').css("marginTop")

if( parseInt(x) < 0) {
  $('#down').trigger('click');
}

jQuery 'if' statement not being recognised

1 Answers1