Question

I have spent last 2 days working on a front page to a new website but these one functionality I cant get to work.

It’s probably best to view this link.

http://isca01.bigwavemedia.info/~stagedgo/html/

When you hover on promotions the page pushes 20px to the left, but when the slider is pushed clicked, when you hover over it again it should push 20 px to the right.

I used the code bellow, the way it works it checks if the wrapper has been pushed.

if ($('.wrapper').css('marginLeft') ==  "0px") {
          //code to push page left 20
     }
 if ($('.wrapper').css('marginLeft') >  "1px") {
          //code to push page right 20
     }

Any help would be amazing, thanks.

Answer 1

You can’t use the “more than” operator on something that is not a number.

Try this:

if ($('.wrapper').css('marginLeft') ==  "0px") {
      //code to push page left 20
} else {
      //code to push page right 20
}

Alternatively, you can just pass the numbers without “px” to compare:

if (parseInt($('.wrapper').css('marginLeft')) ==  0) {
      //code to push page left 20
}
if (parseInt($('.wrapper').css('marginLeft')) >=  20) {
      //code to push page right 20
}

Edit:

Replace your whole hovering code (from line 200 to line 243) with this. Basically, move it minus to the right when margin is 0, and minus to the left when the margin is not 0. This should solve your problem.

$(".show_hide").hover(function() {

    if(parseInt($(".wrapper").css('marginLeft')) == 0) {

        $(".wrapper").animate({
            right: -20,
            opacity: 1
        }, 300);

    } else {

        $(".wrapper").animate({
            left: -20,
            opacity: 1
        }, 300);

    };  

}, function() {

    $(".wrapper").animate({
        right: 0,
        left: 0,
        opacity: 1
    }, 300);

});