CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user5222215
user5222215

Reputation:

How can I alter my margin-left-increase function to disable if margin-left = 0px?

This is the code I have thus far. The code is actually working fine so here's to hoping it's a tiny tweak someone can assist me with?

So my width on the UL is 2000px, with the overflow hidden. It is for the user to scroll through a list of thumbnails to choose from to display in a div above.

Still, I would like to see it done in the interest of curiosity

HTML:

<img class="thumbSliderLeft" src="Images/left.png" />
<div class="thumbContainer">


<ul class="galleryThumbs">
<li class="gallery"><img class="thumb" src="Images/thumbs/sam.jpg" /></li>

<li class="gallery"><img class="thumb" src="Images/thumbs/cat.jpg" /></li>

<li class="gallery"><img class="thumb" src="Images/thumbs/horse.jpg" /></li>

<li class="gallery"><img class="thumb" src="Images/thumbs/mags.jpg" /></li>

<li class="gallery"><img class="thumb" src="Images/thumbs/tree.jpg" /></li>

<li class="gallery"><img class="thumb" src="Images/thumbs/soup.jpg" /></li>

</ul>



</div>

CSS

div.thumbContainer {
            width: 800px;
            height: 270px;
            position: relative;
            top: -50px;
            overflow: hidden;
            margin: 0 auto;
}

ul.galleryThumbs {
    width: 2000px;
}

ul.galleryThumbs li.gallery {
    margin-right: 10px;
    padding-top: 3px;
    display: inline-block;
    float: left;
    width: 200px;
    border-style: solid;
    border-radius: 10px;
    border-width: 5px;}

Javascript/Jquery

$(function () {

    var marginLeft = $("ul.galleryThumbs").css("margin-left");

    var indentLeft = $("img.thumbSliderLeft").click(function () {
        $("ul.galleryThumbs").animate({
            "margin-left": "+=250px"
        }, 500, 'linear');

        if (marginLeft === 0) {
            indentLeft.off()
        };

    });
});

Upvotes: 0

Views: 92

Answers (3)

dtanders
dtanders

Reputation: 1845

Move the check for margin-left to the top of the handler and check for a 0 at the start of the string that css() returns:

    if ($("ul.galleryThumbs").css("margin-left")[0] === '0') {
        indentLeft.off()
    }
    $("ul.galleryThumbs").animate({
        "margin-left": "+=250px"
    }, 500, 'linear');

Upvotes: 0

Pindo
Pindo

Reputation: 1625

The reason it's not picking up === 0 is that you're comparing a string to an int.

As well as that, when you get the css using jquery you'll get a px after the value. you can fix this by adding the following:

if (parseInt(marginLeft.replace('px','')) === 0){
 //code here
}

Upvotes: 0

guest271314
guest271314

Reputation: 1

If interpret Question correctly, try using .off(event) ; note that .animate() would set margin-left to String ending in "px" , not Number 0 .

Not clear at Question what 0 expected to represent at marginLeft === 0 ?

$(function () {

        var marginLeft = $("ul.galleryThumbs").css("margin-left");

        $("img.thumbSliderLeft").on("click", function () {
            $("ul.galleryThumbs").animate({
                "margin-left": "+=250px"
            }, 500, 'linear');

            if (marginLeft === 0) { 
                $(this).off("click")
            };

        });
    });

Upvotes: 1

Related Questions