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.
Adaptor, an extensible jQuery content slider | Phil Parsons 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. If you are a developer and want to spice things up a bit the plugin exposes a simple API for adding animation effects and extending it’s core functionality with paging controls and feedback indicators. The full developer documentation for the plugin can be found on the Github project pages —the same place you can download the latest version of the code. Setting up the HTML For 3D effects the HTML will need an outer box within which the animated box will rotate—I call this the view port. Including the jQuery
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.
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. View demoDownload source In this tutorial we will create a simple smooth scrolling effect with jQuery. So, let’s start! The Markup The markup for our example page is going to be very plain. The HTML is going to be the same for both examples. The CSS Since we have two examples, we will start with the horizontal page style. The main idea is to make the sections very wide and 100% in height. We need to give the body a valid height, because we want to be able to define the height 100% to the section. The style for the vertical page layout is going to look as follows: Nothing special here, just that we give a big height to the sections. Let’s add the JavaScript The JavaScript The function for the horizontal scrolling effect is the following:
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