Using Jquery Scroll Follow plugin with Cookie plugin

I'm using the Jquery Scroll Follow plugin to allow a box to follow along as a user scrolls down the website. Scroll Follow allows users to disable or enable the scrolling feature and uses the cookie plugin to remember the users choice across pages.

Scroll Follow works great, but the code enables scrolling right away when a user first accesses the site. I'd like the default to be disabled when a user first enters the site, thereby giving the user the option to enable scrolling.

I've tried playing around with the true/false settings of the cookie, but I can't get this to wor开发者_StackOverflowk properly. I'm including the code below and appreciate any help to change the default to no scrolling.

I've tried asking for help on the developer's site, but have received no response: link text

Thanks.

/**
 * jquery.scrollFollow.js
 * Copyright (c) 2008 Net Perspective (http://kitchen.net-perspective.com/)
 * Licensed under the MIT License (http://www.opensource.org/licenses/mit-license.php)
 * 
 * @author R.A. Ray
 *
     * @projectDescription  jQuery plugin for allowing an element to animate down as the user scrolls the page.
 * 
 * @version 0.4.0
 * 
 * @requires jquery.js (tested with 1.2.6)
 * @requires ui.core.js (tested with 1.5.2)
 * 
 * @optional jquery.cookie.js (http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/)
 * @optional jquery.easing.js (http://gsgd.co.uk/sandbox/jquery/easing/ - tested with 1.3)
 * 
 * @param speed     int - Duration of animation (in milliseconds)
 *                              default: 500
 * @param offset            int - Number of pixels box should remain from top of viewport
 *                              default: 0
 * @param easing        string - Any one of the easing options from the easing plugin - Requires jQuery Easing Plugin < http://gsgd.co.uk/sandbox/jquery/easing/ >
 *                              default: 'linear'
 * @param container string - ID of the containing div
 *                              default:     box's immediate parent
 * @param killSwitch    string - ID of the On/Off toggle element
  *                                     default: 'killSwitch'
 * @param onText        string - killSwitch text to be displayed if sliding is enabled
 *                                  default: 'Turn Slide Off'
 * @param offText       string - killSwitch text to be displayed if sliding is disabled
 *                                  default: 'Turn Slide On'
 * @param relativeTo    string - Scroll animation can be relative to either the 'top'     or 'bottom' of the viewport
  *                                 default: 'top'
 * @param delay         int - Time between the end of the scroll and the beginning of the animation in milliseconds
 *                              default: 0
 */

