Scale images to max-width on browser using jQuery

jQuery maxImage plugin will resize and scale targeted images to their max width according to the image ratio, the browser size and some simple options. Change the size of your browser to see it’s effect.

Scale images to max width using jQuery

Scale images to max width using jQuery

Resource: Sample| Tutorial

Crop image using jQuery

The crop plugin takes an IMG element and crops them to the dimensions given. The result is a DIV with a background image with the height and width and an offset. The new DIV should also carry across the existing style attributes of the image.

Crops image to dimensions given. If only width (and height), x and y are selected randomly based on the image’s height and width.

Crop Image using jQuery

Crop Image using jQuery

Resource: Sample | Tutorial

Accessible Slider with Select element using jQuery

This plugin allows jQuery UI Slider plugin to be generated using progressive enhancement. The plugin scrapes the data from a select element and generates a jQuery UI Slider in its place, acting as a proxy to the select element (regardless of whether it is still visible, or hidden from the user). This means you can use the jQuery Slider plugin alongside other input elements in a form and submit or serialize the form as if the slider is not even there. This also allows the slider to work with our without javascript since the select element can be used if the slider is unavailable.

Accessible Slider using jQuery

Accessible Slider using jQuery

Resource: Sample | Tutorial

Expandable box using CSS

In HTML, if you don’t specify a specific width, block-level elements are vertically expandable by their nature. Think of an unordered list. That list will grow be be as big as it needs to be to fit all of it’s list elements. If a user increases the font size in their browser, the list will expand vertically, growing to fit the larger content. Sometimes it feels like vertical-only expansion is limiting and it would be nice if the element could grow horizontally as well as vertically with a font size increase by the user.

Features include:
* Works in all major browsers
* Expands both vertically and horizontally
* Uses a single background image

Expandable box using CSS

Expandable box using CSS

Resource: Sample | Tutorial

Create custom corners using jQuery

Cornerz is a bullet proof curved corners plug-in for jQuery using Canvas/VML. Features inclue
* Anti-aliased curves.
* Fast – no excanvas.
* Support for any size radius and border width with minimal performance increase.

Custom corner using jQuery

Custom corner using jQuery

Resource: Sample | Tutorial

Add Auto-Complete feature to your inputbox using jQuery

Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering. By giving an autocompleted field focus or entering something into it, the plugin starts searching for matching entries and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.

This can be used to enter previous selected values, eg. for tags, to complete an address, eg. enter a city name and get the zip code, or maybe enter email addresses from an addressbook.

Both local and remote data can be used: Local is good for small datasets (like an addressbook with 50 entries), remote is necessary for big datasets, like a database with hundreds or millions of entries to select from.

Auto Complete using jQuery

Auto Complete using jQuery

Resource: Sample | Tutorial

Apple.com style search suggestion using jQuery

Create a fancy apple.com-style search suggestion using jQuery/CSS/PHP. This example makes use of several techniques: MySQL (for the database), HTML/CSS for styling, PHP for retrieving the data and jQuery for the AJAX request.

Apple.com style search suggestion using jQuery

Apple.com style search suggestion using jQuery

Resource: Sample | Tutorial

Resizable Text Area using jQuery

Create a resizable text area on your webpage using this plugin. This plugin removes the ugly scrollbar from textarea & pretty handy in creating a neat UI while allowing users to extend the textarea & paste as much content as required.

Resizable textarea using jQuery

Resizable textarea using jQuery

Resource: Sample | Tutorial

Creating A Draggable Sitemap using jQuery

Create a simple & easy use draggable sitemap using jQuery for your website. This tutorial can be used to understand the basics of implementing a drag/drop feature using jQuery & also to extend it beyond Sitemap & use it in your web applications.

Draggable Sitemap using jQuery

Draggable Sitemap using jQuery

Resource: Sample | Tutorial

Rounded Corner using MooTools

GoodCorners is a tiny Mootools plugin that can apply the CSS3 border-radius to elements using a unified syntax so you can have beautiful rounded corners.

Rounded Corners using MooTools

Rounded Corners using MooTools

Resource: Sample | Tutorial

Get Adobe Flash playerPlugin by wpburn.com wordpress themes