Problems with iScroll on a div with jQuery Animation

Question

I am having some trouble with iScroll and the div that I have it implemented in.

It all works fine except for one thing.

<div class="previous"></div>
<div style="width: 100%; position: relative;" id="wrapper">
    <div class="container" style="width: 300%; position: absolute;">
        <div style="width: 33.3333%; float: left;">content block one</div>
        <div style="width: 33.3333%; float: left;">content block two</div>
        <div style="width: 33.3333%; float: left;">content block three</div>
    </div>
</div>
<div class="next"></div>

I have a jQuery function that moves the '.container' div left or right 100% according to which button you press. 'previous' or 'next'.

Now the problem comes in with the iScroll changes. It inserts a new style to the child div of the '#wrapper' div to move it on finger swipe. So when you click on next and previous it doesnt pick that up so when you are on the last div you can still swipe to the '.next' area of the div...which contains nothing.

I hope that makes sense. I would like to change the iScroll.js or something else to alter the absolute position of the '.container' div.

Thanks in advance.

Here is my jQuery code to animate the movement with the buttons.

<script type="text/javascript">
var counter = 1;
// Previous arrow function
$(".previous").click(function(){

if (counter === 1) {
    counter = 3;
    $(".container").animate({"left": "-=200%"}, "slow");
} else {
    counter --;
    $(".container").animate({"left": "+=100%"}, "slow");
}
return counter;
});

//Next arrow function
$(".next").click(function(){

if (counter === 3){
    counter = 1;
    $(".container").animate({"left": "+=200%"}, "slow");
} else {
    counter ++;
    $(".container").animate({"left": "-=100%"}, "slow");
}
return counter;
});

</script>

style="width: 300%;" position: absolute;> The CSS property isn't inside the style="" attribute. Typo, or possible cause of the issue? — Flater, May 09 '12 at 09:57

score 0 · Answer 1 · answered May 10 '12 at 06:38

Okay,

I have figured out what to do.

in my functions I added the iScroll function.

<script type="text/javascript">
var counter = 1;
// Previous arrow function
$(".previous").click(function(){

if (counter === 1) {
    counter = 3;
    myScroll.scrollToElement('div:nth-child(' + counter + ')', 500);
    } else {
        counter --;
        myScroll.scrollToElement('div:nth-child(' + counter + ')', 500);
    }
        return counter;
    });

//Next arrow function
$(".next").click(function(){

    if (counter === 3){
        counter = 1;
        myScroll.scrollToElement('div:nth-child(' + counter + ')', 500););
    } else {
        counter ++;
        myScroll.scrollToElement('div:nth-child(' + counter + ')', 500);
    }
        return counter;
    });

</script>

Problems with iScroll on a div with jQuery Animation

1 Answers1