jQuery.ScrollTo 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.
miketucker/svg-verlet.js 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. Data is transferred immediately over a full-duplex single socket connection, allowing messages to be sent and received from both endpoints in real time. WebSockets are ideal for use in Windows Runtime apps that include real-time gaming, instant social network notifications, up-to-date displays of stock or weather information, and other apps requiring secure and fast data transfer. To establish a WebSocket connection, a specific, HTTP-based handshake is exchanged between the client and the server. Important A client cannot use WebSockets to transfer data unless the server also uses the WebSocket protocol. Using WebSockets with network isolation Developer audience In this section
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. But while well-known JavaScript patterns are useful, another side of development could benefit from its own set of design patterns: jQuery plugins. The official jQuery plugin authoring guide2 offers a great starting point for getting into writing plugins and widgets, but let’s take it further. Plugin development has evolved over the past few years. Some developers may wish to use the jQuery UI widget factory3; it’s great for complex, flexible UI components. I began to think about plugin patterns after noticing a number of efforts to create a one-size-fits-all jQuery plugin boilerplate. Let’s assume that you’ve tried your hand at writing your own jQuery plugins at some point and you’re comfortable putting together something that works. Patterns And so on.
Animatable: One property, two values, endless possiblities box-shadow From: 0 0 black To: 0 150px 10px -50px rgba(0,0,0,.5) Author: @leaverou BinaryJS - Realtime binary streaming for the web using websockets jVectorMap 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. Inevitably there are situations where a CSS :hover does not translate to touch in the way that you expect or want. In those cases, you will either have to reconsider the interaction model, or code the UI to make it touch-appropriate. Covering The Basics In the current deluge of mobile devices, screen width does not indicate that a device has touch capabilities. Ensure that UI “hit areas” are at least 50px × 50px in size. Determining If A Device Has Touchability function is_touch_device() { return !!
jQuery.fracs · larsjung.de To use the core lib just include jquery.fracs-0.12.0.js. The outline feature can be found in jquery.outline-0.12.0.js and depends on the core lib (you'll need to include both files). Fractions To retrieve the fractions of an element use: var fracs = $(selector).fracs(); this will return an object of type Fractions. Or bind a callback function: function callback(fracs: Fractions, previousFracs: Fractions) { ... // context variable *this* will be the corresponding HTMLElement ...}; $(selector).fracs(callback); The callback function will be called whenever fracs and previousFracs are unequal. $(selector).fracs('check'); Outline Add a canvas to your document (use a fixed position to keep it in viewport)