background preloader

HTML5 File Uploads with jQuery

HTML5 File Uploads with jQuery
Martin Angelov Today we will be developing a small web application called Upload Center, that will allow people to upload photos from their computers by dragging and dropping them onto the browser window, possible with the new HTML5 APIs exposed by modern browsers. The photos will have a preview and a progress bar, all of which controlled on the client side. Currently, the photos are only stored in a folder on the server, but you could improve it any way you like. What are HTML5 File Uploads? Uploading files using HTML5 is actually a combination of three technologies – the new File Reader API, the also new Drag & Drop API, and the good ol’ AJAX (with the addition of binary data transfer). The user drops one or more files from their file system to the browser window by dragging. Sounds complicated? Currently file uploads work only in Firefox and Chrome, but upcoming major versions of the other browsers also include support for it. So lets get started! The HTML index.html <! The jQuery Code Related:  HTML5

Cómo pensar y crear un slider en jQuery Hola amigos, voy a intentar explicar lo mejor que pueda y razonando todas las partes (y ni que decir tiene que desde mis conocimientos que no lucen por ser completos precisamente), cómo crear un slider en jQuery que sea capaz de generar varios sliders en pantalla y que todos funcionen de manera independiente. También intentaré razonar la estructuración inicial, el por qué de los cálculos y demás...No puedo prometer ni prometo, que el slider no se pueda hacer mejor ni más completo que como yo lo planteo en este tutorial (pues es obvio que sí se puede), por lo que si sabes cómo mejorarlo y estás dispuesto a compartirlo con los demás, estaría encantado de recibir tus consejos. Y si son factibles y no son una chapuza, como muchas de las que se me ocurren a mí, los incluiré encantado nombrándote en el tuto e indicando tu aportación.Empecemos por ver qué es lo que queremos conseguir y cómo estructurarlo: 1. Vamos a visualizar cualquiera de los 2 sliders que encontraréis aquí. 2. Código : 3.

HTML5 File Drag & Drop Dragging and dropping files from your desktop to a browser is one of the ultimate goals for web application integration. This is the first in a four-part series of posts which describes how to: enable file dragging and dropping onto a web page elementanalyze dropped files in JavaScriptload and parse files on the clientasynchronously upload files to the server using XMLHttpRequest2show a graphical progress bar while the upload occursuse progressive enhancement to ensure your file upload form works in any browser (good news for all you IE6 fans!)code it in plain ol’ JavaScript without a library. Phew. Big, Bad Browser Support Before we begin, this tutorial refers to several cutting-edge HTML5 techniques so expect support to be patchy. Finally, note that my code shows the fundamental concepts. The HTML and CSS Here’s our standard form with a file input type. We’ll be uploading files to a server running PHP but the code is much the same no matter what technology you’re using. The File API

Native Fullscreen JavaScript API (plus jQuery plugin) HTML5 <video> is great, but when it was first released, one of the big complaints was that it couldn’t do true FullScreen like Flash. Thankfully, this is changing and native FullScreen support is coming to most browsers in the next few months (no word from the Internet Explorer team Update on IE below #5)) The API is still heavily in flux especially since the W3C joined in this week. Simple Demo Video Demo A Brief History of the FullScreen API The first native FullScreen implementation appeared in Safari 5.0 (and iOS) added a a webkitEnterFullScreen() function that only worked on <video> tags using Safari’s video controls (see Apple’s HTML5VideoElement).For Safari 5.1, Apple changed the API to be more inline with Mozilla’s FullScreen API proposal (which actually predates Apple’s implementation). Understanding the FullScreen API Here are the most important parts of the FullScreen API with notes on how things differ among browsers. 1. 2. 3. 4. 5. Putting it All Together Simple Demo Video Demo

PHPExcel Timeline Portfolio Timeline is a jQuery plugin specialized in showing a chronological series of events. You can embed all kinds of media including tweets, videos and maps, and associate them with a date. With some design tweaks, this will make it perfect for a portfolio in which you showcase your work and interests. The HTML Timeline comes with a light colored theme by default. First, let's look at the basic layout of the page: index.html <! In the head section, we have the plugin's stylesheet - timeline.css, and styles.css, which will hold our customizations. When we call the plugin, it will search for a div on your page with the ID of timeline. <div class="container main" id="timeline"><div class="feature slider" style="overflow-y: hidden;"><div class="slider-container-mask slider-container slider-item-container"><! As we will be modifying the CSS of the timeline, the fragment above will give you a better idea of the customizations. The jQuery The init method takes single argument - the data source. The CSS

20 of Best jQuery And CSS3 Tutorials Hello, welcome back again after this long absence. A lot of things happened this days like the new logo for HTML5 really in my opinion, is not great for this reduction. Whatever, I back with useful and good tutorials one of them talking about jQuery and CSS3. I put between your hands a big and best collection of jQuery and CSS3 tutorials . Let’s stop talking and start. Create an Audio Player in HTML5 & CSS3 jSlickmenu: A jQuery plugin for slick CSS3 menus The plugin called jSlickmenu, creates, well, slick menus with jQuery. A fancy Apple.com-style search suggestion in this tutorial you can make a search bar like the search bar in Apple website … it’s really helpful advantage for your site .. CSS3 Animated Bubble Buttons: With this tutorial, you can easily turn any link on your page into an animated button by just assigning a class name. Create CSS3 Pricing Tables Create Depth And Nice 3D Ribbons Only Using CSS3 CSS3 Navigation Menu with Notification Badges Apple Navigation with CSS3 Slide Thumbs

HTML5-CSS3.fr - Tutoriels, exemples et d?mos HTML5 et CSS3 Trouver son code couleur HTML ! Les couleurs avec du CSS sont les mêmes que celles avec un code HTML. Pour faire référence à d'autres couleurs, vous devrez utiliser le code hexadécimal. Vous pouvez choisir votre couleur en cliquant ici : <-- Cliquer ici Il existe des couleurs nommées normalisées : Les 16 couleurs de fondamentales ont un nom parlant (en anglais) normalisé : elles sont reconnus par tous les navigateurs : Il est possible d'avoir l'ensemble des couleurs de l'arc en ciel :) avec une sa valeur hexadecimal : Couleur HTML et CSS En CSS, est bien pratique de mettre en forme un contenu et le définir une seule fois dans sa feuille de style. color: Gestion de la couleur du texte letter-spacing: Espace entre les lettres text-align: Alignement d'un texte text-decoration: Habiblement d'un texte A savoir : Dans ce chapitre, la notion d'héritage est appliquée. Couleur d'un texte ou une phrase en CSS Espace entre les lettres Alignement d'un texte Ce texte est aligner à gauche.

