How to Drag and Drop in JavaScript JavaScript excels at modifying the DOM of a Web page, but we usually only do simple things with it, such as creating image rollovers, making tabs, etc. This article is going to show you how to create items on your page that you can drag and drop. There are several reasons you might want to encorporate this drag and drop ability into your Web pages. One of the simplest reasons is to reorganize Data. As an example, you might want to have a queue of items that your users can reorganize. Magnific Popup Documentation Here you can find the guide on how to use Magnific Popup. Besides this docs page, you can play with examples on CodePen. If you’ve found any mistake in this site or you know how to improve some part of this documentation - please commit on GitHub. Please ask general questions through Stack Overflow tagged with magnific-popup. If you’re looking for touch-friendly popup just for images, PhotoSwipe might be a better choice.
The CSS Ninja - Web tech, front-end performance & silly ideas With the recent announcement of the File API draft specification being published I’m sure a lot of people were confused as to what it could really do and why it is truly a powerful API. Firefox’s latest alpha release of their 3.6 browser, aka Namoroka, is the first to implement this new draft specification. One of those powerful things we can do with it is create a file uploader where the user can drag & drop multiple files from their desktop straight into the browser avoiding the previous method of using the file input creating the ultimate killer feature that browsers so badly need. The below demo only works in Firefox 3.6 Alpha 1 if you don’t want to install it you can watch the screencast below. Drag & drop it like it’s hot Now I’m sure a few people would have seen this functionality already if they watched the Google Wave presentation where they demonstrated drag and drop file uploading, but they used Google Gears to accomplish this.
Some jQuery Functions And Their JavaScript Equivalents In light of my recent forays into the JavaScript DOM world, I'd decided to do a little research and write a snippet collection based on jQuery functions and their JavaScript equivalents. I think jQuery is a great tool, and it has done great things for me and many others as developers. But I'm a firm believer that nowadays, JavaScript is an indispensable tool to keep in your arsenal. JavaScript Tutorial 10 - Dynamic Form Examples Previous tutorials explained the DOM model and showed how to liven up a site with DHTML. This tutorial emphasizes using forms for interaction and dynamically modifying web pages. You should be familiar with HTML forms (Quick Forms) before starting. Dynamic Form Display Alternate forms can be displayed by using dynamic content.
Parsley - The ultimate documentation Frontend form validation Parsley is a javascript form validation library. It helps you provide your users with feedback on their form submission before sending it to your server. It saves you bandwidth, server load and it saves time for your users. Javascript form validation is not necessary, and if used, it does not replace strong backend server validation.
reveal.js - The HTML Presentation Framework The HTML Presentation Framework Created by Hakim El Hattab and contributors Hello There reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do. Getting Started with the JavaScript Version of the GreenSock Animation Platform (GSAP) « GreenSock The GreenSock Animation Platform (GSAP) animates anything JavaScript can touch (CSS properties, SVG, React, canvas, generic objects, whatever) and solves countless browser inconsistencies, all with blazing speed (up to 20x faster than jQuery). See "Why GSAP?" to learn why it's used by 6,500,000 sites and every major brand. Hang in there through the learning curve and you'll discover how addictive animating with code can be. We promise it's worth your time. Quick links