background preloader


Notice I've pretty much stopped updating this blog, but the plugin development is still on-going. You can find the link to the Github project page at the bottom of the article. Introduction An article about animated scrolling with jQuery inspired me to make a small, customizable plugin for scrolling elements, or the window itself. How to specify what to scroll ? Simple, all the matched elements will be scrolled, for example: $('div.pane').scrollTo(); If you need to scroll the window (screen), then use: $.scrollTo(); How to specify where ? Settings Getting the real scrollable element out of a node In order to find the real element whose attributes will be animated, you need to call $.fn. $(window). Manually finding the scrolling limit ScrollTo always had an internal function that calculates the scrolling limit for both axes. Overloading This plugin accepts the arguments in two ways, like $.animate(). $().scrollTo( , , ); $().scrollTo( , ); In this second case, you can specify the duration in the hash.

Sticky - An unbelievably simple notification system for jQuery July 19, 2011 Let's face it, your users need sweet little notifications to keep them all warm and fuzzy inside. Sticky allows you to send such messages with ease, and class. Quickly notify a user of software updates, process completions, or annoy them with registration reminders. Demo Let's start with some basic messages. jQuery plugin: Treeview Lightwof an unordered list into an expandable and collapsable tree, great for unobtrusive navigation enhancements. Supports both location and cookie based persistence. Note as of April 2010: While the plugin still works as it is, it has some shortcomings, and not maintained anymore. There are now plenty of alternative jQuery tree plugins, like jsTree.

Adaptor, an extensible jQuery content slider This jQuery plugin is a free and lightweight content slider for creating cool 3D (and 2D) slideshows for featured content on your website. In older browsers that do not support CSS3 with 3D transitions the plugin detects them and degrades gracefully to a simple transition maintaining the rich user experience for everyone. The plugin is powered by jQuery and CSS and is designed to be easy to add to an existing web page with the minimal effort on the designer or developer’s part. Connecting with WebSockets (Windows Store apps using JavaScript and HTML) Send and receive data using WebSockets for low-latency, secure, real-time bi-directional network communication using features in the Windows.Networking.Sockets namespace. What are WebSockets? The WebSocket Protocol defines a mechanism for fast, secure two-way communication between a client and a server over the web.

Nikebetterworld Parallax Effect Demo A couple of months ago, I created a jQuery Vertical Parallax Demo that manipulated CSS to make multiple backgrounds move at different speeds relative to the users movement of the scroll bar. This type of effect is slowly appearing across various websites on the web, achieved using many different techniques. Nikebetterworld took the idea to a new level. In today’s tutorial, we’re going to take the original jQuery Parallax script I wrote and recreate a webpage similar to Nikebetterworld. If you’d like to see what we’ll be creating, go check out the demo or download the files.

Essential jQuery Plugin Patterns - Smashing Coding Advertisement I occasionally write about implementing design patterns1 in JavaScript. They’re an excellent way of building upon proven approaches to solving common development problems, and I think there’s a lot of benefit to using them. jQuery plugin: Autocomplete Note (2010-06-23): This plugin is deprecated and not developed anymore. Its successor is part of jQuery UI, and this migration guide explains how to get from this plugin to the new one. This page will remain as it is for reference, but won’t be updated anymore. If you’re still using the plugin and can’t upgrade to jQuery UI autocomplete: Someone else is maintaining a GitHub repository with the plugin, including some fixes. There’s also an update to the original version of the standalone plugin in a Google Code project.

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. We will be using the jQuery Easing Plugin and just a few lines of jQuery. So, let’s start! The Markup The markup for our example […] Detecting And Controlling Touch Events On Web Pages There are legions of faceless hardware and software developers who are owed a debt of gratitude for accomplishing what appears, at first glance, to be a simple transition: equating mouse interactions to touch controls. The fact that that this transition works so seamlessly is little short of a miracle, allowing interaction models like CSS 3D Origami to respond equally well to fingertip touches or a moving cursor, with no extra coding required. However, developers cannot cover every eventuality.

Coin Slider: Image Slider with Unique Effects « Workshop After jqFancyTransitions I decided to release new jQuery image slider plugin with more unique transitions effects. I have ideas for new effects and after I didn’t find that somebody already implement that I create Coin Slider. Thanks to you and your comments Coin Slider have lot of features that jqFancyTransitions didn’t have at the beginning.