background preloader

JavaScript & JQuery

Facebook Twitter

Grids

Excellent Jcrop manual. Jcrop Home • Download • Manual • Examples This document provides a roadmap for Jcrop implementation.

excellent Jcrop manual

Introduction Jcrop is a powerful image cropping engine for jQuery. It's been designed so developers can easily integrate an advanced image cropping functionality directly into any web-based application without sacrificing power and flexibility (or the weeks of coding, testing and debugging). Jcrop also features clean, well-organized code that works well across most modern web browsers. Lots of jQuery select boxes. jQuery/Ajax upload w/o refreshing page. Are you looking for ajax file/image upload and preview without refreshing page using Jquery.

jQuery/Ajax upload w/o refreshing page

I had implemented this ajax form submitting using jquery.form plugin and used Arun Shekar's image cropping PHP code for uploading images. Just five lines of JavaScript code, Using this you can upload files, image and videos. Download Script Live Demo Javascript Code$("#photoimg").live('change',function(){})- photoimg is the ID name of INPUT FILE tag and $('#imageform').ajaxForm() - imageform is the ID name of FORM. Index.php Contains simple PHP and HTML code. Custom thumbnail for embedded video.

Sliders

Multiple file upload. What this is This jQuery Multiple File Upload Plugin ($.MultiFile) is a non-obstrusive plugin for jQuery that helps users easily select multiple files for upload quickly and easily on your server whilst also providing some basic validation functionality to help developers idenfity simple errors, without having to submit the form (ie.: upload files).

multiple file upload

What this isn't This plugin will not create a dialog that allows the user to select multiple files at once. That simply cannot be done via javascript. If that's what you need, you should consider using HTML5's multiple="multiple" attribute or one of the many other flash based file upload solutions (eg.: SWFupload, uploadify and others) How it works The plugin creates a new file input element every time the user select a file, which allows the user to select a file, then another, then another, then another and so on... selecting as many files is required, one at a time. “Password” hint instead of ******** - works in IE. Advertisement As you know, the user login box of the website contains the following fields username and password. Furthermore, most of them put the “Username” inside user name field and “********” inside password field to save the space within designing.In this post I’ll show you how to show “Password” text in the password field. It doesn’t actually does so but this tips will make it looks like so.

Now, forget about the user name field. Let’s talk about password field. You can view the demo by clicking here. Now let’s look at the code to do this, here is the Html code for this, As you can see above, I’ve to place the two input field inside two separate divs. LavaLamp. Hover above and feel for yourself, the nifty effect of Lava Lamp. What you just experienced is nothing but the LavaLamp menu packaged as a plugin for the amazing jQuery javascript library. I personally believe that the effect rivals that of flash – Don’t you? Especially considering the fact that it is extremely light weight. Just so you know, it weighs just 700 bytes(minified)! Often I have noticed, that the credits are usually granted towards the end.

As User Interface developers, we know that one of the first widgets our visitors use is a “Menu”. I hope you agree that a typical HTML widget consists of 3 distinct components. A semantically correct HTML markupA CSS to skin the markupAn unobstrusive javascript that gives it a purpose Now lets follow the above steps and implement the LavaLamp menu for your site. Step 1: The HTML. Why you should let Google host jQuery. All too often, I find code similar to this when inspecting the source for public websites that use jQuery: If you’re doing this on a public facing website, you are doing it wrong.

why you should let Google host jQuery

Instead, I urge you to use the Google Hosted Libraries content delivery network to serve jQuery to your users directly from Google’s network of datacenters. Doing so has several advantages over hosting jQuery on your server(s): decreased latency, increased parallelism, and better caching. In this post, I will expand upon those three benefits of Google’s CDN and show you a couple examples of how you can make use of the service. Just here for the links? Notebook page flip. Everyday jQuery is getting more and more popular because of it’s usefulness, flexibility and speed.

notebook page flip

This notebook animation style like “flash page layout” page flip animation is an excellent example of these competencies. This fancy jQuery Notebook skin uses a jQuery animation plugin called jQuery Booklet Plugin. Pro’s of the jQuery Notebook Animation Lightweight (only 17kb minified version)Easy to install with sliding divs for pagesVery smooth page flip animation and life like page effect View Demo How to Install Download the jQuery MoleSkine Notebook PackageAdd the HTML below (add a div with class “b-load” for each page)Edit the CSS styles to suit your needsEdit the Booklet JS options to tweak the page animaton.

Masked Input Plugin. First, include the jQuery and masked input javascript files.

Masked Input Plugin

Next, call the mask function for those items you wish to have masked. Optionally, if you are not satisfied with the underscore ('_') character as a placeholder, you may pass an optional argument to the maskedinput method. Optionally, if you would like to execute a function once the mask has been completed, you can specify that function as an optional argument to the maskedinput method.