jQuery Question: 2012

Tuesday, 3 January 2012

jQuery - TreeView Plugins

If you are looking at treeview control then your can pick any
jsTree is a javascript based, cross browser tree component. It is packaged as a jQuery plugin. jsTree is absolutely free

jQuery Example - Full Screen Background Images

If you are looking for how to Full Screen Background Images then use Backstretch is a simple plugin. It is a simple plugin jQuery plugin that allows you to add a dynamically-resized background image to any page. The image will stretch to fit the page, and will automatically resize as the window size changes.
<script src="js/jquery.js" type="text/javascript"></script> 
<script src="js/jquery.fullscreenr.js" type="text/javascript"></script 
<script type="text/javascript"> 
$.backstretch("http://path.jpg"); 
</script>
<a href="http://srobbin.com/jquery-plugins/jquery-backstretch/#demo" target="_blank">demo</a>.

jquery Example - multiselect plugin

[caption id="attachment_591" align="aligncenter" width="300" caption="jquery-multiselect"]<a href="http://jqueryexample.com/wp-content/uploads/2012/01/jquery-multiselect1.jpg"><img class="size-medium wp-image-591" title="jquery-multiselect" src="http://jqueryexample.com/wp-content/uploads/2012/01/jquery-multiselect1-300x145.jpg" alt="jquery-multiselect" width="300" height="145" /></a>[/caption]

If you are looking for multiselect a combo box then use jQuery UI MultiSelect Widget is pretty good . It is a configurable plugin for jQuery. It converts <select> input with attribute multiple into group of checkboxes with ability to add new values also allows filtering within multiselect. The plugins provides an optional header with check all / uncheck all / close links, Keyboard support and it is only 6kb.

<a href="http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/" target="_blank">Demo</a>

jQuery Example - Change popup div Height based on Browser Size/Resize

In this example I am going to show an example for set a height a of an element according the browser height.
To get browser height we will use $(window).height(); property and we set page elements based on Window size re-size.
<code>$(function(){ 
 $(window).resize(function(){ 
 var winHeight = $(window).height(); 
 var winWidth = $(window).width(); 
 $("#popBox").css('height',(h < 1024 || w < 800) ? 600 : 450); 
 }); 
});</code>

JQuery Example - Ajax Fancy Captcha

[caption id="attachment_570" align="aligncenter" width="300" caption="jquery captcha"]<a href="http://jqueryexample.com/wp-content/uploads/2011/12/fancy-captcha.jpg"><img class="size-medium wp-image-570" title="fancy-captcha" src="http://jqueryexample.com/wp-content/uploads/2011/12/fancy-captcha-300x247.jpg" alt="jquery captcha" width="300" height="247" /></a>[/caption]

Ajax Fancy Captcha that based on the super cool JQuery that helps you protect your web pages from bots and spammers. Captcha’s security level is medium, with the emphasis on nice looking and user friendly qualities while still offering reasonable protection from unwanted “guests”. It has a basic design and its elements are easy to style and customize.

<a href="http://www.webdesignbeach.com/beachbar/ajax-fancy-captcha-jquery-plugin" target="_blank">Demo</a>

jQueryTransform - form styling plugin

jqTransform is a jQuery styling plugin which help you to style the form exactly as you need and transform the entire look and feel of the form.

[caption id="attachment_567" align="aligncenter" width="300" caption="jqtransform-jquery-form"]<a href="http://jqueryexample.com/wp-content/uploads/2011/12/jqtransform-jquery-form.jpg"><img class="size-medium wp-image-567" title="jqtransform-jquery-form" src="http://jqueryexample.com/wp-content/uploads/2011/12/jqtransform-jquery-form-300x222.jpg" alt="jqtransform-jquery-form" width="300" height="222" /></a>[/caption]


<a href="http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/">View the Demo »</a>

jquery 3d carousel

3D Carousel is a powerful jQuery plugin enabling you to create 3D carousel with great features. It can be fully customizable controlled by mouse. jQueryCarousel uses JSON as source data provider.

