1
J'utilise le plugin Jquery Scroll Follow pour autoriser une boîte à suivre lorsqu'un utilisateur parcourt le site Web. Scroll Follow permet aux utilisateurs de désactiver ou activer la fonction de défilement et utilise le plugin cookie pour se souvenir du choix des utilisateurs sur les pages. Scroll Follow fonctionne très bien, mais le code permet de faire défiler tout de suite lorsqu'un utilisateur accède pour la première fois au site. Je souhaite que la valeur par défaut soit désactivée lorsqu'un utilisateur entre d'abord sur le site, ce qui permet à l'utilisateur d'activer le défilement.Utilisation de Jquery Scroll Suivi du plugin avec le plugin Cookie
J'ai essayé de jouer avec les réglages vrai/faux du cookie, mais je n'arrive pas à le faire fonctionner correctement. J'inclus le code ci-dessous et j'apprécie toute aide pour changer le défaut par défaut.
J'ai essayé de demander de l'aide sur le site du développeur, mais ai reçu aucune réponse: link text
Merci.
/**
* 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);