Effect Methods using jQuery

Effect Methods

There are a number of ways to easily add animation effects, many of which simply extend existing jQuery methods.

Basic Effect Transition

The simplest way to apply an animation effect is to call the effect() method on any DOM element and specify the animation type, options, speed and callbacks as needed. If you need to couple an animation with a hide, show or toggle effect, see the visibility transitions in the next section.

• Effect - Direct way to apply an animation to any element

Visibility Transitions

These effect extend the base class API to bring visual transitions to the standard hide, show and toggle visibility functions in jQuery. All the standard animation types are supported.

• Show - As an element is being shown, animate it's entrance
• Hide - As an element is being hidden, animate it's exit
• Toggle - As an element is being toggled between show or hide states, animate the transition

Color Transitions

The jQuery UI effects core extends the animate function to be able to animate colors as well. These transitions can animate the background and border colors and accept colors specified in hex, rgb and color names. This is used extensively by the class transition effects in the next section.

• Animate - Animate background and border colors

Class Transitions

The jQuery UI effects core extends the base class API to be able to animate between classes. This is a very powerful way script complex animations because these effects analyze the differences between the style attributes of the classes and automatically builds parallel animations to transform between the various style attributes that are different. Any style attribute that contains a numeric value will be animated, from hex colors to dimensions, padding, margins, border thickness, positioning, font size, line-height and more will automatically animate.

• addClass - Adds a class to elements with an animated transition between the states.
• removeClass - Removes a class to elements with an animated transition between the states.
• toggleClass - Adds a class if it is not present, and removes the class if it is present with an animated transition.
• switchClass - Switches between one class and another with an animated transition.

Advanced Easing

The excellent jQuery easing plugin porting Robert Penners advanced easing functions to jQuery has been included into effects.core.js.

Create tabs using jQuery tab plugin

Hi everyone,

You can use below code to generate tabs using jQuery tabs plugin :

<script>
 $(function() {
  $( "#tabs" ).tabs();
 });
 </script>



<div class="demo">

<div id="tabs">
 <ul>
  <li><a href="#tabs-1">Nunc tincidunt</a></li>
  <li><a href="#tabs-2">Proin dolor</a></li>
  <li><a href="#tabs-3">Aenean lacinia</a></li>
 </ul>
 <div id="tabs-1">
  <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, </p>
 </div>
 <div id="tabs-2">
  <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante,</p>
 </div>
 <div id="tabs-3">
  <p>Mauris eleifend est et turpis. Duis id erat.</p>
  <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna.</p>
 </div>
</div>

</div><!-- End demo -->



<div style="display: none;" class="demo-description">
<p>Click tabs to swap between content that is broken into logical sections.</p>
</div><!-- End demo-description -->

Post your comment if you find any difficulties to develop tabs. 

Create slider using jQuery

you can use below code to generate slider using jQuery :

<style>
 #demo-frame > div.demo { padding: 10px !important; }
 </style>
 <script>
 $(function() {
  $( "#slider" ).slider();
 });
 </script>



<div class="demo">

<div id="slider"></div>

</div><!-- End demo -->



<div style="display: none;" class="demo-description">
<p>The basic slider </p>
</div><!-- End demo-description -->

Dialog using jQuery

jQuery Rockers,

Use below code to generate dialog using jQuery :

<script>
 $(function() {
  $( "#dialog" ).dialog();
 });
 </script>



<div class="demo">

<div id="dialog" title="Basic dialog">
 <p>This is the default dialog which is useful for displaying information. </p>
</div>

<!-- Sample page content to illustrate the layering of the dialog -->
<div class="hiddenInViewSource" style="padding:20px;">
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a></p>
<form>
 <input value="text input"><br>
 <input type="checkbox">checkbox<br>
 <input type="radio">radio<br>
 <select>
  <option>select</option>
 </select><br><br>
 <textarea>textarea</textarea><br>
</form>
</div><!-- End sample page content -->

</div><!-- End demo -->



<div style="display: none;" class="demo-description">
<p>The basic dialog window is an overlay positioned </p>
</div><!-- End demo-description -->

For other effects and all you can refer jQuery.com plugin section 

or you can post your comment here to get quick solution .

Datepicker using jQuery

Hello Everyone,

This is the code which you can use to generate Date picker using jQuery :

<script>
 $(function() {
  $( "#datepicker" ).datepicker();
 });
 </script>

<div class="demo">

<p>Date: <input id="datepicker" type="text"></p>

</div><!-- End demo -->



<div style="display: none;" class="demo-description">
<p>The datepicker is tied to a standard form input field.  </p>
</div><!-- End demo-description -->

Autocomplete using jQuery

Many times we are having requirements to develop autocomplete functionality.

So you can use below code to get it work using jQuery: 

<script>
 $(function() {
  var availableTags = [
   "ActionScript",
   "AppleScript",
   "Asp",
   "BASIC",
   "C",
   "C++",
   "Clojure",
   "COBOL",
   "ColdFusion",
   "Erlang",
   "Fortran",
   "Groovy",
   "Haskell",
   "Java",
   "JavaScript",
   "Lisp",
   "Perl",
   "PHP",
   "Python",
   "Ruby",
   "Scala",
   "Scheme"
  ];
  $( "#tags" ).autocomplete({
   source: availableTags
  });
 });
 </script>


 
<div class="demo">

<div class="ui-widget">
 <label for="tags">Tags: </label>
 <input id="tags">
</div>

</div><!-- End demo -->



<div style="display: none;" class="demo-description">
<p>The Autocomplete widgets provides suggestions while you type into the field.</p>
<p>The datasource is a simple JavaScript array, provided to the widget using the source-option.</p>
</div><!-- End demo-description -->

Accordion menu using jQuery

Guys , use below code to generate Accordion menu using jQuery :

<script>
 $(function() {
  $( "#accordion" ).accordion();
 });
 </script>



<div class="demo">

<div id="accordion">
 <h3><a href="#">Section 1</a></h3>
 <div>
  <p>
  Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
  ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
  amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
  odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
  </p>
 </div>
 <h3><a href="#">Section 2</a></h3>
 <div>
  <p>
  Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
  purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
  velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
  suscipit faucibus urna.
  </p>
 </div>
 <h3><a href="#">Section 3</a></h3>
 <div>
  <p>
  Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
  Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
  ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
  lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
  </p>
  <ul>
   <li>List item one</li>
   <li>List item two</li>
   <li>List item three</li>
  </ul>
 </div>
 <h3><a href="#">Section 4</a></h3>
 <div>
  <p>
  Cras dictum. Pellentesque habitant morbi tristique senectus et netus
  et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
  faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
  mauris vel est.
  </p>
  <p>
  Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
  Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
  inceptos himenaeos.
  </p>
 </div>
</div>

</div><!-- End demo -->

<div style="display: none;" class="demo-description">
<p>
Click headers to expand/collapse content that is broken into logical sections, much like tabs.
Optionally, toggle sections open/closed on mouseover.
</p>
<p>
The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is
usable without JavaScript.
</p>
</div><!-- End demo-description -->

If you need any further help please post your comment over here and get solution. 

visual jquery

Guys ,

I learn a lot from http://visualjquery.com/ .
If you want to learn jquery within one day , you can refer this site and get maximum benefits from them.
As this is very easy to understand.

Sortable using jQuery

Guys , you can use below code to get sortable functionality using jQuery :

<style>
 #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
 #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
 #sortable li span { position: absolute; margin-left: -1.3em; }
 </style>
 <script>
 $(function() {
  $( "#sortable" ).sortable();
  $( "#sortable" ).disableSelection();
 });
 </script>


<div class="demo">

<ul id="sortable">
 <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
 <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
 <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
 <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
 <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
 <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
 <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>

</div><!-- End demo -->



<div style="display: none;" class="demo-description">
<p>
 Enable a group of DOM elements to be sortable. Click on and drag an
 element to a new spot within the list, and the other items will adjust to
 fit. By default, sortable items share <code>draggable</code> properties.
</p>
</div><!-- End demo-description -->

Selectable using jQuery

This is the code which you can use to get Selectable effect using jQuery :

<style>
 #feedback { font-size: 1.4em; }
 #selectable .ui-selecting { background: #FECA40; }
 #selectable .ui-selected { background: #F39814; color: white; }
 #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
 #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
 </style>
 <script>
 $(function() {
  $( "#selectable" ).selectable();
 });
 </script>



<div class="demo">

<ol id="selectable">
 <li class="ui-widget-content">Item 1</li>
 <li class="ui-widget-content">Item 2</li>
 <li class="ui-widget-content">Item 3</li>
 <li class="ui-widget-content">Item 4</li>
 <li class="ui-widget-content">Item 5</li>
 <li class="ui-widget-content">Item 6</li>
 <li class="ui-widget-content">Item 7</li>
</ol>

</div><!-- End demo -->



<div style="display: none;" class="demo-description">
<p>Enable a DOM element (or group of elements) to be selectable. Draw a box with your cursor to select items. Hold down the Ctrl key to make multiple non-adjacent selections. </p>
</div><!-- End demo-description -->

Resizable using jQuery

This is the code which you can use to get resizable effect using jQuery :

