background preloader

Native HTML5 Drag and Drop

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: Related:  JavaScript documentation sitesIT & DesarrolloHTML and CSS Tools

JavaScript Developer Center Yahoo! Language centers have been deprecated. If you have any concerns or questions, please don't hesitate to contact us in General Discussion at YDN forum. Do you eat, sleep and breathe JavaScript? This is your source for information for using JavaScript with Yahoo! Yahoo! Yahoo! These Yahoo! Yahoo! Yahoo! Yahoo! Yahoo! Documentation & Articles We've written a whole bunch of stuff to help you get up to speed with our APIs if you use JavaScript. AJAX & XMLHttpRequest HOWTO: Use a Web Proxy for Cross-Domain XMLHttpRequest Calls: Why do you need a web proxy to use XMLHttpRequest? HOWTO: Make Yahoo! How To Build a Maps Mashup: Use the Yahoo! Fixing AJAX: XMLHttpRequest Considered Harmful: Various ways of working around around browser security issues with XMLHttpRequest calls made between domains. JSON (JavaScript Object Notation) Using JSON (JavaScript Object Notation) with Yahoo! Web Services + JSON = Dump Your Proxy: Use the Yahoo! Yahoo! AJAX API Getting Started: Yahoo! Yahoo! Yahoo!

JavaScript’s Apply, Call, and Bind Methods are Essential for JavaScript Professionals Prerequisite: — Understand JavaScript’s “this” With Ease, and Master It. — JavaScript Objects — Understand JavaScript Closures (This is an intermediate to advanced topic) Duration: About 40 minutes. Functions are objects in JavaScript, as you should know by now, if you have read any of the prerequisite articles. And as objects, functions have methods, including the powerful Apply, Call, and Bind methods. On the one hand, Apply and Call are nearly identical and are frequently used in JavaScript for borrowing methods and for setting the this value explicitly. We also use Apply for variable-arity functions; you will learn more about this in a bit. On the other hand, we use Bind for setting the this value in methods and for currying functions. We will discuss every scenario in which we use these three methods in JavaScript. JavaScript’s Bind Method We use the Bind () method primarily to call a function with the this value set explicitly. Let’s continue with the same example we used above.

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

Free Inline WYSIWYG HTML Content Editor NicEdit is a free inline WYSIWYG html content editor created by Brian Kirchoff, that allow you easily editing of web site content on the fly in the browser. NicEdit is extremely lightweight and can be easily integrated in any site with minimal impact while providing visitors an effective means to express themselves in rich text. Demo : : : MIT License About The Author yadirosadi

How to Protect your Graphics Stealing nice graphics and images is a widespread problem. Unscrupulous web site owners will steal your nice graphics and pretend it is theirs. If you paid for some custom graphics and then you find out that other people simply copy them for their own use, you can get frustrated! You can protect your graphics from being stolen by inserting a javascript code in your pages containing your custom-made images. Enough said, here's the code (place it between the HEAD tags, but you will have to copy it from the source code - and this is the weakness): <SCRIPT language="JavaScript"> <! function click(e) { if (document.all) { if (event.button == 2) { alert(sorry); return false; } } if (document.layers) { if (e.which == 3) { alert(sorry); return false; } } } if (document.layers) { document.captureEvents(Event.MOUSEDOWN); } document.onmousedown=click; // --> </SCRIPT> Try to save this image: Tips and Tricks

JavaScript JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat. JavaScript is a prototype-based, multi-paradigm, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles. Read more about JavaScript. This section is dedicated to the JavaScript language itself, and not the parts that are specific to Web pages or other host environments. The standard for JavaScript is ECMAScript. Tutorials Learn how to program in JavaScript with guides and tutorials. For complete beginners Head over to our Learning Area JavaScript topic if you want to learn JavaScript but have no previous experience of JavaScript or programming. JavaScript first steps Answers some fundamental questions such as "what is JavaScript?" JavaScript building blocks

How to recursively search directories by using Visual Basic 2005 or Visual Basic .NET This article demonstrates through code how to recursively search subdirectories for files, starting with a root directory. A search string is specified so that you can search for files that match a certain criteria. Each part of the code is explained as necessary. A working code sample is also provided at the end of the article. Directory recursion is a common IO task for developers. Requirements The following list outlines the recommended hardware, software, network infrastructure, and service packs that you need:Microsoft Visual Studio 2005 or Microsoft Visual Studio .NETMicrosoft provides programming examples for illustration only, without warranty either expressed or implied. Directory recursion The file and directory manipulation classes reside in the System.IO namespace. The following code uses the shared GetDirectories method of the Directory object to return an array of strings. Dim directories() As String = Directory.GetDirectories("C:\") Complete code sample Visual Basic Applies to

User Interface Engineering - Usability Research, Training, and Events - UIE Dive Into HTML5 border-image-slice Summary The border-image-slice CSS property divides the image specified by border-image-source in nine regions: the four corners, the four edges and the middle. It does this by specifying 4 inwards offsets. Four values control the position of the slice lines. If some are not specified, they are inferred from the other with the usual 4-value syntax of CSS. The middle is not used by the border itself but is used as a background-image if the keyword fill is set. The border-image-repeat, border-image-width, border-image-outset properties define how these images will be used. The shorthand CSS property border-image may reset this property to its default value. Syntax border-image-slice: 30%; border-image-slice: 10% 30%; border-image-slice: 30 30% 45; border-image-slice: 7 12 14 5; border-image-slice: 10% fill 7 12; border-image-slice: inherit;border-image-slice: initial;border-image-slice: unset; Values slice Is a <number> or a <percentage> of the offset for the four slicing lines. horizontal top left

View Source...learn to create the web

Related: