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:

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

Dive Into HTML5 Building McLaren.com – Part 1: HTML | Kenneth's Thoughts I’ve just finished working on McLaren’s new F1 site, for the 2010 season, at Pirata London, for Work Club. I’ll be writing up what we’ve done here in several parts. Sign up for my RSS feed to keep updated. First up, the HTML. You might think this would be a breeze to implement, but actually it threw up several significant issues, which have been tricky. Dymo labels The design for the majority of text areas has a strip of colour behind each row of text. To get this effect, one cannot assign a background colour to the block-level container, as this will just appear as a solid rectangular block. Neat – our dymo-style strips are now placed. We want to add some padding to the start and ends of the lines, as shown here: I tried a variety of options. In fact, there is no way to control padding at wrapped line ends. Asking on the CSS discussion groups pointed me to this item in the spec: ‘box-decoration-break‘. So, what have I done? 01. 02. if(! 03. var text = $(this).html();

HTML fullscreen apps for the iPad Roman Stumm, 07.05.2010 As developing a product for a tablet computer, the iPad appears. Because it was matching perfectly for our requirements we were trying to get the existing browser application as close to a native iPad app as possible. I want to share my research of special and nearly unknown parameters in HTML and CSS in a series of posts. Menu bars: One part is the usage of the entire screen without address bar or other menu icons. After loading a long web site on the iPhone or iPod Touch the address bar is hidden on top of the page. iPad Vertical layout iPad Horizontal layout iPad iPhone/iPod Touch Vertical layout iPhone Horizontal layout iPhone To get the full screen mode for your application you need three things: a full ajaxified app (multi-page apps don’t work)the meta tag apple-mobile-web-app-capablethe app saved on the home screen The important part for your web app is the code: Another little thing is the small bar on top of the page with the Wifi intensity and battery indicator.

Uniform - Sexy forms with jQuery