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

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.

PHPExcel jQuery UI 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

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

Deploying JavaScript Applications - Alex Sexton Preface: Nothing in this post is necessarily new, or even anything I thought of first (save for a name or two). However, I’m writing it because I’d like to start building some consistency and naming conventions around a few of the techniques that I am using (and are becoming more common), as well as document some processes that I find helpful. Much of this comes from my experience deploying applications at Bazaarvoice as a large third party vendor, and should probably be tailored to your specific environment. Also, I fully understand the irony of loading a few MBs of GIFs in a post largely about performance, but I like them. You You work on a large app. Dev with builds in mind Locally, you might run a static server with some AMD modules, or a “precompile server” in front of some sass and coffeescript, or browserify with commonjs modules. The hope is that you have a way of taking your dev environment files and wrapping them up into concisely built and minified JavaScript and CSS files.

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:

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:

Using Web Workers to Speed-Up Your JavaScript Applications The performance of JavaScript applications running in the browser has increased considerably over the past few years. This is mainly due to continued work on the underlying JavaScript engines (such as V8) that actually execute the code. But as these JavaScript engines get faster, our web applications also demand more. The introduction of JavaScript APIs like the File API has made it possible to write JavaScript applications that are undertaking some serious computational tasks on the client-side. Despite the improvements in JavaScript engines, it is not uncommon for users to encounter frozen user interfaces as the browser works through resource intensive tasks. In this blog post you are going to learn how to build multi-thread JavaScript applications using Web Workers. An Introduction to Web Workers and Threads The JavaScript code that you write will usually execute in a single thread. Web Workers provide a facility for creating new threads for executing your JavaScript code in.

10 Steps to Getting Started with jQuery Mobile jQuery Mobile | 10 Easy Steps to Getting Started! Demo As smartphones and tablets are become popular and can be found all over the place today, the need for mobile page is rises greatly. A mobile web page provides completely different web experience than a normal web page in term of resolution size, web page load time and mobile browsers. However, we can easily create a mobile page with help of jQuery Mobile framework. jQuery Mobile is a touch-optimized web framework for smartphones and tablets built on jQuery core. Also be sure to let me know in the comments if I have missed out on anything. 1. It’s pretty easy to get started with jQuery Mobile. The data- attributes are HTML5 attributes which are used throughout jQuery Mobile to transform the markup into mobile widget. 2. You can create many ‘pages’ within a single HTML document by stacking multiple divs with a data-role of “page”. 3. In some cases, not all content are static and you might need to have some dynamic content. 4. 5. 6. 7.

40+ Useful and Fresh jQuery Plugins Nov 29 2011 Plugins are there to assist you and let you perform the desired action in a more convenient and speedy manner. Therefore, today we decided to come up with an exciting and interesting collection of 40+ fresh and cool jQuery plugins for our reader’s convenience. This compilation is targeted at the designers and developers who want to create amazingly interactive websites that are attractive and accessible to the broadest assortment of browsers. With these plugins, the overall experience that users come away from your sites with will be both thrilling and enjoyable. Keep in mind that navigation, galleries and slideshows, are hot points for a site to shine (or at least for the jQuery in a site to shine). The Plugins MotionCAPTCHA ( Demo | Download ) MotionCAPTCHA is a jQuery CAPTCHA plugin. Smart Validate ( Demo | Download ) It is a jQuery credit card validation plugin that makes credit card format validation an easy chore. ZOOMIFY, EXPLORE YOR IMAGES!

Announcing the jQuery Plugin Registry They say good things come to those who wait, and today we’re happy to end the waiting and unveil the jQuery Plugin Registry. We’ve worked long and hard to put together a brand new site that will serve to reduce the fragmentation and distribution problems that can be obstacles for plugin developers and consumers. We’ve also put an emphasis on remedying a number of the issues that plagued the old jQuery plugins site, especially with respect to workflows for contribution of both plugins and enhancements to the repository itself. jQuery Plugin Registry: plugins.jquery.comSource/Documentation/Issues: Downloading and Using Plugins If you’re looking to just browse and use jQuery plugins in your application or site, not a lot has changed. Registering Your Plugin Users can download your plugin however you’d like them to. That’s it — no uploading files to us, no wading through forms, and no manual updates for new versions. Contributing to the Plugin Registry