background preloader

Scripts

Facebook Twitter

GMaps

jCart - Free PHP/Ajax shopping cart downloaded over 77,000 times. HTML5 Drag and Drop File Upload with Canvas. HTML5 Drag and Drop File Upload with Canvas Over the last week I’ve been trying to learn about HTML5 Drag and Drop (DnD) File Upload using Drag and Drop API combined with HTML5 File API.

HTML5 Drag and Drop File Upload with Canvas

Drag and Drop API enables browsers to receive local files from user desktop just by ‘drag‘ and then ‘drop‘. While HTML5 File API enables JavaScript to interact with selected local files before upload to the server. With both of them, we can build a drag and drop file upload interface. I’ve created an example of HTML5 drag and drop file upload with the capabilities to resize, crop or reformat/filter the uploaded image through HTML5 canvas before sending to the server. You could check out the working demo through the link up there.

This working demo only works in browsers that support HTML5 File API as well as Drag and Drop API. The HTML Markup The demo consists of two major parts, an area for drag and drop as well as the upload preview part. Events Binding The FileReader Object. jQuery Plugin Registry.

Jquery

Pinbox. Features: It is easy to handle with and to use.

Pinbox

It automatically handles the different height of the boxes and layouts them appropriately. its fast It also works with endless scrolling. Simple Demo Advanced Demonstration. Textarea avec compteur + limitation de caracteres [ Scripts des membres. Script posté par : setubal - (Site : Portugal-Tchat.com:)Vous aussi, postez vos scripts en cliquant ici.

Textarea avec compteur + limitation de caracteres [ Scripts des membres

Description Voici un petit compteur de charactères qui décompte les charactères restant dans un champ de formulaire. Le départ est fixé à 250 charactères. Chaque charactères tapé le compteur baisse .. 249, 248 ,etc ... jusqu'à 0. Pinbox – Pinterest Style Boxes jQuery Plugin. Pinbox – Pinterest Style Boxes jQuery Plugin. Masonry. Install A packaged source file includes everything you need to use Masonry.

Masonry

Bower If you are familiar with the command line and build processes, Masonry can be installed with Bower. Masonry is built on dependencies. Bower takes care of these. bower install masonry Getting started Masonry works on a container element with a group of similar child items. Script commentaires - Télécharger des Scripts php commentaires. Most Liked API · Livefyre/livefyre-docs Wiki. "What are the most liked Contents in a Collection?

Most Liked API · Livefyre/livefyre-docs Wiki

" This API returns the 25 pieces of Content in a Collection that have the most likes. Collections can be addressed by Site ID and Article ID or by Collection ID. Content must have at least one like to be returned. Simple Multiple Files Uploader with Progress Tracking. In this example, the Uploader is used to send multiple images or videos to the server and monitor their upload progress with individual counters.

Simple Multiple Files Uploader with Progress Tracking

Please note: This example will not work when run from a local filesystem because of security restrictions in the transport protocols used. If you’d like to run this example locally, set up a local web server and launch it from there. Also note: You will need compile and host your own flashuploader.swf file to enable Flash mode which is needed for IE <= 9. Necessary source files are available in the yui3-swfs repository. Also note: The uploader is not supported on iOS devices (iPhone and iPad), because they lack file upload capability. Also note: The backend script used in these examples does not store any information it receives. Simple Multiple Files Uploader with Progress Tracking. Editor Events. Interact with the Editor instance below (click, type) and watch the console.

Editor Events

Working with EditorBase EditorBase is not a fully functional Editor, it is simply the base utility that will be used under the hood to create an Editor. Creating the Editor In this step we are going to do the initial render of the Editor, set its content and focus it when it's ready. Full Example Source. Widget with simple Resize Plugin. This example shows the simple use case where we make an overlay resizable.

Widget with simple Resize Plugin

Search Results. An application using the Flickr API to display images with a paginator control to step through the results.

Search Results

This is a hefty example that may include some modules you are not familiar with, such as Y.Model, Y.View, and Y.JSONP. These modules are covered in detail on their respective pages. Setting Up the Interface First we need to construct the HTML for the table and controls. Our Flickr Search application will have four main parts: A form to submit and request new images Our paginator with navigation controls and direct page number options Our pages that display the images A Y.View that will maintain our application state Our form is included in the markup, so we will just bind to the submit event in our application (more on this later). Tables. An HTML table containing 50 states and their population with an attached paginator to view the information in small sections.

Tables

Setting Up the Interface First we need to construct the HTML for the table and controls. <table><caption> 2010 US Population <em>(according to <a href=" target="_blank">census.gov</a>)</em></caption><thead><tr><th></th><th>State</th><th>Abbr</th><th>Population</th></tr></thead><tbody></tbody></table><div class="controls"><ul><li class="control-first"><a class="control" data-type="first">First</a></li><li class="control-prev"><a class="control" data-type="prev">Prev</a></li><li class="control-next"><a class="control" data-type="next">Next</a></li><li class="control-last"><a class="control" data-type="last">Last</a></li></ul><div class="currentPage"></div><div class="rowsPerPage"> Items Per Page: <select class="perPage"><option value="10">10</option><option value="20">20</option><option value="-1">Show All</option></select></div></div> JavaScript Defining our variables.

HSL Harmony. Use the HSL color picker to create harmony colors. Complementary: Split Complementary: Analogous: Triad: Square: Tetrad: Monochromatic: Similar: Setting Up the HSL Picker UI This example takes advantage of the dial and slider widgets. We will use the dial widget to represent and select the hue from the 360 degree color wheel. Next we will use two sliders to select the saturation and luminance. HSL Color Picker. Use the HSL color picker to select a new color. Then chose the color type you like best. RGB Slider. Use three sliders to control RGB values and update Hex and HSL strings. Hex: rgb(8, 144, 38) hsl(133, 89%, 30%) Setting Up the Sliders First we need to construct the HTML for the UI. Using the End Event. This demonstrates how to use the end event. Click the X in the header to fade out the element and remove it from the document once the fade completes.

This is placeholder text used to demonstrate how the above animation affects subsequent content. Reversing an Animation. This demonstrates how to use the reverse attribute to change the behavior of the animation. Click the icon in the header to toggle the element's height. This is placeholder text used to demonstrate how the above animation affects subsequent content. Setting up the HTML First we add some HTML to animate. Jquery déroulement horizontal au scroll. Lazy Load Plugin for jQuery. Lazy Load is delays loading of images in long web pages. Images outside of viewport are not loaded until user scrolls to them. This is opposite of image preloading. Using Lazy Load on long web pages will make the page load faster. In some cases it can also help to reduce server load.

Plugin is inspired by YUI ImageLoader Utility by Matt Mlinac. For those in hurry there are several demo pages: basic options, with fadein effect, noscript fallback, horizontal scrolling, horizontal scrolling inside container, vertical scrolling inside container, page with gazillion images, load images using timeout and load images using AJAX(H). When checking the demos clear browser cache between each request. Comment faire un « infinite scroll » en jQuery. [E-mail] Envoyer un e-mail en PHP.