Skip to content
Browse files

Added horizontal scroll library to jarallax

  • Loading branch information...
1 parent c07bbe8 commit ae186c8b380b3fa76f3b6468bf389e4dec5b3a5a CodeHunger committed Aug 9, 2012
View
19 import/scroll-converter/LICENSE-MIT
@@ -0,0 +1,19 @@
+Copyright (c) 2011 Johannes Koggdal (created while working at BombayWorks)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
View
65 import/scroll-converter/README.md
@@ -0,0 +1,65 @@
+# Scroll Converter
+
+This script converts vertical scrolling to horizontal scrolling. Most mouses only have a scroll wheel for vertical scrolling, which makes it difficult to scroll horizontally on a website. If you have a site where you want to be able to scroll vertically using the scroll wheel (or trackpad) to scroll the content horizontally, this is the script for you!
+
+
+
+
+## How it works
+
+
+The script listens for changes of the mouse wheel data, and updates the horizontal scroll value based on that. Sometimes the browser uses scrolling with easing, which is also transferred correctly. It will not perform exactly as normal scrolling, but it works good enough.
+
+
+### Browser differences
+
+While developing this I noticed big differences between browsers. It is very difficult to get this perfect in all browsers, so what I have tried is getting it fairly good in all browsers.
+
+There are two properties in the event object where you can capture the wheel data: `wheelDelta` and `detail`. Different browsers use different properties, and give different values for the same amount of scroll. This script doesn't try to give a normalized value from these, but instead tries to normalize the experience to some degree.
+
+Different pointing devices will give different results. A regular scroll wheel on an average mouse scroll in steps. A nice trackpad will have much better detail. Not all browsers expose this detail though. During my testing I found that Firefox gives the same value for a regular scroll wheel and a trackpad, while Safari and Chrome give different values and more fine-grained detail for the trackpad. That means the scrolling will look much better in these browsers, when using a good trackpad.
+
+
+### Browser support
+
+It works in all browsers I have tried in, including IE down to version 6.
+
+
+
+## Usage
+
+
+### Include the script into your page
+
+ <script src="scroll-converter.min.js"></script>
+
+
+### Initialize the script
+To enable the script you need to activate it.
+
+ scrollConverter.activate();
+
+The `activate` method takes a function as an optional argument, which will execute everytime the scrolling updates. The first argument of that function is the current horizontal scroll offset.
+
+ scrollConverter.activate(function (offset) {
+ console.log(offset); // Logs the current horizontal scroll offset
+ });
+
+
+### Deactivation
+If you later want to deactivate the conversion, you can call the `deactivate` method:
+
+ scrollConverter.deactivate();
+
+You can also deactivate all kinds off scrolling on the page, by calling this method:
+
+ scrollConverter.deactivateAllScrolling();
+
+If you want to activate the scrolling again you can just call the `activate` method again (but you can't pass a callback at this point).
+
+
+
+## License
+
+
+This script was developed by me ([Johannes Koggdal](http://koggdal.com/)) while working at [BombayWorks](http://bombayworks.com/). We open source it under the MIT license to spread the knowledge and make it simpler for other people to make the web more awesome.
View
193 import/scroll-converter/scroll-converter.js
@@ -0,0 +1,193 @@
+/*
+scrollConverter 1.0
+https://github.com/koggdal/scroll-converter
+
+Copyright 2011 Johannes Koggdal (http://koggdal.com/)
+Developed for BombayWorks (http://bombayworks.com/)
+
+Released under MIT license
+*/
+
+window.scrollConverter = (function (window, document, undefined) {
+
+ // Private vars
+ var docElem = document.documentElement,
+ active = false,
+ hasDeactivated = false,
+ eventsBound = false;
+
+ // Private methods
+ var scrollCallback = function (offset, event, callback) {
+
+ // Abort the scrolling if it's inactive
+ if (!active) {
+ return;
+ }
+
+ var delta, numPixelsPerStep, change, newOffset,
+ docOffset, scrollWidth, winWidth, maxOffset;
+
+ // Set scrolling parameters
+ delta = 0;
+ numPixelsPerStep = 10;
+
+ // Find the maximum offset for the scroll
+ docOffset = (docElem ? docElem.offsetWidth : 0) || 0;
+ scrollWidth = document.body.scrollWidth || 0;
+ winWidth = docElem ? docElem.clientWidth : 0;
+ maxOffset = Math.max(docOffset, scrollWidth) - winWidth;
+
+ // "Normalize" the wheel value across browsers
+ // The delta value after this will not be the same for all browsers.
+ // Instead, it is normalized in a way to try to give a pretty similar feeling in all browsers.
+ //
+ // Firefox and Opera
+ if (event.detail) {
+ delta = event.detail * -240;
+ }
+ // IE, Safari and Chrome
+ else if (event.wheelDelta) {
+ delta = event.wheelDelta * 5;
+ }
+
+ // Get the real offset change from the delta
+ // A positive change is when the user scrolled the wheel up (in regular scrolling direction)
+ // A negative change is when the user scrolled the wheel down
+ change = delta / 120 * numPixelsPerStep;
+ newOffset = offset.x - change;
+
+ // Do the scroll if the new offset is positive
+ if (newOffset >= 0 && newOffset <= maxOffset) {
+ offset.x = newOffset;
+ offset.setByScript = true;
+ window.scrollTo(offset.x, offset.y);
+ }
+ // Keep the offset within the boundaries
+ else if (offset.x !== 0 && offset.x !== maxOffset) {
+ offset.x = newOffset > maxOffset ? maxOffset : 0;
+ offset.setByScript = true;
+ window.scrollTo(offset.x, offset.y);
+ }
+
+ // Fire the callback
+ if (typeof callback === "function") {
+ callback(offset);
+ }
+ },
+
+ getOffset = function (axis) {
+ axis = axis.toUpperCase();
+ var pageOffset = "page" + axis + "Offset",
+ scrollValue = "scroll" + axis,
+ scrollDir = "scroll" + (axis === "X" ? "Left" : "Top");
+
+ // Get the scroll offset for all browsers
+ return window[pageOffset] || window[scrollValue] || (function () {
+ var rootElem = document.documentElement || document.body.parentNode;
+ return ((typeof rootElem[scrollDir] === "number") ? rootElem : document.body)[scrollDir];
+ }());
+ },
+
+ bindEvents = function (offset, cb) {
+
+ var callback = function (e) {
+
+ // Fix event object for IE8 and below
+ e = e || window.event;
+
+ // Trigger the scroll behavior
+ scrollCallback(offset, e, cb);
+
+ // Prevent the normal scroll action to happen
+ if (e.preventDefault && e.stopPropagation) {
+ e.preventDefault();
+ e.stopPropagation();
+ } else {
+ return false;
+ }
+ },
+
+ updateOffsetOnScroll = function () {
+
+ // Update the offset variable when the normal scrollbar is used
+ if (!offset.setByScript) {
+ offset.x = getOffset("x");
+ offset.y = getOffset("y");
+ }
+ offset.setByScript = false;
+ };
+
+ // Safari, Chrome, Opera, IE9+
+ if (window.addEventListener) {
+
+ // Safari, Chrome, Opera, IE9
+ if ("onmousewheel" in window) {
+ window.addEventListener("mousewheel", callback, false);
+ window.addEventListener("scroll", updateOffsetOnScroll, false);
+ }
+ // Firefox
+ else {
+ window.addEventListener("DOMMouseScroll", callback, false);
+ window.addEventListener("scroll", updateOffsetOnScroll, false);
+ }
+ }
+ // IE8 and below
+ else {
+ document.attachEvent("onmousewheel", callback);
+ window.attachEvent("onscroll", updateOffsetOnScroll);
+ }
+ },
+
+ deactivateScrolling = function (e) {
+ e.preventDefault();
+ e.stopPropagation();
+ return false;
+ };
+
+ // Return a public API
+ return {
+
+ // Activate the scrolling switch
+ // An optional callback can be passed in, which will fire at every scroll update
+ activate: function (callback) {
+
+ // Set state
+ active = true;
+
+ // Bind events if it hasn't been done before
+ if (!eventsBound) {
+ var offset = { x: 0, y: 0 };
+ bindEvents(offset, callback);
+ eventsBound = true;
+ }
+
+ // Remove event handlers if it was previously deactivated
+ if (hasDeactivated) {
+ if (window.addEventListener) {
+ window.removeEventListener("scroll", deactivateScrolling, true);
+ } else {
+ window.detachEvent("onscroll", deactivateScrolling);
+ }
+ hasDeactivated = false;
+ }
+ },
+
+ deactivate: function () {
+ active = false;
+ },
+
+ deactivateAllScrolling: function () {
+
+ // Set state
+ active = false;
+ hasDeactivated = true;
+
+ // Bind event handlers to disable the scroll
+ if (window.addEventListener) {
+ window.addEventListener("scroll", deactivateScrolling, true);
+ } else {
+ window.attachEvent("onscroll", deactivateScrolling);
+ }
+ }
+ };
+}(window, document));
View
4 package.json
@@ -1,10 +1,10 @@
{
"name":"Jarallax",
"file_name":"jarallax",
- "author":"Enter name here",
+ "author":"Jacko Hoogeveen",
"title": "Jarallax",
"description": "The parallax scrolling opensource Javascript library",
- "version":"0.2.3",
+ "version":"0.2.4",
"website": "http://jarallax.com",
"destination":"bin/",
"license":

0 comments on commit ae186c8

Please sign in to comment.
Something went wrong with that request. Please try again.