/** * 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 = { scrollBanner: "scrollBanner", 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. captionWrapper: "div.captionWrapper", shadowWrapper: "shadow-border", shadowDepth: 12, caption: "", entries: [] }; 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 $dad = $(this); var $mom; // = $dad.find(scrollBanner); // 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 ($mom && 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; // Set the booster value to normal (doesn't change until the user // holds down the mouse button over one of the hot spots) var booster = 1; // 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 = $dad.offset().left; //$mom.offset().left; // A variable used for storing the current hot spot width. // It is used when calculating the scroll speed var hotSpotWidth = 0; var hasExtended = false; // INFO, GR: Create the components visual layout var shadowWrapper = $(document.createElement('div')); shadowWrapper.attr("id", options.shadowWrapper); $dad.append(shadowWrapper); var scrollContainer = $(document.createElement('div')); scrollContainer.attr("id", "scrollContainer"); shadowWrapper.append(scrollContainer); var scrollBanner = $(document.createElement('div')); scrollBanner.attr("id", options.scrollBanner); scrollContainer.append(scrollBanner); $mom = scrollBanner; var scrollHotSpotLeft = $(document.createElement('div')); scrollHotSpotLeft.attr("class", "scrollingHotSpotLeft"); $mom.append(scrollHotSpotLeft); var scrollHotSpotRight = $(document.createElement('div')); scrollHotSpotRight.attr("class", "scrollingHotSpotRight"); $mom.append(scrollHotSpotRight); var scrollWrapper = $(document.createElement('div')); scrollWrapper.attr("class", "scrollWrapper"); $mom.append(scrollWrapper); var scrollableArea = $(document.createElement('div')); scrollableArea.attr("class", "scrollableArea"); scrollWrapper.append(scrollableArea); if (options.caption != "") { var captionWrapper = $(document.createElement('div')); captionWrapper.attr("class", "captionWrapper"); captionWrapper.text(options.caption); $mom.parent().append(captionWrapper); } // 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; for (var i = 0; i < options.entries.length; i++) { var entry = options.entries[i]; var newImage = $(document.createElement('img')); newImage.attr("src", entry['src']); newImage.attr("alt", entry['title']); newImage.attr("border", 0); // INFO, GR: Safari does not know the image width before it is completly loaded. We need to set the scroll area width after the image has been loaded. if ($.browser.safari) { newImage.load(function() { $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"); }); } if (entry['hover'] != null) { newImage.attr('tag', entry['hover']); newImage.attr('lang', entry['src']); newImage.hover( function() { $(this).attr('src', $(this).attr('tag')); }, function() { $(this).attr('src', $(this).attr('lang')); } ); } if (entry['url'] != null) { var newLink = $(document.createElement('a')); newLink.attr("href", entry['url']); newLink.attr("title", entry['title']); newLink.attr("hidefocus", true); newLink.attr("target", entry['target'] || '_blank'); if (entry['showTitle']) { newLink.text(entry['title']); } newLink.append(newImage); $mom.find(options.scrollableArea).append(newLink); } else $mom.find(options.scrollableArea).append(newImage); } $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 if (($mom.scrollableAreaWidth > 0) && !$.browser.safari) { $mom.find(options.scrollableArea).css("width", $mom.scrollableAreaWidth + "px"); } // if( options.autoScroll != "" ) { // $mom.parent().css("height", $mom.find(options.scrollableArea).attr( "scrollHeight" )); // } // else // $mom.parent().css("height", "auto" ); // if( (options.captionWrapper != "")) { // var captionWrapper = $mom.parent().find(options.captionWrapper); // if( options.autoScroll != "" ) { // captionWrapper.css( "top", (($mom.find(options.scrollableArea).attr( "scrollHeight" ) - captionWrapper.attr("scrollHeight")) / 2)); // } // else // captionWrapper.css( "top", captionWrapper.attr("scrollHeight")/2 ); // } // Check to see if the whole thing should be hidden at start if (options.hiddenOnStart) { $mom.hide(); } var shadowedBorder = RUZEE.ShadedBorder.create({ corner: 6, shadow: options.shadowDepth }); shadowedBorder.render(shadowWrapper); } // 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" /*|| options.autoScroll == "continuous"*/) { 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" || options.autoScroll == "continuous") { clearInterval($mom.autoScrollInterval); } $mom.rightScrollInterval = setInterval(doScrollRight, 6); }); // mouseout right hot spot $mom.find(options.scrollingHotSpotRight).bind('mouseout', function() { clearInterval($mom.rightScrollInterval); scrollXpos = 0; if (options.autoScroll == "continuous") { $mom.autoScrollInterval = setInterval(autoScroll, 6); } }); // 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" || options.autoScroll == "continuous")) { $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" || options.autoScroll == "continuous")) { $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" || options.autoScroll == "continuous") { 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" || options.autoScroll == "continuous") { clearInterval($mom.autoScrollInterval); } $mom.leftScrollInterval = setInterval(doScrollLeft, 6); }); // mouseout left hot spot $mom.find(options.scrollingHotSpotLeft).bind('mouseout', function() { clearInterval($mom.leftScrollInterval); scrollXpos = 0; if (options.autoScroll == "continuous") { $mom.autoScrollInterval = setInterval(autoScroll, 6); } }); // 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);