( function( jQuery ) {

jQuery.scrollFollow = function ( box, options )
{ 
    // Convert box into a jQuery object
    box = jQuery( box );

    // 'box' is the object to be animated
    var position = box.css( 'position' );

    function ani()
    {       
        // The script runs on every scroll which really means many times during a scroll.
        // We don't want multiple slides to queue up.
        box.queue( [ ] );

        // A bunch of values we need to determine where to animate to
        var viewportHeight = parseInt( jQuery( window ).height() ); 
        var pageScroll =  parseInt( jQuery( document ).scrollTop() );
        var parentTop =  parseInt( box.cont.offset().top );
        var parentHeight = parseInt( box.cont.attr( 'offsetHeight' ) );
        var boxHeight = parseInt( box.attr( 'offsetHeight' ) + ( parseInt( box.css( 'marginTop' ) ) || 0 ) + ( parseInt( box.css( 'marginBottom' ) ) || 0 ) );
        var aniTop;

        // Make sure the user wants the animation to happen
        if ( isActive )
        {
            // If the box should animate relative to the top of the window
            if ( options.relativeTo == 'top' )
            {
                // Don't animate until the top of the window is close enough to the top of the box
                if ( box.initialOffsetTop >= ( pageScroll + options.offset ) )
                {
                    aniTop = box.initialTop;
                }
                else
                {
                    aniTop = Math.min( ( Math.max( ( -parentTop ), ( pageScroll - box.initialOffsetTop + box.initialTop ) ) + options.offset ), ( parentHeight - boxHeight - box.paddingAdjustment ) );
                }
            }
            // If the box should animate relative to the bottom of the window
            else if ( options.relativeTo == 'bottom' )
            {
                // Don't animate until the bottom of the window is close enough to the bottom of the box
                if ( ( box.initialOffsetTop + boxHeight ) >= ( pageScroll + options.offset + viewportHeight ) )
                {
                    aniTop = box.initialTop;
                }
                else
                {
                    aniTop = Math.min( ( pageScroll + viewportHeight - boxHeight - options.offset ), ( parentHeight - boxHeight ) );
                }
            }

            // Checks to see if the relevant scroll was the last one
            // "-20" is to account for inaccuracy in the timeout
            if ( ( new Date().getTime() - box.lastScroll ) >= ( options.delay - 20 ) )
            {
                box.animate(
                    {
                        top: aniTop
                    }, options.speed, options.easing
                );
            }
        }
    };

    // For user-initiated stopping of the slide
    var isActive = true;

    if ( jQuery.cookie != undefined )
    {
        if( jQuery.cookie( 'scrollFollowSetting' + box.attr( 'id' ) ) == 'false' )
        {
            var isActive = false;

            jQuery( '#' + options.killSwitch ).text( options.offText )
                .toggle( 
                    function ()
                    {
                        isActive = true;

                        jQuery( this ).text( options.onText );

                        jQuery.cookie( 'scrollFollowSetting' + box.attr( 'id' ), true, { expires: 365, path: '/'} );

                        ani();
                    },
                    function ()
                    {
                        isActive = false;

                        jQuery( this ).text( options.offText );

                        box.animate(
                            {
                                top: box.initialTop
                            }, options.speed, options.easing
                        );  

                        jQuery.cookie( 'scrollFollowSetting' + box.attr( 'id' ), false, { expires: 365, path: '/'} );
                    }
                );
        }
        else
        {
            jQuery( '#' + options.killSwitch ).text( options.onText )
                .toggle( 
                    function ()
                    {
                        isActive = false;

                        jQuery( this ).text( options.offText );

                        box.animate(
                            {
                                top: box.initialTop
                            }, 0
                        );  

                        jQuery.cookie( 'scrollFollowSetting' + box.attr( 'id' ), false, { expires: 365, path: '/'} );
                    },
                    function ()
                    {
                        isActive = true;

                        jQuery( this ).text( options.onText );

                        jQuery.cookie( 'scrollFollowSetting' + box.attr( 'id' ), true, { expires: 365, path: '/'} );

                        ani();
                    }
                );
        }
    }

    // If no parent ID was specified, and the immediate parent does not have an ID
    // options.container will be undefined. So we need to figure out the parent element.
    if ( options.container == '')
    {
        box.cont = box.parent();
    }
    else
    {
        box.cont = jQuery( '#' + options.container );
    }

    // Finds the default positioning of the box.
    box.initialOffsetTop =  parseInt( box.offset().top );
    box.initialTop = parseInt( box.css( 'top' ) ) || 0;

    // Hack to fix different treatment of boxes positioned 'absolute' and 'relative'
    if ( box.css( 'position' ) == 'relative' )
    {
        box.paddingAdjustment = parseInt( box.cont.css( 'paddingTop' ) ) + parseInt( box.cont.css( 'paddingBottom' ) );
    }
    else
    {
        box.paddingAdjustment = 0;
    }

    // Animate the box when the page is scrolled
    jQuery( window ).scroll( function ()
        {
            // Sets up the delay of the animation
            jQuery.fn.scrollFollow.interval = setTimeout( function(){ ani();} , options.delay );

            // To check against right before setting the animation
            box.lastScroll = new Date().getTime();
        }
    );

    // Animate the box when the page is resized
    jQuery( window ).resize( function ()
        {
            // Sets up the delay of the animation
            jQuery.fn.scrollFollow.interval = setTimeout( function(){ ani();} , options.delay );

            // To check against right before setting the animation
            box.lastScroll = new Date().getTime();
        }
    );

    // Run an initial animation on page load
    box.lastScroll = 0;

    ani();
};

jQuery.fn.scrollFollow = function ( options )
{
    options = options || {};
    options.relativeTo = options.relativeTo || 'top';
    options.speed = options.speed || 500;
    options.offset = options.offset || 0;
    options.easing = options.easing || 'swing';
    options.container = options.container || this.parent().attr( 'id' );
    options.killSwitch = options.killSwitch || 'killSwitch';
    options.onText = options.onText || 'Turn Slide Off';
    options.offText = options.offText || 'Turn Slide On';
    options.delay = options.delay || 0;

    this.each( function() 
        {
            new jQuery.scrollFollow( this, options );
        }
    );

    return this;
};
})( jQuery );

