Today we’re going to be creating a file uploader using HTML5 drag and drop, along with the file reader API and some PHP. We’ll also be using local storage to remember which files were uploaded by the user.
Best jQuery Web Plugins & Tutorials with Demo
How to add Floating share box to your website with jQuery
After spending couple of hours searching for floating share box plugin for WordPress, I finally decided not to use plugins. Those plugins were not good enough to produce what I thought of like menus on Mashable or Hongkiat. Then I came across this article Scroll/Follow Sidebar, Multiple Techniques by Chris Coyier.
In this tutorial, I will use same jQuery code from Chris Coyier’s article and will add some bits and pieces to build a floating share box. Keep in mind this is not a plugin, but can be integrated with static as well as dynamic sites.
Mac OS X Lion with CSS3 & jQuery
I wanted to create with only use of CSS3 the boot, the login page and finally the desktop of the Mac OS X Lion.Booting page is simply the Mac OS X Lion boot. This section is simply composed by a CSS3 keyframes animation.Login section mainly consists of a clock, two images (logos and avatars user name), two backgrounds and a password input field. I used javascript only for the clock, create a fake login and when the password is valid I added some class to fix the desktop section and remove permanently the section login animation.And at last their is a desktop here I use javascript only for the clock and the jQuery UI Draggable library to have a draggable windows.
app-UI : Creating interactive mobile applications in jQuery
app-UI is a collection of user interface components that may be helpful to web and mobile developers for creating interactive applications using HTML and jQuery, especially those targeting mobile devices. app-UI is a continual work in progress – it was born out of the necessity to have rich & native-feeling interfaces in HTML/JS experiences, and it works great with PhoneGap applications (http://www.phonegap.com). app-UI can easily be styled/customized using CSS.
MetroPanel – Navigator for Modern Sites with jQuery,Html5 & Ajax
MetroPanel is new navigator system for modern sites with following features
Features:
- Two Panel Position: left and right
- Unlimited Items
- Unlimited background
- AJAX + HTML5 smart load for SEO
- jQuery + CSS3 Animation Effects
- Auto Show or Auto Hide Panel
- Easy Deploy for Almost Sites
- Many Options for Custom
gridster.js : jQuery plugin for building intuitive draggable layouts
Gridster is a jQuery plugin that makes building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid.
Create a mobile website with jQuery Mobile
jQuery Mobile is a free, open-source, cross-platform, JavaScript library that you can use for developing mobile websites. This library lets you create pages that look and feel like the pages of a native mobile application.
In this article you’ll learn the basic techniques for creating the pages of a mobile website. That will include the use of dialog boxes, buttons, and navigation bars.
Screw : Dynamic Html Content loading jQuery Plugin
Screw, a word I re-coined from scroll + view, is a jQuery plugin which loads HTML as a user scrolls the webpage. Screw will help you save bandwidth by only loading content as it is scrolled into view. Screw can also be used to create continuously scrolling, bottomless pages where content is appended to the bottom as the user scrolls.
jQuery.Screw to load images when the image is in the viewport. Any images which are positioned inside the viewport when the webpage loads are loaded immediately. Images positioned below the viewport are not loaded until each image is scrolled into view. To prevent an image from loading immediately when the webpage loads, you must provide sufficient padding or additional content so the image is not inside the viewport.
Hallo.js : In-Place Rich editor for jQuery UI
Hallo is a very simple in-place rich text editor for web pages. It uses jQuery UI and the HTML5 contentEditable functionality to edit web content.
The widget has been written as a simple and liberally licensed editor. It doesn’t aim to replace popular editors like Aloha, but instead to provide a simpler and more reusable option.The Hallo editor operates as a jQuery UI plugin and has been written in CoffeeScript for the sake of simplicity. CoffeeScript is a beautiful little language that compiles into JavaScript.
Build a parallax scrolling website interface with jQuery and CSS
Parallax scrolling website interfaces have been popping up all over the place recently. I didn’t want to miss out on the fun, so I have put together a parallax scrolling demo built using jQuery and CSS. Parallax scrolling is a 2d animation process that creates an illusion of depth by animating foreground layers faster than background layers. When you observe the landscape from a moving car, objects closer to the car appear to pass you faster than scenery further away. Parallax scrolling uses the same principle to trick the viewer into thinking they are observing a 3d scene.