<style>
 #resizable { width: 150px; height: 150px; padding: 0.5em; }
 #resizable h3 { text-align: center; margin: 0; }
 </style>
 <script>
 $(function() {
  $( "#resizable" ).resizable();
 });
 </script>



<div class="demo">
 
<div id="resizable" class="ui-widget-content">
 <h3 class="ui-widget-header">Resizable</h3>
</div>

</div><!-- End demo -->



<div style="display: none;" class="demo-description">
<p>Enable any DOM element to be resizable.  With the cursor grab the right or bottom border and drag to the desired width or height.</p>
</div><!-- End demo-description -->

Droppable using jQuery

Below code you can use to get droppable effect using jQuery :

<style>
 #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
 #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
 </style>
 <script>
 $(function() {
  $( "#draggable" ).draggable();
  $( "#droppable" ).droppable({
   drop: function( event, ui ) {
    $( this )
     .addClass( "ui-state-highlight" )
     .find( "p" )
      .html( "Dropped!" );
   }
  });
 });
 </script>



<div class="demo">
 
<div id="draggable" class="ui-widget-content">
 <p>Drag me to my target</p>
</div>

<div id="droppable" class="ui-widget-header">
 <p>Drop here</p>
</div>

</div><!-- End demo -->



<div style="display: none;" class="demo-description">
<p>Enable any DOM element to be droppable, a target for draggable elements.</p>
</div><!-- End demo-description -->

Draggable using jQuery

Hi Everyone,

If you want to create draggable function using jQuery, Below code may help to you :

<style>
 #draggable { width: 150px; height: 150px; padding: 0.5em; }
 </style>
 <script>
 $(function() {
  $( "#draggable" ).draggable();
 });
 </script>



<div class="demo">

<div id="draggable" class="ui-widget-content">
 <p>Drag me around</p>
</div>

</div><!-- End demo -->



<div style="display: none;" class="demo-description">
<p>Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.</p>
</div><!-- End demo-description -->

Codeigniter Tables class

Today I want to talk about an interesting class that is built within codeigniter. This class consists of just creating an HTML Table, but except, you do it with ease, and I am going to show you how.
In this example, we are going to assume we have a database connection, and within that database, we have a table called books. Let’s create a simple controller, that will grab the information that is within the ‘books’ table, and display it to the user.
In our controller named books.php, we will call the parent construct as always, (just for good programming habits). Then we create an index function. Remember, codeigniter will look for a function called index if no method is specified within the URL. Within this index, we will load the tables library class.

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class Books extends CI_Controller{     function __construct(){         parent::__construct();     }     public function index(){         // Load the tables library         $this->load->library('table');     } } ?> After loading the library, we would need an array with all the data that will be displayed. In this particular case, we will use all table columns that are found in the table database. Since we already have a database connection, then all we need to do is query the database to grab the information. So, adding to our controller we see: <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class Books extends CI_Controller{     function __construct(){         parent::__construct();     }     public function index(){         // Load the tables library         $this->load->library('table');         // Query the database and get results         $data['books'] = $this->db->get('books');     } } ?> Now all we have to do is create a view, and call it from our controller. Within this view, we will ‘generate’ the table to display the results from the query. Let’s create the view first: Filename: books_view.php <html> <head> <title>Jotorres Table class example</title> </head> <body>     <div id='results'>     <?php echo $this->table->generate($books); ?>     </div> </body> </html> The variable $books, comes from the $data array in the controller. Finally, let’s load the view from our controller, while sending in the data that we found in our query: <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class Books extends CI_Controller{     function __construct(){         parent::__construct();     }     public function index(){         // Load the tables library         $this->load->library('table');         // Query the database and get results         $data['books'] = $this->db->get('books');         // Load the view and send the results         $this->load->view('books_view', $data);     } } ?> The table that will be generated with this class will include headers. These headers are the column names in the database table. If you would like to have a set of custom headers, then that can be achieved adding the following to your controller: Add set_heading(), but first, we need to fill in an array of custom names for the header. Chek out how it’s done: <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class Books extends CI_Controller{     function __construct(){         parent::__construct();     }     public function index(){         // Load the tables library         $this->load->library('table');         // Query the database and get results         $data['books'] = $this->db->get('books');         // Create custom headers         $header = array('Book ID', 'Book Name', 'Book Description', 'Book Author');         // Set the headings         $this->table->set_heading($header);         // Load the view and send the results         $this->load->view('books_view', $data);     } } ?> Here you have it folks. It is plain and simple, to use codeigniter tables class.

jQuery Cheat sheet

Hello Guys,

Here there are useful jquery cheat sheet given.
Hop it will be useful to you.

https://docs.google.com/document/d/1eT7Us2ftHbeo3cXGOEH2ovTySWI7tYlYnK_s7CslQCM/edit