/** * jQuery.ScrollTo - Easy element scrolling using jQuery. * Copyright (c) 2007-2008 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com * Dual licensed under MIT and GPL. * Date: 9/11/2008 * @author Ariel Flesler * @version 1.4 * * http://flesler.blogspot.com/2007/10/jqueryscrollto.html */ ;(function(h){var m=h.scrollTo=function(b,c,g){h(window).scrollTo(b,c,g)};m.defaults={axis:'y',duration:1};m.window=function(b){return h(window).scrollable()};h.fn.scrollable=function(){return this.map(function(){var b=this.parentWindow||this.defaultView,c=this.nodeName=='#document'?b.frameElement||b:this,g=c.contentDocument||(c.contentWindow||c).document,i=c.setInterval;return c.nodeName=='IFRAME'||i&&h.browser.safari?g.body:i?g.documentElement:this})};h.fn.scrollTo=function(r,j,a){if(typeof j=='object'){a=j;j=0}if(typeof a=='function')a={onAfter:a};a=h.extend({},m.defaults,a);j=j||a.speed||a.duration;a.queue=a.queue&&a.axis.length>1;if(a.queue)j/=2;a.offset=n(a.offset);a.over=n(a.over);return this.scrollable().each(function(){var k=this,o=h(k),d=r,l,e={},p=o.is('html,body');switch(typeof d){case'number':case'string':if(/^([+-]=)?\d+(px)?$/.test(d)){d=n(d);break}d=h(d,this);case'object':if(d.is||d.style)l=(d=h(d)).offset()}h.each(a.axis.split(''),function(b,c){var g=c=='x'?'Left':'Top',i=g.toLowerCase(),f='scroll'+g,s=k[f],t=c=='x'?'Width':'Height',v=t.toLowerCase();if(l){e[f]=l[i]+(p?0:s-o.offset()[i]);if(a.margin){e[f]-=parseInt(d.css('margin'+g))||0;e[f]-=parseInt(d.css('border'+g+'Width'))||0}e[f]+=a.offset[i]||0;if(a.over[i])e[f]+=d[v]()*a.over[i]}else e[f]=d[i];if(/^\d+$/.test(e[f]))e[f]=e[f]<=0?0:Math.min(e[f],u(t));if(!b&&a.queue){if(s!=e[f])q(a.onAfterFirst);delete e[f]}});q(a.onAfter);function q(b){o.animate(e,j,a.easing,b&&function(){b.call(this,r,a)})};function u(b){var c='scroll'+b,g=k.ownerDocument;return p?Math.max(g.documentElement[c],g.body[c]):k[c]}}).end()};function n(b){return typeof b=='object'?b:{top:b,left:b}}})(jQuery); /** * jQuery.ScrollTo * Copyright (c) 2007-2008 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com * Dual licensed under MIT and GPL. * Date: 9/11/2008 * * @projectDescription Easy element scrolling using jQuery. * http://flesler.blogspot.com/2007/10/jqueryscrollto.html * Tested with jQuery 1.2.6. On FF 2/3, IE 6/7, Opera 9.2/5 and Safari 3. on Windows. * * @author Ariel Flesler * @version 1.4 * * @id jQuery.scrollTo * @id jQuery.fn.scrollTo * @param {String, Number, DOMElement, jQuery, Object} target Where to scroll the matched elements. * The different options for target are: * - A number position (will be applied to all axes). * - A string position ('44', '100px', '+=90', etc ) will be applied to all axes * - A jQuery/DOM element ( logically, child of the element to scroll ) * - A string selector, that will be relative to the element to scroll ( 'li:eq(2)', etc ) * - A hash { top:x, left:y }, x and y can be any kind of number/string like above. * @param {Number} duration The OVERALL length of the animation, this argument can be the settings object instead. * @param {Object,Function} settings Optional set of settings or the onAfter callback. * @option {String} axis Which axis must be scrolled, use 'x', 'y', 'xy' or 'yx'. * @option {Number} duration The OVERALL length of the animation. * @option {String} easing The easing method for the animation. * @option {Boolean} margin If true, the margin of the target element will be deducted from the final position. * @option {Object, Number} offset Add/deduct from the end position. One number for both axes or { top:x, left:y }. * @option {Object, Number} over Add/deduct the height/width multiplied by 'over', can be { top:x, left:y } when using both axes. * @option {Boolean} queue If true, and both axis are given, the 2nd axis will only be animated after the first one ends. * @option {Function} onAfter Function to be called after the scrolling ends. * @option {Function} onAfterFirst If queuing is activated, this function will be called after the first scrolling ends. * @return {jQuery} Returns the same jQuery object, for chaining. * * @desc Scroll to a fixed position * @example $('div').scrollTo( 340 ); * * @desc Scroll relatively to the actual position * @example $('div').scrollTo( '+=340px', { axis:'y' } ); * * @dec Scroll using a selector (relative to the scrolled element) * @example $('div').scrollTo( 'p.paragraph:eq(2)', 500, { easing:'swing', queue:true, axis:'xy' } ); * * @ Scroll to a DOM element (same for jQuery object) * @example var second_child = document.getElementById('container').firstChild.nextSibling; * $('#container').scrollTo( second_child, { duration:500, axis:'x', onAfter:function(){ * alert('scrolled!!'); * }}); * * @desc Scroll on both axes, to different values * @example $('div').scrollTo( { top: 300, left:'+=200' }, { axis:'xy', offset:-20 } ); */ ;(function( $ ){ var $scrollTo = $.scrollTo = function( target, duration, settings ){ $(window).scrollTo( target, duration, settings ); }; $scrollTo.defaults = { axis:'y', duration:1 }; // Returns the element that needs to be animated to scroll the window. // Kept for backwards compatibility (specially for localScroll & serialScroll) $scrollTo.window = function( scope ){ return $(window).scrollable(); }; // Hack, hack, hack... stay away! // Returns the real elements to scroll (supports window/iframes, documents and regular nodes) $.fn.scrollable = function(){ return this.map(function(){ // Just store it, we might need it var win = this.parentWindow || this.defaultView, // If it's a document, get its iframe or the window if it's THE document elem = this.nodeName == '#document' ? win.frameElement || win : this, // Get the corresponding document doc = elem.contentDocument || (elem.contentWindow || elem).document, isWin = elem.setInterval; return elem.nodeName == 'IFRAME' || isWin && $.browser.safari ? doc.body : isWin ? doc.documentElement : this; }); }; $.fn.scrollTo = function( target, duration, settings ){ if( typeof duration == 'object' ){ settings = duration; duration = 0; } if( typeof settings == 'function' ) settings = { onAfter:settings }; settings = $.extend( {}, $scrollTo.defaults, settings ); // Speed is still recognized for backwards compatibility duration = duration || settings.speed || settings.duration; // Make sure the settings are given right settings.queue = settings.queue && settings.axis.length > 1; if( settings.queue ) // Let's keep the overall duration duration /= 2; settings.offset = both( settings.offset ); settings.over = both( settings.over ); return this.scrollable().each(function(){ var elem = this, $elem = $(elem), targ = target, toff, attr = {}, win = $elem.is('html,body'); switch( typeof targ ){ // A number will pass the regex case 'number': case 'string': if( /^([+-]=)?\d+(px)?$/.test(targ) ){ targ = both( targ ); // We are done break; } // Relative selector, no break! targ = $(targ,this); case 'object': // DOMElement / jQuery if( targ.is || targ.style ) // Get the real position of the target toff = (targ = $(targ)).offset(); } $.each( settings.axis.split(''), function( i, axis ){ var Pos = axis == 'x' ? 'Left' : 'Top', pos = Pos.toLowerCase(), key = 'scroll' + Pos, old = elem[key], Dim = axis == 'x' ? 'Width' : 'Height', dim = Dim.toLowerCase(); if( toff ){// jQuery / DOMElement attr[key] = toff[pos] + ( win ? 0 : old - $elem.offset()[pos] ); // If it's a dom element, reduce the margin if( settings.margin ){ attr[key] -= parseInt(targ.css('margin'+Pos)) || 0; attr[key] -= parseInt(targ.css('border'+Pos+'Width')) || 0; } attr[key] += settings.offset[pos] || 0; if( settings.over[pos] ) // Scroll to a fraction of its width/height attr[key] += targ[dim]() * settings.over[pos]; }else attr[key] = targ[pos]; // Number or 'number' if( /^\d+$/.test(attr[key]) ) // Check the limits attr[key] = attr[key] <= 0 ? 0 : Math.min( attr[key], max(Dim) ); // Queueing axes if( !i && settings.queue ){ // Don't waste time animating, if there's no need. if( old != attr[key] ) // Intermediate animation animate( settings.onAfterFirst ); // Don't animate this axis again in the next iteration. delete attr[key]; } }); animate( settings.onAfter ); function animate( callback ){ $elem.animate( attr, duration, settings.easing, callback && function(){ callback.call(this, target, settings); }); }; function max( Dim ){ var attr ='scroll'+Dim, doc = elem.ownerDocument; return win ? Math.max( doc.documentElement[attr], doc.body[attr] ) : elem[attr]; }; }).end(); }; function both( val ){ return typeof val == 'object' ? val : { top:val, left:val }; }; })( jQuery ); /** * jQuery.smoothDivScroll - Smooth div scrolling using jQuery. * This plugin is for turning a set of HTML elements's into a smooth scrolling area. * * Copyright (c) 2009 Thomas Kahn - thomas.kahn(at)karnhuset(dot)net * * This plugin is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * any later version. * * This plugin is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. . * * Date: 2009-07-05 * @author Thomas Kahn * @version 0.9 * * Changelog * --------------------------------------------- * 0.9 - Bugfixes: Problem with multiple autoscrollers on the same page - the intervals * where global which resulted in the wrong autoscroller stopping on mouseOver or * mouseDown. * Error in calculation in autoscrolling mode that made the autoscrolling grind * to a halt after a number of loops. * * 0.8 - Major update. New parameter setup. Lots of new autoscrolling capabilities and * new parameters for controlling the scrolling speed. Made it possible to start * the scroller at a specific element. * * 0.7 - Added support for autoscrolling after the page has loaded. * Added support for making the hot spots visible at start for X number of seconds * or visible all the time. * * 0.6 - First version. */ (function($){jQuery.fn.smoothDivScroll=function(options){var defaults={scrollingHotSpotLeft:"div.scrollingHotSpotLeft",scrollingHotSpotRight:"div.scrollingHotSpotRight",scrollWrapper:"div.scrollWrapper",scrollableArea:"div.scrollableArea",hiddenOnStart:false,ajaxContentURL:"",countOnlyClass:"",scrollingSpeed:25,mouseDownSpeedBooster:3,autoScroll:"",autoScrollDirection:"right",autoScrollSpeed:1,pauseAutoScroll:"",visibleHotSpots:"",hotSpotsVisibleTime:5,startAtElementId:""};options=$.extend(defaults,options);return this.each(function(){var $mom=$(this);if(options.ajaxContentURL.length!==0){$mom.scrollableAreaWidth=0;$mom.find(options.scrollableArea).load((options.ajaxContentURL),function(){$mom.find(options.scrollableArea).children((options.countOnlyClass)).each(function(){$mom.scrollableAreaWidth=$mom.scrollableAreaWidth+$(this).outerWidth(true);});$mom.find(options.scrollableArea).css("width",($mom.scrollableAreaWidth+"px"));if(options.hiddenOnStart){$mom.hide();} windowIsResized();setHotSpotHeightForIE();});} var scrollXpos;var booster;var motherElementOffset=$mom.offset().left;var hotSpotWidth=0;booster=1;var hasExtended=false;$(window).one("load",function(){if(options.ajaxContentURL.length===0){$mom.scrollableAreaWidth=0;$mom.tempStartingPosition=0;$mom.find(options.scrollableArea).children((options.countOnlyClass)).each(function(){if((options.startAtElementId.length!==0)&&(($(this).attr("id"))==options.startAtElementId)){$mom.tempStartingPosition=$mom.scrollableAreaWidth;} $mom.scrollableAreaWidth=$mom.scrollableAreaWidth+$(this).outerWidth(true);});$mom.find(options.scrollableArea).css("width",$mom.scrollableAreaWidth+"px");if(options.hiddenOnStart){$mom.hide();}} $mom.find(options.scrollWrapper).scrollLeft($mom.tempStartingPosition);if(options.autoScroll!==""){$mom.autoScrollInterval=setInterval(autoScroll,6);} if(options.autoScroll=="always") {hideLeftHotSpot();hideRightHotSpot();} switch(options.visibleHotSpots) {case"always":makeHotSpotBackgroundsVisible();break;case"onstart":makeHotSpotBackgroundsVisible();$mom.hideHotSpotBackgroundsInterval=setInterval(hideHotSpotBackgrounds,(options.hotSpotsVisibleTime*1000));break;default:break;}});$mom.find(options.scrollingHotSpotRight,options.scrollingHotSpotLeft).one('mouseover',function(){if(options.autoScroll=="onstart"){clearInterval($mom.autoScrollInterval);}});$(window).bind("resize",function(){windowIsResized();});function windowIsResized(){if(!(options.hiddenOnStart)) {$mom.scrollableAreaWidth=0;$mom.find(options.scrollableArea).children((options.countOnlyClass)).each(function(){$mom.scrollableAreaWidth=$mom.scrollableAreaWidth+$(this).outerWidth(true);});$mom.find(options.scrollableArea).css("width",$mom.scrollableAreaWidth+'px');} $mom.find(options.scrollWrapper).scrollLeft("0");var bodyWidth=$("body").innerWidth();if(options.autoScroll!=="always") {if($mom.scrollableAreaWidth0){$mom.find(options.scrollWrapper).scrollLeft($mom.find(options.scrollWrapper).scrollLeft()+(scrollXpos*booster));} showHideHotSpots();};if(options.pauseAutoScroll=="mousedown"&&options.autoScroll=="always") {$mom.find(options.scrollWrapper).bind('mousedown',function(){clearInterval($mom.autoScrollInterval);});$mom.find(options.scrollWrapper).bind('mouseup',function(){$mom.autoScrollInterval=setInterval(autoScroll,6);});} else if(options.pauseAutoScroll=="mouseover"&&options.autoScroll=="always") {$mom.find(options.scrollWrapper).bind('mouseover',function(){clearInterval($mom.autoScrollInterval);});$mom.find(options.scrollWrapper).bind('mouseout',function(){$mom.autoScrollInterval=setInterval(autoScroll,6);});} $mom.previousScrollLeft=0;$mom.pingPongDirection="right";$mom.swapAt;$mom.getNextElementWidth=true;var autoScroll=function() {if(options.autoScroll=="onstart"){showHideHotSpots();} switch(options.autoScrollDirection) {case"right":$mom.find(options.scrollWrapper).scrollLeft($mom.find(options.scrollWrapper).scrollLeft()+options.autoScrollSpeed);break;case"left":$mom.find(options.scrollWrapper).scrollLeft($mom.find(options.scrollWrapper).scrollLeft()-options.autoScrollSpeed);break;case"backandforth":$mom.previousScrollLeft=$mom.find(options.scrollWrapper).scrollLeft();if($mom.pingPongDirection=="right"){$mom.find(options.scrollWrapper).scrollLeft($mom.find(options.scrollWrapper).scrollLeft()+options.autoScrollSpeed);} else{$mom.find(options.scrollWrapper).scrollLeft($mom.find(options.scrollWrapper).scrollLeft()-options.autoScrollSpeed);} if($mom.previousScrollLeft===$mom.find(options.scrollWrapper).scrollLeft()) {if($mom.pingPongDirection=="right"){$mom.pingPongDirection="left";} else{$mom.pingPongDirection="right";}} break;case"endlessloop":if($mom.getNextElementWidth) {if(options.startAtElementId!==""){$mom.swapAt=$("#"+options.startAtElementId).outerWidth();} else{$mom.swapAt=$mom.find(options.scrollableArea).children(":first-child").outerWidth();} $mom.getNextElementWidth=false;} $mom.find(options.scrollWrapper).scrollLeft($mom.find(options.scrollWrapper).scrollLeft()+options.autoScrollSpeed);if(($mom.swapAt<=$mom.find(options.scrollWrapper).scrollLeft())) {$mom.find(options.scrollableArea).append($mom.find(options.scrollableArea).children(":first-child").clone());$mom.find(options.scrollWrapper).scrollLeft(($mom.find(options.scrollWrapper).scrollLeft()-$mom.find(options.scrollableArea).children(":first-child").outerWidth()));$mom.find(options.scrollableArea).children(":first-child").remove();$mom.getNextElementWidth=true;} break;default:break;}};$mom.find(options.scrollingHotSpotLeft).bind('mousemove',function(e){var x=$mom.find(options.scrollingHotSpotLeft).innerWidth()-(e.pageX-motherElementOffset);scrollXpos=Math.round((x/hotSpotWidth)*options.scrollingSpeed);if(scrollXpos===Infinity) {scrollXpos=0;}});$mom.find(options.scrollingHotSpotLeft).bind('mouseover',function(){if(options.autoScroll=="onstart"){clearInterval($mom.autoScrollInterval);} $mom.leftScrollInterval=setInterval(doScrollLeft,6);});$mom.find(options.scrollingHotSpotLeft).bind('mouseout',function(){clearInterval($mom.leftScrollInterval);scrollXpos=0;});$mom.find(options.scrollingHotSpotLeft).bind('mousedown',function(){booster=options.mouseDownSpeedBooster;});var doScrollLeft=function() {if(scrollXpos>0){$mom.find(options.scrollWrapper).scrollLeft($mom.find(options.scrollWrapper).scrollLeft()-(scrollXpos*booster));} showHideHotSpots();};function showHideHotSpots() {if($mom.find(options.scrollWrapper).scrollLeft()===0) {hideLeftHotSpot();showRightHotSpot();} else if(($mom.scrollableAreaWidth)<=($mom.find(options.scrollWrapper).innerWidth()+$mom.find(options.scrollWrapper).scrollLeft())) {hideRightHotSpot();showLeftHotSpot();} else {showRightHotSpot();showLeftHotSpot();}} function makeHotSpotBackgroundsVisible() {$mom.find(options.scrollingHotSpotLeft).addClass("scrollingHotSpotLeftVisible");$mom.find(options.scrollingHotSpotRight).addClass("scrollingHotSpotRightVisible");} function hideHotSpotBackgrounds() {clearInterval($mom.hideHotSpotBackgroundsInterval);$mom.find(options.scrollingHotSpotLeft).fadeTo("slow",0.0,function(){$mom.find(options.scrollingHotSpotLeft).removeClass("scrollingHotSpotLeftVisible");});$mom.find(options.scrollingHotSpotRight).fadeTo("slow",0.0,function(){$mom.find(options.scrollingHotSpotRight).removeClass("scrollingHotSpotRightVisible");});}});};})(jQuery); /** * jQuery.smoothDivScroll - Smooth div scrolling using jQuery. * This plugin is for turning a set of HTML elements's into a smooth scrolling area. * * Copyright (c) 2009 Thomas Kahn - thomas.kahn(at)karnhuset(dot)net * * This plugin is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * any later version. * * This plugin is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. . * * Date: 2009-05-23 * @author Thomas Kahn * @version 0.8 * * Changelog * --------------------------------------------- * 0.9 - Bugfixes: Problem with multiple autoscrollers on the same page - the intervals * where global which resulted in the wrong autoscroller stopping on mouseOver or * mouseDown. * Error in calculation in autoscrolling mode that made the autoscrolling grind * to a halt after a number of loops. * * 0.8 - Major update. New parameter setup. Lots of new autoscrolling capabilities and * new parameters for controlling the scrolling speed. Made it possible to start * the scroller at a specific element. * * 0.7 - Added support for autoscrolling after the page has loaded. * Added support for making the hot spots visible at start for X number of seconds * or visible all the time. * * 0.6 - First version. */ (function($) { jQuery.fn.smoothDivScroll = function(options){ var defaults = { scrollingHotSpotLeft: "div.scrollingHotSpotLeft", // The hot spot that triggers scrolling left. scrollingHotSpotRight: "div.scrollingHotSpotRight", // The hot spot that triggers scrolling right. scrollWrapper: "div.scrollWrapper", // The wrapper element that surrounds the scrollable area scrollableArea: "div.scrollableArea", // The actual element that is scrolled left or right hiddenOnStart: false, // True or false. Determines whether the element should be visible or hidden on start ajaxContentURL: "", // Optional. If supplied, content is fetched through AJAX using the supplied URL countOnlyClass: "", // Optional. If supplied, the function that calculates the width of the scrollable area will only count elements of this class scrollingSpeed: 25, // A way of controlling the scrolling speed. 1=slowest and 100= fastest. mouseDownSpeedBooster: 3, // 1 is normal speed (no speed boost), 2 is twice as fast, 3 is three times as fast, and so on autoScroll: "", // Optional. Leave it blank if you don't want any autoscroll. // Otherwise use the values "onstart" or "always". // onstart - the scrolling will start automatically after // the page has loaded and scroll according to the method you've selected // using the autoScrollDirection parameter. When the user moves the mouse // over the left or right hot spot the autoscroll will stop. After that // the scrolling will only be triggered by the host spots. // always - the hot spots are disabled alltogether and the scrollable area // will only scroll automatically. autoScrollDirection: "right", // This parameter controls the direction and behavior of the autoscrolling. // Optional. The values are: // right - autoscrolls right and stops when it reaches the end // left - autoscrolls left and stops when it reaches the end // (only relevant if you have set the parameter startAtElementId). // backandforth - starts autoscrolling right and when it reaches // the end, switches to autoscrolling left and so on. Ping-pong style. // endlessloop - continuous scrolling right. An endless loop of elements. autoScrollSpeed: 1, // 1-2 = slow, 3-4 = medium, 5-13 = fast -- anything higher = superfast pauseAutoScroll: "", // Optional. Values mousedown and mouseover. Leave blank for no pausing abilities. visibleHotSpots: "", // Optional. Leave it blank for invisible hot spots. // Otherwise use the values "onstart" or "always". // onstart - makes the hot spots visible for X-number of seconds // after tha page has loaded and then they become invisible. // always - hot spots are visible all the time. hotSpotsVisibleTime: 5, // If you have selected "onstart" as the value for visibleHotSpots, // you set the number of seconds that you want the hot spots to be // visible after the page has loaded. After this time they will fade // away and become invisible again. startAtElementId: "" // Optional. Use this parameter if you want the offset of the // scrollable area to be positioned at a specific element directly // after the page has loaded. First give your element an ID in the // HTML code and then provide this ID as a parameter. }; options = $.extend(defaults, options); /* Identify global variables so JSLint won't raise errors when verifying the code */ /*global autoScrollInterval, autoScroll, clearInterval, doScrollLeft, doScrollRight, hideHotSpotBackgrounds, hideHotSpotBackgroundsInterval, hideLeftHotSpot, hideRightHotSpot, jQuery, makeHotSpotBackgroundsVisible, setHotSpotHeightForIE, setInterval, showHideHotSpots, window, windowIsResized */ // Iterate and make each matched element a SmoothDivScroll return this.each(function() { // Create a variable for the current "mother element" var $mom = $(this); // Load the content of the scrollable area using the optional URL. // If no ajaxContentURL is supplied, we assume that the content of // the scrolling area is already in place. if(options.ajaxContentURL.length !== 0){ $mom.scrollableAreaWidth = 0; $mom.find(options.scrollableArea).load((options.ajaxContentURL), function(){ $mom.find(options.scrollableArea).children((options.countOnlyClass)).each(function() { $mom.scrollableAreaWidth = $mom.scrollableAreaWidth + $(this).outerWidth(true); }); // Set the width of the scrollable area $mom.find(options.scrollableArea).css("width", ($mom.scrollableAreaWidth + "px")); // Hide the mother element if it shouldn't be visible on start if(options.hiddenOnStart) { $mom.hide(); } windowIsResized(); setHotSpotHeightForIE(); }); } // Some variables used for working with the scrolling var scrollXpos; var booster; // The left offset of the container on which you place // the scrolling behavior. // This offset is used when calculating the mouse x-position // in relation to scroll hot spots var motherElementOffset = $mom.offset().left; // A variable used for storing the current hot spot width. // It is used when calculating the scroll speed var hotSpotWidth = 0; // Set the booster value to normal (doesn't change until the user // holds down the mouse button over one of the hot spots) booster = 1; var hasExtended = false; // Stuff to do once on load $(window).one("load",function(){ // If the content of the scrolling area is not loaded through ajax, // we assume it's already there and can run the code to calculate // the width of the scrolling area, resize it to that width if(options.ajaxContentURL.length === 0) { $mom.scrollableAreaWidth = 0; $mom.tempStartingPosition = 0; $mom.find(options.scrollableArea).children((options.countOnlyClass)).each(function() { // Check to see if the current element in the loop is the one where the scrolling should start if( (options.startAtElementId.length !== 0) && (($(this).attr("id")) == options.startAtElementId) ) { $mom.tempStartingPosition = $mom.scrollableAreaWidth; } // Add the width of the current element in the loop to the total width $mom.scrollableAreaWidth = $mom.scrollableAreaWidth + $(this).outerWidth(true); }); // Set the width of the scrollableArea to the accumulated width $mom.find(options.scrollableArea).css("width", $mom.scrollableAreaWidth + "px"); // Check to see if the whole thing should be hidden at start if(options.hiddenOnStart) { $mom.hide(); } } // Set the starting position of the scrollable area. If no startAtElementId is set, the starting position // will be the default value (zero) $mom.find(options.scrollWrapper).scrollLeft($mom.tempStartingPosition); // If the user has set the option autoScroll, the scollable area will // start scrolling automatically if(options.autoScroll !== "") { $mom.autoScrollInterval = setInterval(autoScroll, 6); } // If autoScroll is set to always, the hot spots should be disabled if(options.autoScroll == "always") { hideLeftHotSpot(); hideRightHotSpot(); } // If the user wants to have visible hot spots, here is where it's taken care of switch(options.visibleHotSpots) { case "always": makeHotSpotBackgroundsVisible(); break; case "onstart": makeHotSpotBackgroundsVisible(); $mom.hideHotSpotBackgroundsInterval = setInterval(hideHotSpotBackgrounds, (options.hotSpotsVisibleTime * 1000)); break; default: break; } }); // If autoScroll is running, here's where it's stopped when the user positions the mouse over one of the hot spots $mom.find(options.scrollingHotSpotRight, options.scrollingHotSpotLeft).one('mouseover',function(){ if(options.autoScroll == "onstart") { clearInterval($mom.autoScrollInterval); } }); // EVENT - window resize $(window).bind("resize",function(){ windowIsResized(); }); // A function for doing the stuff that needs to be // done when the browser window is resized function windowIsResized() { // If the scrollable area is not hidden on start, reset and recalculate the // width of the scrollable area if(!(options.hiddenOnStart)) { $mom.scrollableAreaWidth = 0; $mom.find(options.scrollableArea).children((options.countOnlyClass)).each(function() { $mom.scrollableAreaWidth = $mom.scrollableAreaWidth + $(this).outerWidth(true); }); $mom.find(options.scrollableArea).css("width", $mom.scrollableAreaWidth + 'px'); } // Reset the left offset of the scroll wrapper $mom.find(options.scrollWrapper).scrollLeft("0"); // Get the width of the page (body) var bodyWidth = $("body").innerWidth(); // If the scrollable area is shorter than the current // window width, both scroll hot spots should be hidden. // Otherwise, check which hot spots should be shown. if(options.autoScroll !== "always") { if($mom.scrollableAreaWidth < bodyWidth) { hideLeftHotSpot(); hideRightHotSpot(); } else { showHideHotSpots(); } } } // HELPER FUNCTIONS FOR SHOWING AND HIDING HOT SPOTS function hideLeftHotSpot(){ $mom.find(options.scrollingHotSpotLeft).hide(); } function hideRightHotSpot(){ $mom.find(options.scrollingHotSpotRight).hide(); } function showLeftHotSpot(){ $mom.find(options.scrollingHotSpotLeft).show(); // Recalculate the hot spot width. Do it here because you can // be sure that the hot spot is visible and has a width if(hotSpotWidth <= 0) { hotSpotWidth = $mom.find(options.scrollingHotSpotLeft).width(); } } function showRightHotSpot(){ $mom.find(options.scrollingHotSpotRight).show(); // Recalculate the hot spot width. Do it here because you can // be sure that the hot spot is visible and has a width if(hotSpotWidth <= 0) { hotSpotWidth = $mom.find(options.scrollingHotSpotRight).width(); } } function setHotSpotHeightForIE() { // Some bugfixing for IE 6 jQuery.each(jQuery.browser, function(i, val) { if(i=="msie" && jQuery.browser.version.substr(0,1)=="6") { $mom.find(options.scrollingHotSpotLeft).css("height", ($mom.find(options.scrollableArea).innerHeight())); $mom.find(options.scrollingHotSpotRight).css("height", ($mom.find(options.scrollableArea).innerHeight())); } }); } // ************************************************** // EVENTS - scroll right // ************************************************** // Check the mouse X position and calculate the relative X position inside the right hot spot $mom.find(options.scrollingHotSpotRight).bind('mousemove',function(e){ var x = e.pageX - (this.offsetLeft + motherElementOffset); scrollXpos = Math.round((x/hotSpotWidth) * options.scrollingSpeed); if(scrollXpos === Infinity) { scrollXpos = 0; } }); // mouseover right hot spot $mom.find(options.scrollingHotSpotRight).bind('mouseover',function(){ if(options.autoScroll == "onstart") { clearInterval($mom.autoScrollInterval); } $mom.rightScrollInterval = setInterval(doScrollRight, 6); }); // mouseout right hot spot $mom.find(options.scrollingHotSpotRight).bind('mouseout',function(){ clearInterval($mom.rightScrollInterval); scrollXpos = 0; }); // scrolling speed booster right $mom.find(options.scrollingHotSpotRight).bind('mousedown',function(){ booster = options.mouseDownSpeedBooster; }); // stop boosting the scrolling speed $("*").bind('mouseup',function(){ booster = 1; }); // The function that does the actual scrolling right var doScrollRight = function() { if(scrollXpos > 0) { $mom.find(options.scrollWrapper).scrollLeft($mom.find(options.scrollWrapper).scrollLeft() + (scrollXpos*booster)); } showHideHotSpots(); }; // ************************************************** // Autoscrolling // ************************************************** if(options.pauseAutoScroll == "mousedown" && options.autoScroll == "always") { $mom.find(options.scrollWrapper).bind('mousedown',function(){ clearInterval($mom.autoScrollInterval); }); $mom.find(options.scrollWrapper).bind('mouseup',function(){ $mom.autoScrollInterval = setInterval(autoScroll, 6); }); } else if(options.pauseAutoScroll == "mouseover" && options.autoScroll == "always") { $mom.find(options.scrollWrapper).bind('mouseover',function(){ clearInterval($mom.autoScrollInterval); }); $mom.find(options.scrollWrapper).bind('mouseout',function(){ $mom.autoScrollInterval = setInterval(autoScroll, 6); }); } $mom.previousScrollLeft = 0; $mom.pingPongDirection = "right"; $mom.swapAt; $mom.getNextElementWidth = true; // The autoScroll function var autoScroll = function() { if (options.autoScroll == "onstart") { showHideHotSpots(); } switch(options.autoScrollDirection) { case "right": $mom.find(options.scrollWrapper).scrollLeft($mom.find(options.scrollWrapper).scrollLeft() + options.autoScrollSpeed); break; case "left": $mom.find(options.scrollWrapper).scrollLeft($mom.find(options.scrollWrapper).scrollLeft() - options.autoScrollSpeed); break; case "backandforth": // Store the old scrollLeft value to see if the scrolling has reached the end $mom.previousScrollLeft = $mom.find(options.scrollWrapper).scrollLeft(); if($mom.pingPongDirection == "right") { $mom.find(options.scrollWrapper).scrollLeft($mom.find(options.scrollWrapper).scrollLeft() + options.autoScrollSpeed); } else { $mom.find(options.scrollWrapper).scrollLeft($mom.find(options.scrollWrapper).scrollLeft() - options.autoScrollSpeed); } // If the scrollLeft hasnt't changed it means that the scrolling has reached // the end and the direction should be switched if($mom.previousScrollLeft === $mom.find(options.scrollWrapper).scrollLeft()) { if($mom.pingPongDirection == "right") { $mom.pingPongDirection = "left"; } else { $mom.pingPongDirection = "right"; } } break; case "endlessloop": // Get the width of the first element. When it has scrolled out of view, // the element swapping should be executed. A true/false variable is used // as a flag variable so the swapAt value doesn't have to be recalculated // in each loop. if($mom.getNextElementWidth) { if(options.startAtElementId !== "") { $mom.swapAt = $("#" + options.startAtElementId).outerWidth(); } else { $mom.swapAt = $mom.find(options.scrollableArea).children(":first-child").outerWidth(); } $mom.getNextElementWidth = false; } // Do the autoscrolling $mom.find(options.scrollWrapper).scrollLeft($mom.find(options.scrollWrapper).scrollLeft() + options.autoScrollSpeed); // Check to see if the swap should be done if(($mom.swapAt <= $mom.find(options.scrollWrapper).scrollLeft())) { // Clone the first element and append it last in the scrollableArea $mom.find(options.scrollableArea).append($mom.find(options.scrollableArea).children(":first-child").clone()); // Compensate for the removal of the first element by $mom.find(options.scrollWrapper).scrollLeft(($mom.find(options.scrollWrapper).scrollLeft() - $mom.find(options.scrollableArea).children(":first-child").outerWidth())); // Remove it from its original position as the first element $mom.find(options.scrollableArea).children(":first-child").remove(); $mom.getNextElementWidth = true; } break; default: break; } }; // ************************************************** // EVENTS - scroll left // ************************************************** // Check the mouse X position and calculate the relative X position inside the left hot spot $mom.find(options.scrollingHotSpotLeft).bind('mousemove',function(e){ var x = $mom.find(options.scrollingHotSpotLeft).innerWidth() - (e.pageX - motherElementOffset); scrollXpos = Math.round((x/hotSpotWidth) * options.scrollingSpeed); if(scrollXpos === Infinity) { scrollXpos = 0; } }); // mouseover left hot spot $mom.find(options.scrollingHotSpotLeft).bind('mouseover',function(){ if(options.autoScroll == "onstart") { clearInterval($mom.autoScrollInterval); } $mom.leftScrollInterval = setInterval(doScrollLeft, 6); }); // mouseout left hot spot $mom.find(options.scrollingHotSpotLeft).bind('mouseout',function(){ clearInterval($mom.leftScrollInterval); scrollXpos = 0; }); // scrolling speed booster left $mom.find(options.scrollingHotSpotLeft).bind('mousedown',function(){ booster = options.mouseDownSpeedBooster; }); // The function that does the actual scrolling left var doScrollLeft = function() { if(scrollXpos > 0) { $mom.find(options.scrollWrapper).scrollLeft($mom.find(options.scrollWrapper).scrollLeft() - (scrollXpos*booster)); } showHideHotSpots(); }; // ************************************************** // Hot spot functions // ************************************************** // Function for showing and hiding hot spots depending on the // offset of the scrolling function showHideHotSpots() { // When you can't scroll further left // the left scroll hot spot should be hidden // and the right hot spot visible if($mom.find(options.scrollWrapper).scrollLeft() === 0) { hideLeftHotSpot(); showRightHotSpot(); } // When you can't scroll further right // the right scroll hot spot should be hidden // and the left hot spot visible else if(($mom.scrollableAreaWidth) <= ($mom.find(options.scrollWrapper).innerWidth() + $mom.find(options.scrollWrapper).scrollLeft())) { hideRightHotSpot(); showLeftHotSpot(); } // If you are somewhere in the middle of your // scrolling, both hot spots should be visible else { showRightHotSpot(); showLeftHotSpot(); } } // Function for making the hot spot background visible function makeHotSpotBackgroundsVisible() { // Alter the CSS (SmoothDivScroll.css) if you want to customize // the look'n'feel of the visible hot spots // The left hot spot $mom.find(options.scrollingHotSpotLeft).addClass("scrollingHotSpotLeftVisible"); // The right hot spot $mom.find(options.scrollingHotSpotRight).addClass("scrollingHotSpotRightVisible"); } // Hide the hot spot backgrounds. function hideHotSpotBackgrounds() { clearInterval($mom.hideHotSpotBackgroundsInterval); // Fade out the left hot spot $mom.find(options.scrollingHotSpotLeft).fadeTo("slow", 0.0, function(){ $mom.find(options.scrollingHotSpotLeft).removeClass("scrollingHotSpotLeftVisible"); }); // Fade out the right hot spot $mom.find(options.scrollingHotSpotRight).fadeTo("slow", 0.0, function(){ $mom.find(options.scrollingHotSpotRight).removeClass("scrollingHotSpotRightVisible"); }); } }); }; })(jQuery); jQuery.fn.liScroll = function(settings) { settings = jQuery.extend({ travelocity: 0.07 }, settings); return this.each(function(){ var $strip = jQuery(this); $strip.addClass("newsticker") var stripWidth = 0; var $mask = $strip.wrap("
"); var $tickercontainer = $strip.parent().wrap("
"); var containerWidth = $strip.parent().parent().width(); //a.k.a. 'mask' width $strip.find("li").each(function(i){ stripWidth += jQuery(this, i).width(); }); $strip.width(stripWidth); var defTiming = stripWidth/settings.travelocity; var totalTravel = stripWidth+containerWidth; function scrollnews(spazio, tempo){ $strip.animate({left: '-='+ spazio}, tempo, "linear", function(){$strip.css("left", containerWidth); scrollnews(totalTravel, defTiming);}); } scrollnews(totalTravel, defTiming); $strip.hover(function(){ jQuery(this).stop(); }, function(){ var offset = jQuery(this).offset(); var residualSpace = offset.left + stripWidth; var residualTime = residualSpace/settings.travelocity; scrollnews(residualSpace, residualTime); }); }); }; /* * simplyScroll 1.0.4 - a scroll-tastic jQuery plugin * * http://logicbox.net/jquery/simplyscroll * http://logicbox.net/blog/simplyscroll-jquery-plugin * http://plugins.jquery.com/project/simplyScroll * * Copyright (c) 2009 Will Kelly - http://logicbox.net * * Dual licensed under the MIT (MIT-LICENSE.txt) * and GPL (GPL-LICENSE.txt) licenses. * * Last revised: 03/07/2009 21:13 * */ (function($) { $.fn.simplyScroll = function(o) { return this.each(function() { new $.simplyScroll(this,o); }); }; var defaults = { className: 'simply-scroll', frameRate: 24, //No of movements per second speed: 1, //No of pixels per frame horizontal: true, autoMode: 'off', //disables buttons 'loop','bounce' pauseOnHover: true, startOnLoad: false, //use this if having rendering problems (safari 3 + Mac OSX?) localJsonSource: '', //format [{"src":"images/pic.jpg","title":"title","link":"http://"},{etc..}] flickrFeed: '', jsonImgWidth: 240, jsonImgHeight: 180 }; $.simplyScroll = function(el,o) { var self = this; this.o = $.extend({}, defaults, o || {}); this.auto = this.o.autoMode!=="off" ? true : false; //called on ul/ol/div etc this.$list = $(el); //generate extra markup this.$list.addClass('simply-scroll-list') .wrap('
') .parent().wrap('
'); if (!this.o.auto) { //button placeholders this.$list.parent().parent() .prepend('
') .prepend('
'); } //load image data if (this.o.flickrFeed) { $.getJSON(this.o.flickrFeed + "&format=json&jsoncallback=?", function(data) { json = []; $.each(data.items, function(i,item) { json.push({ "src": item.media.m, "title": item.title, "link": item.link }); }); self.renderData(json); } ); } else if (this.o.localJsonSource) { $.getJSON(this.o.localJsonSource, function(json) { self.renderData(json); } ); } else { if (!this.o.startOnLoad) { this.init(); } else { //wait for load before completing setup $(window).load(function() { self.init(); }); } } }; $.simplyScroll.fn = $.simplyScroll.prototype = {}; $.simplyScroll.fn.extend = $.simplyScroll.extend = $.extend; $.simplyScroll.fn.extend({ init: function() { //shortcuts this.$items = this.$list.children(); this.$clip = this.$list.parent(); this.$container = this.$clip.parent(); if (!this.o.horizontal) { this.itemMax = this.$items[0].offsetHeight; //this.$items[0].offsetHeight; this.clipMax = this.$clip.height(); //this.$clip[0].offsetHeight; this.dimension = 'height'; this.moveBackClass = 'simply-scroll-btn-up'; this.moveForwardClass = 'simply-scroll-btn-down'; } else { this.itemMax = this.$items[0].offsetWidth; this.clipMax = this.$clip.width(); this.dimension = 'width'; this.moveBackClass = 'simply-scroll-btn-left'; this.moveForwardClass = 'simply-scroll-btn-right'; } this.posMin = 0; this.posMax = this.$items.length * this.itemMax; this.$list.css(this.dimension,this.posMax +'px'); if (this.o.autoMode=='loop') { var addItems = Math.ceil(this.clipMax / this.itemMax); this.$items.slice(0,addItems).clone(true).appendTo(this.$list); this.posMax += (this.clipMax - this.o.speed); this.$list.css(this.dimension,this.posMax+(this.itemMax*addItems) +'px'); } this.interval = null; this.intervalDelay = Math.floor(1000 / this.o.frameRate); //ensure that speed is divisible by item width while (this.itemMax % this.o.speed !== 0) { this.o.speed--; if (this.o.speed===0) { this.o.speed=1; break; } } var self = this; this.trigger = null; this.funcMoveBack = function() { self.trigger=this;self.moveBack(); }; this.funcMoveForward = function() { self.trigger=this;self.moveForward(); }; this.funcMoveStop = function() { self.moveStop(); }; this.funcMoveResume = function() { self.moveResume(); }; if (this.auto) { if (this.o.pauseOnHover) { this.$clip.hover(this.funcMoveStop,this.funcMoveResume); } this.moveForward(); } else { this.$btnBack = $('.simply-scroll-back',this.$container) .addClass('simply-scroll-btn' + ' ' + this.moveBackClass + ' ' + 'disabled') .hover(this.funcMoveBack,this.funcMoveStop); this.$btnForward = $('.simply-scroll-forward',this.$container) .addClass('simply-scroll-btn' + ' ' + this.moveForwardClass) .hover(this.funcMoveForward,this.funcMoveStop); } }, moveForward: function() { var self = this; this.movement = 'forward'; if (this.trigger !== null) { this.$btnBack.removeClass('disabled'); } self.interval = setInterval(function() { if (!self.o.horizontal && self.$clip[0].scrollTop < (self.posMax-self.clipMax)) { self.$clip[0].scrollTop += self.o.speed; } else if (self.o.horizontal && self.$clip[0].scrollLeft < (self.posMax-self.clipMax)) { self.$clip[0].scrollLeft += self.o.speed; } else if (self.o.autoMode=='loop') { self.resetPos(); } else { self.moveStop(self.movement); } },self.intervalDelay); }, moveBack: function() { var self = this; this.movement = 'back'; if (this.trigger !== null) { this.$btnForward.removeClass('disabled'); } self.interval = setInterval(function() { if (!self.o.horizontal && self.$clip[0].scrollTop>0) { self.$clip[0].scrollTop -= self.o.speed; } else if (self.o.horizontal && self.$clip[0].scrollLeft>0) { self.$clip[0].scrollLeft -= self.o.speed; } else if (self.o.autoMode=='loop') { self.resetPos(); } else { self.moveStop(self.movement); } },self.intervalDelay); }, moveStop: function(moveDir) { clearInterval(this.interval); if (this.trigger!==null) { if (typeof moveDir != "undefined") { $(this.trigger).addClass('disabled'); } this.trigger = null; } if (this.auto) { if (this.o.autoMode=='bounce') { moveDir == 'forward' ? this.moveBack() : this.moveForward(); } } }, moveResume: function() { this.movement=='forward' ? this.moveForward() : this.moveBack(); }, resetPos: function() { if (!this.o.horizontal) { this.$clip[0].scrollTop = 0; } else { this.$clip[0].scrollLeft = 0; } }, renderData: function(json) { if (json.length>0) { //render json data var self = this; $.each(json, function(i,item) { $("").attr({ src: item.src, title: item.title, alt: item.title, width: self.o.jsonImgWidth, height: self.o.jsonImgHeight }).appendTo(self.$list); }); this.init(); } } }); })(jQuery);