background preloader

Draggable Demos

Draggable Demos

ARIA Example: Drag and Drop Tic-Tac-Toe Validate DOM (HTML5) Tic Tac Toe Game Keyboard Shortcuts Tab: Move focus between dragable objects and grid Up Arrow: Move focus up one grid cell Down Arrow: Move focus down one grid cell Left Arrow: Move focus one grid cell to the left Right Arrow: Move focus one grid cell to the right Space: Pick up / Drop game peice ARIA Roles and Properties Roles: role="application" role="grid" role="gridcell" role="alert" role="button" States and properties: aria-labeledby aria-disabled aria-grabbed aria-dropeffect HTML Source Code Show HTML Source Code: Javascript Source Code Show Javascript Source Code: globals.js /** * * The Globale Variables */ var KEY_PAGEUP = 33; var KEY_PAGEDOWN = 34; var KEY_END = 35; var KEY_HOME = 36; var KEY_LEFT = 37; var KEY_UP = 38; var KEY_RIGHT = 39; var KEY_DOWN = 40; var KEY_SPACE = 32; var KEY_TAB = 9; var KEY_BACKSPACE = 8; var KEY_DELETE = 46; var KEY_ENTER = 13; var KEY_INSERT = 45; var KEY_ESCAPE = 27; var KEY_M = 77; return str; }

SlideScreen jQuery Plugin “SlideScreen jQuery Plugin” Documentation by “Paulo Lagoá” v1.0.0 Thank you for purchasing my plugin. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks! A) Introduction - top SlideScreen is a jQuery plugin that creates a "Before and After" effect from two images with just a few lines of code. You can have multiple instances of the plugin working on a single page and it is touch responsive, which means it will work on mobile devices. This help file will help you get started with SlideScreen and have it up and running in no time. B) Files - top SlideScreen comes with one .js and one .css files, so these should be included in your html for you to use SlideScreen. Below is a list of the files needed for the plugin. The Javascript and CSS calls should include these: Although there's not much CSS to change in SlideScreen there's a CSS file included with some properties for the styling of the separator bar.

JavaScript Garden Although JavaScript deals fine with the syntax of two matching curly braces for blocks, it does not support block scope; hence, all that is left in the language is function scope. function test() { // a scope for(var i = 0; i < 10; i++) { // not a scope // count } console.log(i); // 10} There are also no distinct namespaces in JavaScript, which means that everything gets defined in one globally shared namespace. Each time a variable is referenced, JavaScript will traverse upwards through all the scopes until it finds it. The Bane of Global Variables // script Afoo = '42'; // script Bvar foo = '42' The above two scripts do not have the same effect. Again, that is not at all the same effect: not using var can have major implications. // global scopevar foo = 42;function test() { // local scope foo = 21;}test();foo; // 21 Leaving out the var statement inside the function test will override the value of foo. // global scopevar items = [/* some list */];for(var i = 0; i < 10; i++) { subLoop();}

jqDnR :: Drag'n'Resize minimaliste pour jQuery Who? jqDnR Minimalistic Drag'n'Resize for jQuery What? jqDnR is a lightweight plugin for jQuery that lets you drag, drop, and resize elements. Features; Drag + Drop Element Posistioning South East ResizingDefinable Drag and Resize "handles"Translucent Dragging, Preservation of Original Opacity Why? I wrote jqDnR to compliment jqModal elements, allowing drag+resize functionality while remaining true to the plugin's minimalistic architecture. jqDnR provides the all the basic elastic functionality most dialogs will need. If you like jqDnR, please consider a dontation to support its development: When? Current Version: 2007.08.19 +r2 (c) 2007 Brice Burgess under The MIT License Where? Download the Plugin (jqDnR.js - 972 bytes) Download the Dimensions Plugin (dimensions.js) [OPTIONAL] - If detected, the dimensions plugin by Brandon Aaron will be used to alleviate Internet Explorer "jumpiness" with elements that have fixed or percentage based position. How? Examples 1. Javascript 2. 3. Etc.

Blog do Barbi-Carlos Barbieri Create an HTML5 Canvas Tile Swapping Puzzle In this tutorial we will be working with the HTML5 canvas and Javascript to create a dynamic tile swapping game. The result will be a puzzle that works with any given image, and has flexible difficulty levels that are easily adjusted. Here is a quick shot of the puzzle we will be building: Click to play A couple of notes: Cross-browser compatibility: This puzzle was tested and works in all versions of Safari, Firefox, and Chrome that support the canvas element.Mobile: The code provide here works in the above-mentioned desktop browser and is not optimised for mobile. To get started, create a directory for the project. Open a new file using your favorite text editor and save it inside your project directory, next to your image. All we need to do here is create a standard HTML5 template containing one canvas tag with the id of “canvas”. Now start by placing your cursor inside the script tag. Ready? Let’s set up our variables and take a look at each one. Next is a series of variables:

Create your own jQuery Image Slider - CSS-Plus I originally posted this article on 15 September 2010. This is an updated version. This tutorial is for beginners. The method for creating the slider could be done differently, but I feel this way is more simple to understand. Common things that cross my mind before actually jumping into development are: Where are the hidden elements situated? Beneath, on top, next to or behind the visible element? How are they hidden? Is their display set to none? Are they outside of the parent element which is set to overflow: hidden? Are they hidden behind visible element via z-index? All right, enough of that, let’s get started. The HTML Before we create anything, we should try and get an idea of exactly what we are trying to achieve. So let’s turn that into HTML. .gallery-wrap will be the visible is the element that contains the list of images..gallery__controls contains the next and previous controls. The CSS The jQuery/Javascript This is where all the fancy tricks take place. That’s about it!

Chosen - a JavaScript plugin for jQuery and Prototype - makes select boxes better Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly. Downloads Project Source Contribute Standard Select Turns This Into This Multiple Select <optgroup> Support Single Select with Groups Multiple Select with Groups Selected and Disabled Support Chosen automatically highlights selected options and removes disabled options. Single Select Multiple Select Hide Search on Single Select The disable_search_threshold option can be specified to hide the search input on single selects if there are n or fewer options. Default Text Support Chosen automatically sets the default field text ("Choose a country...") by reading the select element's data-placeholder value. Note: on single selects, the first element is assumed to be selected by the browser. No Results Text Support Setting the "No results" search text is as easy as passing an option when you create Chosen: Limit Selected Options in Multiselect You can easily limit how many options the user can select: Right-to-Left Support

10 jQuery Rating Plugins Ratings, Polls, voting are very common these days! We the developers, use our most of time in searching good scripts for rating/polls. Today I have collected 10 jQuery rating scripts and plugins for better user experience for your next project. Have Fun! Related posts: 1. jRating It is a very flexible jQuery plugin for quickly creating an AJAX star rating system. Source 2. jQuery Opineo Plugin Opineo allows you to do all of this and much more without signing up for an account or hire an expert. Source 3. This is a jQuery plugin for star rating systems. Source 4. Build an MSDN-style content rater with ASP.NET, MS AJAX, and jQuery. Source 5. jQuery Star Rating Plugin This is hacked version of star rating created by Ritesh Agrawal It transform a set of radio type input elements to star rating type and remain the radio element name and value, so could be integrated with your form. Source 6. As it stands, this hack creates all of the votes in a separate table. Source Source 8. Source Source Source

Blog do Márcio d'Ávila