Sorry, forgot about this post. I tried working with the ordering of the cookies and think I found a workable solution. Seems to work for me at least. Hope this helps anybody. Download and compare to original.

( function( jQuery ) {

jQuery.scrollFollow = function ( box, options )
{ 
    // Convert box into a jQuery object
    box = jQuery( box );

    // 'box' is the object to be animated
    var position = box.css( 'position' );

    function ani()
    {       
        // The script runs on every scroll which really means many times during a scroll.
        // We don't want multiple slides to queue up.
        box.queue( [ ] );

        // A bunch of values we need to determine where to animate to
        var viewportHeight = parseInt( jQuery( window ).height() ); 
        var pageScroll =  parseInt( jQuery( document ).scrollTop() );
        var parentTop =  parseInt( box.cont.offset().top );
        var parentHeight = parseInt( box.cont.attr( 'offsetHeight' ) );
        var boxHeight = parseInt( box.attr( 'offsetHeight' ) + ( parseInt( box.css( 'marginTop' ) ) || 0 ) + ( parseInt( box.css( 'marginBottom' ) ) || 0 ) );
        var aniTop;

        // Make sure the user wants the animation to happen
        if ( isActive )
        {
            // If the box should animate relative to the top of the window
            if ( options.relativeTo == 'top' )
            {
                // Don't animate until the top of the window is close enough to the top of the box
                if ( box.initialOffsetTop >= ( pageScroll + options.offset ) )
                {
                    aniTop = box.initialTop;
                }
                else
                {
                    aniTop = Math.min( ( Math.max( ( -parentTop ), ( pageScroll - box.initialOffsetTop + box.initialTop ) ) + options.offset ), ( parentHeight - boxHeight - box.paddingAdjustment ) );
                }
            }
            // If the box should animate relative to the bottom of the window
            else if ( options.relativeTo == 'bottom' )
            {
                // Don't animate until the bottom of the window is close enough to the bottom of the box
                if ( ( box.initialOffsetTop + boxHeight ) >= ( pageScroll + options.offset + viewportHeight ) )
                {
                    aniTop = box.initialTop;
                }
                else
                {
                    aniTop = Math.min( ( pageScroll + viewportHeight - boxHeight - options.offset ), ( parentHeight - boxHeight ) );
                }
            }

            // Checks to see if the relevant scroll was the last one
            // "-20" is to account for inaccuracy in the timeout
            if ( ( new Date().getTime() - box.lastScroll ) >= ( options.delay - 20 ) )
            {
                box.animate(
                    {
                        top: aniTop
                    }, options.speed, options.easing
                );
            }
        }
    };

    // For user-initiated stopping of the slide
    var isActive = false;

    if ( jQuery.cookie != undefined )
    {
        if( jQuery.cookie( 'scrollFollowSetting' + box.attr( 'id' ) ) == 'true' )
        {
            var isActive = true;

            jQuery( '#' + options.killSwitch ).text( options.onText )
                .toggle( 
                    function ()
                    {
                        isActive = false;

                        jQuery( this ).text( options.offText );

                        box.animate(
                            {
                                top: box.initialTop
                            }, options.speed, options.easing
                        );  

                        jQuery.cookie( 'scrollFollowSetting' + box.attr( 'id' ), false, { expires: 365, path: '/'} );


                    },
                    function ()
                    {
                        isActive = true;

                        jQuery( this ).text( options.onText );



                        jQuery.cookie( 'scrollFollowSetting' + box.attr( 'id' ), true, { expires: 365, path: '/'} );
                        ani();
                    }
                );
        }
        else
        {
            jQuery( '#' + options.killSwitch ).text( options.offText )
                .toggle( 
                    function ()
                    {
                        isActive = true;

                        jQuery( this ).text( options.onText );



                        jQuery.cookie( 'scrollFollowSetting' + box.attr( 'id' ), true, { expires: 365, path: '/'} );
                        ani();
                    },
                    function ()
                    {
                        isActive = false;

                        jQuery( this ).text( options.offText );

                        box.animate(
                            {
                                top: box.initialTop
                            }, 0
                        );  

                        jQuery.cookie( 'scrollFollowSetting' + box.attr( 'id' ), false, { expires: 365, path: '/'} );


                    }
                );
        }
    }

    // If no parent ID was specified, and the immediate parent does not have an ID
    // options.container will be undefined. So we need to figure out the parent element.
    if ( options.container == '')
    {
        box.cont = box.parent();
    }
    else
    {
        box.cont = jQuery( '#' + options.container );
    }

    // Finds the default positioning of the box.
    box.initialOffsetTop =  parseInt( box.offset().top );
    box.initialTop = parseInt( box.css( 'top' ) ) || 0;

    // Hack to fix different treatment of boxes positioned 'absolute' and 'relative'
    if ( box.css( 'position' ) == 'relative' )
    {
        box.paddingAdjustment = parseInt( box.cont.css( 'paddingTop' ) ) + parseInt( box.cont.css( 'paddingBottom' ) );
    }
    else
    {
        box.paddingAdjustment = 0;
    }

    // Animate the box when the page is scrolled
    jQuery( window ).scroll( function ()
        {
            // Sets up the delay of the animation
            jQuery.fn.scrollFollow.interval = setTimeout( function(){ ani();} , options.delay );

            // To check against right before setting the animation
            box.lastScroll = new Date().getTime();
        }
    );

    // Animate the box when the page is resized
    jQuery( window ).resize( function ()
        {
            // Sets up the delay of the animation
            jQuery.fn.scrollFollow.interval = setTimeout( function(){ ani();} , options.delay );

            // To check against right before setting the animation
            box.lastScroll = new Date().getTime();
        }
    );

    // Run an initial animation on page load
    box.lastScroll = 0;

    ani();
};

jQuery.fn.scrollFollow = function ( options )
{
    options = options || {};
    options.relativeTo = options.relativeTo || 'top';
    options.speed = options.speed || 500;
    options.offset = options.offset || 0;
    options.easing = options.easing || 'swing';
    options.container = options.container || this.parent().attr( 'id' );
    options.killSwitch = options.killSwitch || 'killSwitch';
    options.onText = options.onText || 'Turn Slide Off';
    options.offText = options.offText || 'Turn Slide On';
    options.delay = options.delay || 0;

    this.each( function() 
        {
            new jQuery.scrollFollow( this, options );
        }
    );

    return this;
};

})( jQuery );

I added another flag for default setting in scrollFollow.js and on the page my scrollFollow function is called I added another option (property) named defaultText

var firstSetting = true;

if (firstSetting) {
    isActive = false;
    $('#' + options.killSwitch).html(options.defaultText);
    firstSetting = false;
}

Its working for me