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.
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
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. Also, you can even combine the ‘blocks‘ and make a huge block! 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.
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.
jPreLoader | A Loading Screen to preload images & content for website jPreLoader | A Preloading Screen to Preload Images Plugin updated: New version of jPreLoader launched with new features like auto exit, one time preload and some bugs fixed. See change log for more details. Howdy, all! Well, you can also create a Splash Screen during preloading process to introduce your products, or describe about your page, or show the instructions of gameplay as well as put an advertisement during the waiting time of your user. jPreLoader works well with jQuery 1.7.1 (others haven’t tested yet) and compatible with IE7 and above, Chrome, Firefox and Safari. This idea is inspired by Gaya’s cool “QueryLoader2” plugin which able to preload your website in style. The beautiful images used in demo is from Mike Shaw, a Cheshire UK based photographer. Features: How to use: 1. #Tips: Be sure to have jQuery script included first. 2. 3. 4. 5. Configuration: .jPreLoader( [Options] [, callback] ) Options: An array to configure the properties of jPreLoader. License: Change Log Archive:
Autocomplete Migration Guide The jQuery Autocomplete plugin got a successor recently, the jQuery UI Autocomplete. In this guide we'll look at the old plugin API step-by-step, and how to migrate to the new API. At first it may look like the new plugin supports barely any of the old options. The old plugin had two arguments: data or url, and options. So, with the old plugin you'd have this code: JavaScript: $("input").autocomplete(["a", "b", "c"]); And that becomes, easy enough: The same applies if you provided a URL as the first argument, although there is a difference between the two plugins for remote data. Instead of an array of strings, the widget also accepts an array of objects, with at least a label or value property, or both, in addition to whatever else you need. Lets look through the rest of the options for the old plugin, and what to do with them for the new plugin: And thats about it.
jQuery.my plugin