[caption id="attachment_564" align="aligncenter" width="190" caption="3d carousel jquery"]<a href="http://jqueryexample.com/wp-content/uploads/2011/12/3d-carousel-jquery1.jpg"><img class="size-full wp-image-564" title="3d-carousel-jquery" src="http://jqueryexample.com/wp-content/uploads/2011/12/3d-carousel-jquery1.jpg" alt="3d carousel jquery" width="190" height="120" /></a>[/caption]

<a href="http://jquery-ui.googlecode.com/svn/!svn/bc/3147/branches/labs/index.html" target="_blank">Demo</a>

jQuery UI 1.8 new features

jQuery UI 1.8 just released. The biggest changes are, of course, the new widgets themselves.
<ul>
 <li>Core – the core of jQuery UI, required for all interactions and widgets</li>
 <li>Widget – the widget factory, base for all widgets</li>
 <li>Mouse – the mouse widget, a base class for all interactions and widgets with heavy mouse interaction</li>
 <li>Position – a utility plugin for positioning elements relative to other elements</li>
</ul>
<h3>The Position Utility</h3>
With this, you can position any element relative to any other, or even relative to the parent window or your mouse.
<h3>The Button Widget</h3>
With the button widget you can create a fully theme-able button from any imaginable element you want to use as a native button.Traditionally buttons had an input type of submit, reset, image or button, but progressively developers are creating from elements such as anchor tags. The Button widget makes this an attractive alternative for developers who want new styles to their website.
<h3>The Autocomplete Widget</h3>
This is maybe the most requested feature, which made it into the latest release of jQuery UI – The Autocomplete. The Autocomplete widget makes any text input field pop up a menu to help the user in completing their search or entry, provide suggestions and improvements to search criteria they’re entering.
<ol start="1">
 <li><link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" /></li>
 <li><script type="text/javascript" src="../../jquery-1.5.1.js"></script></li>
 <li><script type="text/javascript" src="../../ui/jquery.ui.core.js"></script></li>
 <li><script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script></li>
 <li><script type="text/javascript" src="../../ui/jquery.ui.position.js"></script></li>
 <li><script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script></li>
</ol>
<ol start="1">
 <li>$("#tags").autocomplete({</li>
 <li> source: languages,</li>
 <li> delay: 3000</li>
 <li>});</li>
</ol>
jQuery UI 1.8 you can download from:
<ul>
 <li>Minimized version: <a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js" target="_blank">http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js</a></li>
 <li>Full Version with comments: <a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.js" target="_blank">http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.js</a></li>
</ul>

jQuery Feature

jQuery is a cross-browser JavaScript library that makes it easy to create astonishing web effect in just a few lines of code.
<ul type="disc">
 <li>DOM element selections: The jQuery using easy to selecting DOM elements and traversing to modifying their content. When you use CSS, easy select element id, class and build events to increase or improve more functionality.</li>
 <li>Compatibility All Dynamic Languages - The jQuery script can be use with all most Dynamic Web Languages like PHP, ASP, JSP, CGI etc.</li>
 <li>Event Handling - The jQuery library is support to creating an your own events. and also provide event model. it is very easy to handle events.</li>
 <li>Ajax Intrectactions - The jQuery help to develop lot of features using in AJAX Technology.</li>
 <li>Well documented</li>
 <li>Easy to use</li>
 <li>Chaining</li>
 <li>easy-to-use Ajax</li>
 <li>Nice event handlers</li>
 <li>CSS selectors</li>
 <li>CSS manipulation</li>
 <li>filtering your selection</li>
 <li>did I mention chaining?</li>
 <li>Small in size</li>
 <li>Nice little built-in effects.</li>
 <li>Extensibility through plug-ins</li>
</ul>

jQuery Example - Slide Out Navigation

A CSS and jQuery tutorial for creating a slide out menu.The items only slide out when the user hovers over the area next to them. This gives a beautiful effect.

<a href="http://tympanus.net/codrops/2009/12/08/beautiful-slide-out-nav...">Demo</a>

jQuery Carousel Plugins

<a title="jCarousel" href="http://sorgalla.com/projects/jcarousel/" rel="external nofollow" target="_blank">jCarousel</a>

jCarousel is a popular jQuery plugin for controlling a list of items in horizontal or vertical order.

 <a title="jCarousel Lite" href="http://www.gmarwaha.com/jquery/jcarousellite/" rel="external nofollow" target="_blank">jCarousel Lite</a>

jCarousel Lite is a jQuery plugin that carries you on a carousel ride filled with images and HTML content. Put simply, you can navigate images and/or HTML in a carousel-style widget. It is super light weight, at about 2 KB in size, yet very flexible and customizable to fit most of our needs.

 <a title="rCarousel" href="http://ryrych.github.com/rcarousel/" rel="external nofollow" target="_blank">rCarousel</a>: rcarousel is a jQuery UI continuous carousel with many cool features. It is highly customizable and supports even older browsers.

 

<a title="Tiny Carousel" href="http://baijs.nl/tinycarousel/" rel="external nofollow" target="_blank">Tiny Carousel</a>

Tiny Carousel is a lightweight jQuery based carousel for sliding html based content. It was built using the javascript jQuery library. Tiny Carousel was designed to be a dynamic lightweight utility that gives webdesigners a powerfull way of enhancing a websites user interface.

 <a title="Step Carousel Viewer " href="http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm" target="_blank">Step Carousel Viewer

</a>

Step Carousel Viewer displays images or even rich HTML by side scrolling them left or right. Users can step to any specific panel on demand, or browse the gallery sequentially by stepping through x number of panels each time. A smooth sliding animation is used to transition between steps. And fear not in taming this script to go exactly where you want it to- two public methods, two custom event handlers, and three “status” variables are here for that purpose. Some highlights of this script:

 <a title="Cloud Carousel" href="http://www.professorcloud.com/mainsite/carousel.htm" rel="external nofollow" target="_blank">Cloud Carousel</a>

Cloud Carousel is a jQuery plugin enabling you to create 3D carousel with features like auto-reflections

 <a title="Infinite Carousel jQuery" href="http://www.catchmyfame.com/2009/08/27/jquery-infinite-carousel-plugin-1-2-released/" rel="external nofollow" target="_blank">Infinite Carousel </a>

Around the beginning of this month I released version 1.0.1 of the Infinite Carousel jQuery plugin. About a week later I received an email asking if I could add the ability for a visitor to jump to a specific image in the carousel. I’d seen this functionality in other carousels (none that run in infinite loops) where small images or some other user interface was displayed that allowed someone to pick an image and go directly to it. At first I thought sure, how hard could it be to enable this? If the current carousel could flow infinitely picture by picture, how difficult could it be to fast forward to a specific image in the sequence? Little did i realize what I was in for.

 <a title="Roundabout" href="http://fredhq.com/projects/roundabout/" rel="external nofollow" target="_blank">Roundabout</a>

Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area.

<a title="WOW Slider" href="http://www.wowslider.com/" rel="external nofollow" target="_blank">WOW Slider</a>

Wow Slider is a free tool for creating awesome jQuery image sliders with fancy templates which are cross-browser compatible. You can create fancy image galleries and slideshows in a few minutes without coding.

 <a title="AnythingSlider" href="http://css-tricks.com/examples/AnythingSlider/" rel="external nofollow" target="_blank">AnythingSlider</a>

AnythingSlider is a full featured slider plugin for jQuery which enables users to create slides from just about anything you can imagine.

 <a title="Slides" href="http://slidesjs.com/" rel="external nofollow" target="_blank">Slides</a>

Slides is a slideshow plugin for jQuery that is built with simplicity in mind. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.
<h3><a onmousedown="return rwt(this,'','','','1','AFQjCNFweeobMSBfu_VyZW_wZ7i9CBZqRw','','0CB4QFjAA')" href="http://www.bkosborne.com/jquery-waterwheel-carousel">jQuery Waterwheel Carousel</a></h3>
Waterwheel Carousel of the jQuery plugin Carousel is that you can use to display images cascading waterfall effect.

jquery example - tab panel

[caption id="attachment_542" align="aligncenter" width="300" caption="jquery tabed panel"]<a href="http://jqueryexample.com/wp-content/uploads/2011/12/jquery-tabed-panel.jpg"><img class="size-medium wp-image-542" title="jquery tabed panel" src="http://jqueryexample.com/wp-content/uploads/2011/12/jquery-tabed-panel-300x142.jpg" alt="jquery tabed panel" width="300" height="142" /></a>[/caption]

Tabbed panels are very useful and one of the most popular way to place a lot of information on a page without losing usability. Here is listed popular JQuery Tabs tutorials and plugins which you can use in your project.
<ul>
 <li><a title="jQuery UI Tabs with Next/Previous" href="http://css-tricks.com/jquery-ui-tabs-with-nextprevious/" rel="external nofollow" target="_blank">Tabs with Next/Previous</a> :
<a title="View Live Demo" href="http://css-tricks.com/examples/TabsNextPrev/" rel="external nofollow" target="_blank">View Live Demo</a></li>
 <li><a title="Create a smooth tabbed menu in jQuery" href="http://yensdesign.com/2008/12/create-a-smooth-tabbed-menu-in-jquery/" rel="external nofollow" target="_blank">Smooth tabbed menu in jQuery</a> :Simple plug-in that allows for a large number of tabs to fit into a small space
<a title="View Live Demo" href="http://yensdesign.com/tutorials/tabs/" rel="external nofollow" target="_blank">View Live Demo</a></li>
 <li><a href="http://nettuts.com/tutorials/html-css-techniques/how-to-create-a-slick-tabbed-content-area/" target="_blank">Slick Tabbed</a>: This script allows you to create a slick tabbed content area using CSS and jQuery.
<a title="View Live Demo" href="http://d2o0t5hpnwv4c1.cloudfront.net/001_Tabbed/site/jQuery.html" rel="external nofollow" target="_blank">View Live Demo</a></li>
 <li> <a title="Simple Tabs w/ CSS & jQuery" href="http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/" rel="external nofollow" target="_blank">Simple Tabs w/ CSS & jQuery</a>: This jQuery plugin supplies an easy way to create tabbed menu with our lovely jQuery library
<a title="View Live Demo" href="http://www.sohtanaka.com/web-design/examples/tabs/" rel="external nofollow" target="_blank">View Live Demo</a></li>
 <li><a title="Sweet AJAX Tabs With jQuery 1.4 & CSS3" href="http://tutorialzine.com/2010/01/sweet-tabs-jquery-ajax-css/" rel="external nofollow" target="_blank">AJAX Tabs: </a>This tabbed panel allows you to squeeze much more content in a seemingly limited space and provide a structured way of accessing it.
<a title="View Live Demo" href="http://demo.tutorialzine.com/2010/01/sweet-tabs-jquery-ajax-css/demo.html" rel="external nofollow" target="_blank">View Live Demo</a></li>
</ul>

jQuery example - feed menus

jquery Example - select an element through matched attribute value

Selects elements that have the specified attribute with a value exactly equal to a certain value.
In an assignment I have a multilevel dynamic combo box. And I have to select an element in which there are not id or class selector .For this I used attribute match selector in jQuery.
Examples:
<code><script>var optionVal = $('option[value="myOption"]').value();</script></code>

jQuery Example - grid plugins

There are so many jQuery grid plugins. Each having different features and capabilities. Below I listed the best jQuery grid plugins which you can use in your projects
<ul>
 <li>Flexigrid: <a href="http://flexigrid.info/" rel="nofollow">http://flexigrid.info/</a> : Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content.</li>
 <li>jQuery Grid: <a href="http://www.trirand.com/blog/" rel="nofollow">http://www.trirand.com/blog/</a> :</li>
 <li>jqGridView: <a href="http://plugins.jquery.com/project/jqGridView" rel="nofollow">http://plugins.jquery.com/project/jqGridView</a> jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web.</li>
 <li>Ingrid: <a href="http://reconstrukt.com/ingrid/" rel="nofollow">http://reconstrukt.com/ingrid/</a> :Ingrid is an unobtrusive jQuery component that adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your tables.</li>
 <li>DataTable : <a href="http://www.datatables.net/index" rel="nofollow">http://www.datatables.net/index</a> : DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.</li>
 <li>Slickgrid : <a href="http://code.google.com/p/slickgrid/" rel="nofollow">http://code.google.com/p/slickgrid/</a></li>
 <li>TableSorter: <a href="http://tablesorter.com/" rel="nofollow">http://tablesorter.com/</a>:tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell.</li>
 <li>dhtmlxGrid: <a href="http://www.dhtmlx.com/docs/products/dhtmlxGrid/" rel="nofollow">http://www.dhtmlx.com/docs/products/dhtmlxGrid/</a></li>
 <li>Sigma Grid: <a href="http://www.sigmawidgets.com/products/sigma_grid2/" rel="nofollow">http://www.sigmawidgets.com/products/sigma_grid2/</a></li>
</ul>

jquery Example -Multiple Checkbox Select/Deselect

In this post I am going to demonstrate how to the check box are checked or unchecked with single check box.

 
<code><SCRIPT language="javascript">
$(function(){

 $("#selectall").click(function () {
 $('.myOption').attr('checked', this.checked);
 });

 $(".case").click(function(){

 if($(".myOption").length == $(".myOption:checked").length) {
 $("#selectall").attr("checked", "checked");
 } else {
 $("#selectall").removeAttr("checked");
 }

 });
});
</SCRIPT>

HTML:

</code>
<pre title=""><input type="checkbox" id="selectall"/></pre>
<pre title=""><input type="checkbox" value="2" class="myOption"></pre>
<pre title=""><input type="checkbox" value="1" class="myOption"></pre>

jQuery Tooltip Plugins Tutorials

In this article I listed Most Desirable Collection Of Tooltip JQuery Scripts. Tooltips are the best way to show additional information on mouse over.
<ul>
 <li><a href="http://craigsworks.com/projects/qtip/">qTip – The jQuery Tooltip Plugin</a>: qTip -is an advanced tooltip plugin of the jQuery framework. It's cross-browser, customizable and packed full of features. It has a very rich featured Tooltip plugin<a title="View Demo" href="http://craigsworks.com/projects/qtip/demos/">View Demo</a></li>
 <li><a href="http://www.lullabot.com/articles/beautytips-09-release">BeautyTips, a jQuery Tooltip Plugin</a> : BeautyTips is a simple-to-usejQueryplugin<a title="View Demo" href="http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html">View Demo</a></li>
 <li><a href="http://jqueryfordesigners.com/coda-popup-bubbles/">Coda Popup Bubbles</a>: is a popular TooltipPlugins for making your site more user friendly and attractive<a title="View Demo" href="http://jqueryfordesigners.com/demo/coda-bubble.html">View Demo</a></li>
 <li>
<h5><a href="http://www.vertigo-project.com/projects/vtip">vTip</a></h5>
<a title="View Demo" href="http://www.vertigo-project.com/files/vTip/example.html">View Demo</a></li>
 <li><a href="http://www.codylindley.com/blogstuff/js/jtip/">jTip – The Jquery Tool Tip</a><a title="View Demo" href="http://www.codylindley.com/blogstuff/js/jtip/">View Demo</a></li>
 <li>
<h5><a href="http://onehackoranother.com/projects/jquery/tipsy/">Tipsy – Facebook-Style Tooltip Plugin for jQuery</a> :Tipsy is a jQuery plugin for creating a Facebook-like tooltips effect based on an anchor tag's title attribute.</h5>
<a title="View Demo" href="http://onehackoranother.com/projects/jquery/tipsy/">View Demo</a></li>
 <li>
<h5><a href="http://rndnext.blogspot.com/2009/02/jquery-ajax-tooltip.html">jQuery Ajax Tooltip</a></h5>
<a title="Source" href="http://rndnext.blogspot.com/2009/02/jquery-ajax-tooltip.html">View Demo</a></li>
 <li><a href="http://www.queness.com/post/309/create-a-digg-style-post-sharing-tool-with-jquery">Digg-Style Post Sharing Tool with jQuery</a><a title="View Demo" href="http://www.queness.com/resources/html/shareit/index.html">View Demo</a></li>
</ul>