Quick Guide: Adding Smooth Scrolling to Your Webpages. By Nathan Rohler Faster Connections Beget... Condensation? The wide use of broadband connections in today's developed world means that web professionals can create webpages that hold more content than in the past. This isn't so much an opportunity for verbosity (indeed, the pace of today's society calls for succinctness), as it is an opportunity for condensation. Instead of having three shorter pages, we can now have a single longer page that provides continuity by displaying all information in direct proximity. To provide navigation from section to section on this type of longer page, links are used – just as with the more traditional pages. Linking To Specific Points on a Page When we want to link to a specific point on a page, the standard tool that HTML provides is the named anchor. While this default method is fully functional, there's a usability problem: clicking that link makes the user jump instantly to the bottom of the page.
The Solution: Smooth Scrolling The solution? 1. 2. 3. 10 jQuery Horizonal Scroll Demos & Plugins. In today’s post we bring to you 10 jQuery Horizonal Scroll Demos & Plugins useful for those who see things horizontally. I guess we have to accept some people scroll both ways! :) 1. Smooth Vertical or Horizontal Page Scrolling with jQuery In this tutorial we will create a simple smooth scrolling effect with jQuery. We will create a horizontal and a vertical website layout to show the effect. SourceDemo 2.
To get horizontal scrolling the Mouse Wheel Plugin by Brandon Aaron (GitHub, Download) will be used to detect mouse wheel movements like a keypress and of course, jQuery itself will be used. SourceDemo 3. Supporting the mouse wheel can add further interactivity to your HTML5 web pages. SourceDemo 4. In this tutorial we will create a simple smooth horizontal content scrolling effect with just a few lines of jQuery without using any plugin. SourceDemo 5. jQuery Horizontal automatic Scrollbars with mouse We all know that horizontal scrollbars are hideous. SourceDemo SourceDemo 7. simplyScroll v2. jQuery Smooth Scrolling Plugin | Page Scroller. JavaScript function in href vs. onclick. jQuery Waypoints.
.waypoint([callback], [options]) callback type function, optional options type object, optional Calling the waypoint function on a set of elements registers them as waypoints. You can pass in a callback function… $('.thing').waypoint(function(direction) { // do stuff }); …an options object… …or both… …but you must pass something. $('.thing').waypoint(); // error The waypoint callback function takes one parameter, direction. $('.thing').waypoint(function(direction) { alert(direction); // up, down, left, or right }); The options object lets you define where in the viewport to trigger the waypoint, whether the waypoint should be on the horizontal axis, and much more. context string, HTMLElement, or jQuery object default: window The context defines which scrollable element the waypoint belongs to and acts within. Continuous boolean default: true If true, and multiple waypoints are triggered in one scroll, this waypoint will trigger even if it is not the last waypoint reached.
Enabled handler function. Draggable and dropable views for backbone, uses html5 drag and drop api, requires jquery and underscore, not tested in IE yet. Return View.extend({ initialize: function () { this.el.bind("dragover", _.bind(this. _dragOverEvent, this)) this.el.bind("dragenter", _.bind(this. _dragEnterEvent, this)) this.el.bind("dragleave", _.bind(this. this.el.bind("drop", _.bind(this. this.
_dragOverEvent: function (e) { if (e.originalEvent) e = e.originalEvent var data = this. if (this.dragOver(data, e.dataTransfer, e) ! If (e.preventDefault) e.preventDefault() e.dataTransfer.dropEffect = 'copy' // default _dragEnterEvent: function (e) { _dragLeaveEvent: function (e) { this.dragLeave(data, e.dataTransfer, e) _dropEvent: function (e) { if (e.stopPropagation) e.stopPropagation() // stops the browser from redirecting if (this. this.drop(data, e.dataTransfer, e) _getCurrentDragData: function (e) { var data = null if (window. return data dragOver: function (data, dataTransfer, e) { // optionally override me and set dataTransfer.dropEffect, return false if the data is not droppable this.el.addClass("draghover") this.
jQuery UI Touch Punch - Touch Event Support for jQuery UI.