I have created a horizontally scrolling "slideshow" of sorts using
Fx.Scroll. When you click "RIGHT" it should scroll right until it
reaches the last element in the container (which is "SIX"), at which
point it should scroll back to element "ONE".

Unfortunately, when "RIGHT" is clicked the first time, it scrolls to
"TWO" which is correct. But then when you click it again, it does
nothing. Click it a third time it scrolls to "THREE". Fourth time does
nothing. Fifth time, it scrolls to "FOUR". Finally, clicking it for
the sixth time, it scrolls back to "ONE".

It would appear that the scroll is only working on every second click.

I'm stumped. I would really appreciate any insight anyone can offer,
Thanks!

Live demo is at: http://kineticdesignlabs.com/test/

HTML:
<div class="boxes">
                <div class="wrapper">
                        <div class="left" style="margin-right: 20px;">
                                <!-- <a href="" id="go-left">LEFT</a><br><br> 
-->
                                <a href="" id="go-right">RIGHT</a>
                        </div>

                        <div id="box-container">
                                <div class="box-wrapper">
                                        <div class="box" id="1">ONE</div>
                                        <div class="box" id="2">TWO</div>
                                        <div class="box" id="3">THREE</div>
                                        <div class="box" id="4">FOUR</div>
                                        <div class="box" id="5">FIVE</div>
                                        <div class="box" id="6">SIX</div>
                                </div>
                                <div class="cleaner"></div>
                        </div>
                        <div class="cleaner"></div>
                </div> <!-- close wrapper -->
        </div> <!-- close boxes -->

CSS:
                        .boxes{
                                width: 100%;
                                height: 390px;
                                background-color: #fff;
                                margin: 0;
                        }

                        .wrapper{
                                width: 960px;
                                position: relative;
                                left: 50%;
                                margin-left: -480px;
                        }

                        #box-container{
                                width: 860px;
                                height: 390px;
                                overflow: hidden;
                                margin-right: 20px;
                        }

                        .box-wrapper{
                                width: 20000px;
                                height: 390px;
                        }

                        .box-wrapper .box{
                                width: 880px;
                                height: 390px;
                                float: left;
                                display: inline;
                                background: #ccc;
                                border: 1px solid #ddd;
                        }

                        .left{
                                float: left;
                        }

                        .right{
                                float: right;
                                margin-left: 20px;
                        }

                        .cleaner{
                                clear: both;
                                height: 0px;
                                font-size: 0px;
                                border: none;
                                margin:0px;
                                padding: 0px;
                                background:transparent;
                        }

JAVACRIPT:
window.addEvent('domready', function(){
                                var currentBox = 0;
                                var boxArray = $$('#box-container 
.box-wrapper').getElements
('div');

                                var scrollBox = function(dir){
                                        if(dir == 'right'){
                                                currentBox++;
                                        }else{
                                                currentBox--;
                                        }

                                        var boxScroll = new 
Fx.Scroll('box-container',{
                                                duration: 500,
                                                transition: 
Fx.Transitions.Sine.easeOut,
                                                wheelStops: false,
                                                onStart: function(){
                                                },
                                                onComplete: function(){
                                                }
                                        });

                                        if(currentBox == boxArray[0].length){
                                                currentBox = 0;
                                                boxScroll.toLeft();
                                        }else if(currentBox <= 0 && dir == 
'left'){
                                                currentBox = boxArray[0].length 
- 1;
                                                
boxScroll.toElement(boxArray[0][boxArray[0].length - 1]);
                                        }else{
                                                
boxScroll.toElement(boxArray[0][currentBox]);
                                        }
                                }

                                $('go-right').addEvent('click', function(e){
                                        e.stop();
                                        scrollBox('right');
                                });

                                /*
                               $('go-left').addEvent('click', function
(e){
                                        e.stop();
                                        scrollBox('left');
                                });
                              */
                        });

Reply via email to