Diapo | a free jQuery slideshow Hi there. First of all excuse me for my bad english, second excuse me if you will find some bugs in Diapo slideshow. Diapo slideshow is an open source project. You can suggest changes or improvements if you want. You can download it and use for free, you can also include it in your projects and sell it as part of a bigger work (in this case please consider a donation). Diapo slideshow is tested on new browsers, but I tried to make it compatible with the old versions of Internet Explorer too (8 and 7). Diapo slideshow requires jQuery 1.4+ and other jQuery plugins are necessary if you want to use some functionalities: jQuery Easing ( jQuery HoverIntent ( jQuery Mobile ( but not all the plugins). Diapo slideshow is the first jQuery plugin I develop from scratch and I distribute for free, so please be lenient

BlocksIt.js - Dynamic Grid Layout jQuery Plugin Look Inside BlocksIt.js is a jQuery plugin for creating dynamic grid layout. It manages to convert HTML elements into ‘blocks‘ and position them in well-arranged grid layout like Pinterest, one of the hottest website nowadays =). How? Well, simply specific the number of columns you wish to have and BlocksIt.js will do the rest for you. How It Works BlocksIt.js will re-position the selected elements using CSS absolute position property. Start the new block from left to right, andPlace the new block under shortest block. How to use 1. It should works well with jQuery 1.7.1 (haven’t tested for lower version). 2.) 3.) #Note: If the blocks contains of <img> element, be sure to specific the images’ height before calling .BlocksIt()function, else you have to make sure the images are loaded.You could use $(window).load() to make sure everything have loaded into DOM, or use some plugin like waitForImages to check the images status. Configuration .BlocksIt( [Options] ) Options Few options available:

TagCanvas - an HTML5 Canvas Tag Cloud Skip to: TagCanvas is a Javascript class which will draw and animate a HTML5 canvas based tag cloud. I'm releasing it as open source under the LGPL v3 license. Below is an example. Since the canvas is part of the HTML page, you can position things above or below it. Cloud shape: You clicked on: …nothing yet! For the example above, I've replaced all the links with onclick handlers so that you won't end up on a different page when you click on any of the tags. TagCanvas in Internet Explorer The canvas element is not supported by Internet Explorer versions up to and including version 8. At the time of writing you must use the latest trunk version of ExplorerCanvas, as the current version in the project downloads area does not have the required text output support. Note again: the fading of image tags with distance does not work with the current version of Explorer Canvas. Internet Explorer 9 does support the canvas element, so excanvas.js is not required. Images Accelerometer / motion sensor Help!

Accueil par Développeur front-end : intégration HTML5 et CSS3 de sites Internet 10/02/2012 - 15:32:29 jQuery Timelinr Dando vida al tiempo / Giving life to time Selecciona tu idioma / Select your language: This simple plugin helps you to give more life to the boring timelines. Last stable version: 0.9.6 Configuration: Include the jQuery library and this plugin: Inicialize-it with the default parameters: $(function(){ $().timelinr();}); Or configure it as preferred: HTML markup must be as follows: <div id="timeline"><ul id="dates"><li><a href="#">date1</a></li><li><a href="#">date2</a></li></ul><ul id="issues"><li id="date1"><p>Lorem ipsum. Icon designed by Sebastián Cortés Changelog: 0.9.6: check if required elements exist on page before initializing timelinr0.9.54: Bugfix: large timelines now gets centered.0.9.53: Bugfix: arrows hidden when jumping from first and last dates resolved.0.9.52: Problem with arrows nav and 2 or less issues now fixed.0.9.51: As requested, now prev/next buttons are hidden if the issue is in the first/last position. Última versión estable: 0.9.6 Configuración: O customízalos: Cambios:

Related: