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: draganddrop1_inline.inc 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();}

Drag Drop Javascript Library for iPad & iPhone In large part, the iPad's magic comes from its touch-based interface. Touch-based interfaces are generally "incompatible" with those made for a mouse and web technologies are still beginning to explore this new medium. We hope to shed a speck of light on this problem by distributing a free javascript class we developed for gotProject, enabling any website to add draggables and droppables for an iPad or iPhone. To see the full potential of this library, grab an iPad, create an account on gotProject, and play around with the amazing interface. It's the first web clipper & information manager for the iPad with a drag drop interface! If you'd like to use the library for your site, simply download it using the green link above. Draggables are divs that can be moved around the screen using your fingers. Syntax //To make an element draggablevar D = new webkit_draggable('id_of_element', {options}); //To stop an element from being draggable D.destroy(); Options Examples Drop A Draggable on Me

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 area..gallery 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

Native HTML5 Drag and Drop Introduction For years, we've been using libraries like JQuery and Dojo to simplify complex UI elements like animations, rounded corners, and drag and drop. There's no doubt, eye-candy is important for making rich, immersive experiences on the web. But why should a library be required for common tasks that all developers are using? Drag and drop (DnD) is a first class citizen in HTML5! Feature Detection Many apps that utilize DnD would have a poor experience without it. If you need to rely on an API, always use feature detection rather than sniffing the browser's User-Agent. if (Modernizr.draganddrop) { // Browser supports HTML5 DnD. } else { // Fallback to a library solution. } Creating draggable content Making an object draggable is simple. As an example, let's start creating rearrangeable columns. It's worth noting that in most browsers, text selections, img elements, and anchor elements with an href attribute are draggable by default. Result (draggable but won't do anything): 1. Result:

Blog do Márcio d'Ávila

Related: