CODEWITHSUNDEEP
jqueryif-statement
Pascal Wientjes
Pascal Wientjes

Reputation: 163

jquery if/else check css marginLeft gives weird results

i'm working on a horizontal slide functionality wich gives me weird results.

the html:

<div class="packageSliderContainer borderTop">
            <div class="slideContainer slide1"></div>
            <div class="slideContainer slide2"></div>
            <div class="slideContainer slide3"></div>
            <div class="slideContainer slide4"></div>
            <div class="slideContainer slide5"></div>
            <div class="slideContainer slide6"></div>

            <div id="slideArrowLeft"></div>
            <div id="slideArrowRight"></div>
        </div>

the css:

.packageSliderContainer {
width: 100%;
height: 982px;
overflow: hidden;
position: relative;
}

.slideContainer {
position: absolute;
width: 100%;
margin-left: 0px;
height: 100%;
}
.slide1 {   background: #fe0000;    left: 0%;}
.slide2 {   background: #00fe00;    left: 100%;}
.slide3 {   background: #0000fe;    left: 200%;}
.slide4 {   background: #aaa000;    left: 300%;}
.slide5 {   background: #fff000;    left: 400%;}
.slide6 {   background: #bebebe;    left: 500%;}

#slideArrowRight {
width: 37px;
height: 73px;
background: url(../images/arrow.png);
position: absolute;
right: 80px;
top: 50%;
cursor: pointer;
margin-top: -36px;
}

#slideArrowLeft {
width: 37px;
height: 73px;
background: url(../images/arrow.png);
position: absolute;
left: 80px;
top: 50%;
cursor: pointer;
margin-top: -36px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}

and the jquery:

$('#slideArrowLeft').click(function(){
        var allSlides = $(this).siblings('.slideContainer');
        var slideWidth = allSlides.width();

        if ($(allSlides).css('marginLeft') <= "1px") {
            $(allSlides).animate({marginLeft: "+=" + (slideWidth) + "px"});
        }

        else {
            console.log("don't do stuffs");
        };
    });

i would suspect that you could not slide left on the first slide as the margin-left is 0, but for some reason you can slide to the left ONCE. and then the if selector works correct, but i completly don't understand why.

anybody here who can enlighten me on this case? (and as you guys might have noticed, pretty new to both javascript and jquery :D )

Upvotes: 0

Views: 724

Answers (2)

Anthony Carbon
Anthony Carbon

Reputation: 618

Try this bro ..

$('#slideArrowLeft').click(function(){
        var allSlides = $(this).siblings('.slideContainer');
        var slideWidth = allSlides.width();

        if ($(allSlides).css('margin-left') <= "1") {
            $(allSlides).animate({marginLeft: "+=" + (slideWidth) + "px"});
        }

        else {
            $(allSlides).animate({marginLeft: 0});
        };
    });

DEMO

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

You can't compare the value similar to <= "1px" as it has string in it, you need to compare with number.

Replace this:

if ($(allSlides).css('marginLeft') <= "1px") {

With this:

if (parseFloat($(allSlides).css('marginLeft')) <= 1) {

Or by replacing px:

if ($(allSlides).css('marginLeft').replace("px", "") <= 1) {

Upvotes: 1

Related Questions