1

Greeting's

I'am still relatively new to JavaScript and Jquery and I know there has got to be a better method than the one I'am using.

I'am working on a serialScroll implementation. There is a master scrollTo that controls the left/right movement of a number of slides. Each slide contains it's own implementation of a vertical serialScroll. I have the resize on the scrollTo working great and the resize on the vertical works but I can't figure an elegant method for ensuring that on resize the current position remains centered, My current method works but is very inefficient.

$(function(){

var $up = $('#sec1_nav a.up').hide();//up button -- each slide needs it's own unique nav buttons
var $down = $('#sec1_nav a.down');//down button -- each slide needs it's own unique nav buttons 

        $('#screen1').serialScroll({
            target:'#section1',
            items:'.item', 
            prev:'#sec1_nav a.up',
            next:'#sec1_nav a.down',    
            axis:'y',
            duration:1000,
            force:true,
            cylce: false,

            onBefore:function( e, elem, $pane, $items, pos ){
            $up.add($down).show();  
            if( pos == 0 )$up.hide();
                else if( pos == $items.length -1 )
                    $down.hide();

                   // Here's where it get ugly, I'am adding a unique class for each slide to the item's
            $('.item').removeClass('pos1'); //Each slides need's it's own class i.e. slide1 = pos1, slide2 = pos2 etc.
                    $(elem).addClass('pos1');
                }                   
            }); 
            $(window).bind("resize", function(){
                resize1(); // Same goes for the resize function, each slide need's it's own function.
            });     
    });
    function resize1() {

    height = $(window).height();
    width = $(window).width();

    mask_height = height * $('.item').length; // sets the new mask height 

    // Resize Height of the area
    $('.sections').css({height: height, width : width});
    $('.item').css({height: height, width : width});
    $('#mask').css({height : mask_height, width : width});

    $('.sections').scrollTo('.pos1', 0 ); // This issue is where it all fall apart, instead of using serialScroll, i'am stuck using scrollTo to maintain the current slide position.
}
Nathan White
  • 65
  • 3
  • 11

0 Answers0