A Step-by-Step Tutorial of Building a Simple Peer-to-Peer WebSocket App – Part 1 | The Zinger This tutorial series walks you through the simple steps of building an HTML5 WebSocket app, demonstrating the power of the publish/subscribe development pattern directly in JavaScript. Our sample is almost as simple as a Chat app, the “Hello World” app of the WebSocket world, but is a tad more visual and dynamic. After trying out the completed application, you can either jump in the code and play with it right away, or move on to Part 2 of this tutorial for a step-by-step guide. About the Environment This tutorial requires a WebSocket server. Getting Started Firstly, to understand how the tutorial environment in JSFiddle works, open up the completed demo in JSFiddle. Note: The sample code uses an HTML5 element, <input type=”range”> that is unfortunately not supported by every browser. JSFiddle provides a simple, integrated environment to edit the source of your web pages and apps. In the bottom right pane, you can interact with the completed app. Modify the name of the topic. Like this:
Wiggle plugin First you need to include the jQuery library, since Wiggle is a plugin. You can download it from the jQuery website or link it directly from the Google CDN. Secondly, you need to include the jQuery Wiggle javascript file into your page. You can do it by adding the code below to your page. Next, you create the image tag that you want to apply wiggle on. As the last step, you trigger the Wiggle function on the element you just created. $(document).ready(function(){ $('.wiggle').wiggle(); Options - an Array object which outlines the cycle of rotation for a wiggle increment. - allows you to specify, in milliseconds, the delay between switching from one rotation degree to the next (see degrees). - allows you to specify the maximum number of wiggles. - a boolean value which tells the plugin to start wiggling all matched elements at the same degree or a random one. - an event that is fired off with the end of each wiggle. - an event that is fired off when the wiggling effect first starts. Methods
Skill Level Indicator by apovtx Welcome to Skill Level Indicator's GitHub Page. Skill Level Indicator is a javascript function that helps you create nice and highly customizable rounded skill indicators. It's usage is very simple. It only requires a browser that supports the html5 canvas element. See it in action: Usage After including the script in your page you only have to just call it with 1 mandatory argument and some optional changes you may want. To include it in your page you just need to have: and to create a skill indicator: And that's all! Options You can customize the output with many different options: ToDo There are many things that are in the ToDo list! Create the canvas element automatically (will be in JQuery plugin version)Change the font-family of the textFallback for browsers that don't support canvasCalculate the text size depending on the radius and name length (done)
blur.js JavaScript reference JavaScript is a scripting language primarily used in Web applications. It allows authors to create dynamic HTML (DHTML) pages. The JavaScript language has three components: Core JavaScript is the base part of the JavaScript language that is supported on both the client and server side. Dottoro provides you a complete standard and browser specific Core and Client-side JavaScript reference with detailed descriptions, syntax, examples, browser support information, cross-browser solutions and much more. JavaScript is primarily used for event handling, form validation, DOM and style manipulation, browser detection, animation and more. Unfortunately, client side scripting has a drawback; sometimes different browsers support different language elements. Contents: External links:
Collection of jQuery Drag and Drop Plugins Everything related to web development has been made very easy and quick now days – thanks to jQuery. It allows us to perform many difficult tasks only with a few lines of code and the good news is that it is becoming more sophisticated day by day. One of the biggest reasons of the ease of use of jQuery is the plethora of plugins present out there, and their number is constantly growing. Creating lightweight, sleek and user friendly interfaces easily is now possible. For a good user interface, it is a must that its user events such as fx. user dragging etc should be perfect. So in order to help you create some awesome stuff, today we have an Amazing Collection of 25 jQuery Drag And Drop Plugins. You May Like This Responsive jQuery Slider Plugins, jQuery Carousel Plugins, jQuery Parallax and Scrolling Effect Plugins, Zoom Effects with jQuery Plugins, jQuery Visual Effects Tutorials, Awesome jQuery Plugins and jQuery Tools/Tricks jquery.event.drag Advertisement Resizable Jquery Iviewer MapBox
JavaScript Fundamentals: Variables I have never heard of a language that doesn't use variables, and JavaScript is definitely not an exception to that. Variables are handled differently in each language and to become a true JavaScript expert you'll need to understand how JavaScript handles variables too. For the most part it's very straightforward, but there are plenty of "gotchas" you'll want to be aware of. Declaring a Variable The first thing that you'll probably want to know about JavaScript variables is that they are loosely typed. You don't need to set the type of a variable when you declare the variable.You can change the value of a variable to a different type at any time. Instead of saying what type of variable it will be, you simply use the var keyword when you declare a variable. In the first line where variableName was declared without a value, it will be undefined. You can also declare multiple variables with a single var keyword simply by separating the variable names and assignments with a comma: Scope Joe Zim
Archive | jQuery Sticky Alerts: A tiny sticky alert bar plugin Sticky Alerts is a tiny jQuery plugin (only 36 lines of JavaScript!) for adding sticky alert bar to your website. Touchy: A highly-configurable jQuery touch library Touchy is a highly-configurable jQuery library for touch interactions. Amelia Basic Font from Tipotype (12 different styles) - only $12! Amelia Basic is a fantastic font family from Tipotype that mixes the geometric side of a sans font with the softness of humanistic strokes. MixItUp: Animated filtering and sorting MixItUp is a jQuery plugin that provides animated filtering and sorting of your data. RowGrid.js: Place items in straight rows RowGrid.js is a jQuery plugin for placing items in straight rows. jQuery fontIconPicker: Add an icon picker to your admin forms The jQuery fontIconPicker makes it simple to add an icon picker and search function to your administration forms. ImagesLoaded: Detect when images have loaded Durandal: A single page app framework
Google JavaScript Style Guide We follow the C++ formatting rules in spirit, with the following additional clarifications. Curly Braces Because of implicit semicolon insertion, always start your curly braces on the same line as whatever they're opening. For example: if (something) { // ... } else { // ... } Array and Object Initializers Single-line array and object initializers are allowed when they fit on a line: Multiline array initializers and object initializers are indented 2 spaces, with the braces on their own line, just like blocks. Long identifiers or values present problems for aligned initialization lists, so always prefer non-aligned initialization. Not like this: Function Arguments When possible, all function arguments should be listed on the same line. // Four-space, wrap at 80. When the function call is itself indented, you're free to start the 4-space indent relative to the beginning of the original statement or relative to the beginning of the current function call. Passing Anonymous Functions Blank lines