All Scripts Solutions

Text Children plugin

2012-03-22T23:55:00.000-07:00

Overview

The Text Children Plugin is a simple little jQuery plugin to return textual content from selected elements. Unlike jQuery's built-in .text() method, the textChildren plugin does not recurse through the selected elements' descendants.

Quick Start Guide

The Text Children Plugin returns a concatenated string by default, as .text() does, but can include an optional delimiter, such as a comma or a space, between text nodes. It can also return an array if you prefer that. Each text node's string is trimmed by default, but this feature can be turned off if desired.

Add HTML markup to your page and note the elements from which you want to extract textual content. For example, your document may have an unordered list (<ul>) like the following:


  <ul id="testlist">
    <li>Although <strong>she claimed that</strong> someone <em>stopped by 
      for a visit, </em><span class="highlight">she swore 
      that he never</span> slept here
    </li>
    <li><strong>The rains came down</strong> for forty years
    </li>
    <li><em>James said</em> he <em>never</em> felt <span class="highlight">that he was</span> 
    better <strong>at chess</strong> than his son.
    </li>
  </ul>

Include the jQuery core file and the Text Children plugin in the <head> of your document. After these scripts are referenced, you can reference a custom script file to return the desired text nodes (preferred) or enter the script directly in the <head> (shown below).

Summarize Plugin - jQuery

2012-03-22T23:53:00.001-07:00

Overview

The Summarize Plugin allows you to choose a number of "child" elements (e.g. paragraphs) to initially display as a summary, with a "read more" link that reveals the rest of the child elements when clicked.
If you like this plugin and you're feeling generous, perhaps you'd also like to visit my amazon.com wish list?

Quick Start Guide

Add HTML markup to your page for elements that you want to be expandable. For example:


  <div class="expandable">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
     incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
     exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.
    </p>
    <!-- etc.  -->
  </div>

Include the jQuery core file and the Summarize plugin in the <head> of your document. After these scripts are referenced, you can reference a custom script file (preferred) to modify the expandable elements or enter the script directly in the <head> (shown below).

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.summarize.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {

  // simple example, using all default options
  /***** apply the summarize() method to the "containing" element ****/
  $('div.expandable').summarize(); 
    
});
</script>

See API / Options for more ways to customize the behavior and appearance of the summarize.

Fancy Letter Plugin

2012-03-22T23:52:00.000-07:00

Overview

The Fancy Letter Plugin lets you prettify your web page by styling the first letter of any element while keeping the HTML markup clean and readable by both human and machine.
If you like this plugin and you're feeling generous, perhaps you'd also like to visit my amazon.com wish list?

Quick Start Guide

Include the jQuery core file and the Fancy Letter plugin in the <head> of your document. After these scripts are referenced, you can reference a custom script file to add your fancy letters (preferred) or enter the script directly in the <head> (shown below).

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.fancyletter.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {

  // simple example wraps the first letter of 
  $('div.content p').fancyletter();
  
});
</script>

Fancy letters are wrapped in a span tag. Each span is given two classes: a common class ("fancy-letter" by default) and a "letter" class.

Add CSS to style the fancy letters.

For example, after applying the .fancyletter() method to:
<p>This paragraph</p>
it might look like this:
<p><span class="fancy-letter ltr-t">T</span>his paragraph</p>.

Add HTML markup to your page for elements that you want to begin with a fancy letter.

clueTip: A jQuery Tooltip Plugin

2012-03-22T23:51:00.000-07:00

Overview

The clueTip plugin allows you to easily show a fancy tooltip when the user's mouse hovers over (or, optionally, clicks on) any element you designate in your script. If the element includes a title attribute, its text becomes the heading of the clueTip.

Quick Start Guide

Showing the most basic clueTip can be achieved in two easy steps.

Add HTML markup to your page for elements that you want to invoke a clueTip. By default, the clueTip plugin will use the rel attribute to load contents into the tooltip body via AHAH.


  <!-- use ajax/ahah to pull content from fragment.html: -->
  <p><a class="tips" href="fragment.html" rel="fragment.html">show me the cluetip!</a></p>

  <!-- use title attribute for clueTip contents, but don't include anything in the clueTip's heading -->
  <p><a id="houdini" href="houdini.html" title="|Houdini was an escape artist.|He was also adept

at prestidigitation.">Houdini</a></p>

Include the jQuery core file and the clueTip plugin in the <head> of your document. You may optionally include the hoverIntent plugin as well. After these scripts are referenced, you can reference a custom script file to invoke your clueTips (preferred) or enter the script directly in the <head> (shown below). You should also include the clueTip stylesheet (jquery.cluetip.css) after the scripts.

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.hoverIntent.js" type="text/javascript"></script> <!-- optional -->
<script src="jquery.cluetip.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
  $('a.tips').cluetip();

  $('#houdini').cluetip({
    splitTitle: '|', // use the invoking element's title attribute to populate the clueTip...
                     // ...and split the contents into separate divs where there is a "|"
    showTitle: false // hide the clueTip's heading
  });
});
</script>
<link rel="stylesheet" href="jquery.cluetip.css" type="text/css" />

Expander plugin details

2012-03-22T23:47:00.001-07:00

Add HTML markup to your page for elements that you want to be expandable. For example:

<div class="expandable">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed dot eiusmod tempor
     incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
     exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.
    </p>
    <p>Reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Excepteur sint occaecat cupidatat non proident, sunt inre culpa qui
    officia deserunt mollit anim id est laborum.
    </p>
  </div>

Include the jQuery core file and the Expander plugin in your document.

After these scripts are referenced, you can reference a custom script

file to modify the expandable elements.

You may, of course, name this custom file anything you wish and place it

anywhere on your server.

It is named custom.js here and placed in the "scripts" directory

for demonstration purposes only.

<script src="jquery.js"></script>
<script src="jquery.expander.js"></script>

<script src="/scripts/custom.js"></script>

In your custom script, select the elements you want to expand/collapse

and call the .expander() method, with or without options.

// you can override default options globally, so they apply to every .expander() call
$.expander.defaults.slicePoint = 120;

$(document).ready(function() {
  // simple example, using all default options unless overridden globally
  $('div.expandable p').expander();

  // *** OR ***

  // override default options (also overrides global overrides)
  $('div.expandable p').expander({
    slicePoint:       80,  // default is 100
    expandPrefix:     ' ', // default is '... '
    expandText:       '[...]', // default is 'read more'
    collapseTimer:    5000, // re-collapses after 5 seconds; default is 0, so no re-collapsing
    userCollapseText: '[^]'  // default is 'read less'
  });

});

jQuery baloon plugin

2012-03-06T04:53:00.000-08:00

If you are looking for any good tool tip functionality , you can have best jquery plugin to develop the same.
you can check http://file.urin.take-uma.net/jquery.balloon.js-Demo.html .

Features :

Without css and images. Easy to apply to a website.
Edge of balloon tip is placed on optimized position.
Can be styled by both script and css.
Fast even if the page has many balloons, because only add event handler when the document is ready.
Any HTML and jQuery object as contents.
User-friendly API.
Fine-tunable position, animations and some effects.
Adjust position and size when the window size is changed.
Advanced methods for power user.

<script type="text/javascript" src="js/jquery.balloon.js"></script>

$(function() {
  $('selectors').balloon(options);
});

Enjoy !!!!

Position filter in jQuery

2012-03-01T01:39:00.000-08:00

jQuery allows you to filter the elements selected based on their position in the collection. For example:

$('.article:eq(2)');: Selects the third element with the class article. Elements in a collection are numbered starting with 0.
$('.article:gt(1)');: From the collection of all elements with the class article, select all elements following the second one.
$('.article:lt(3)');: From the collection of all elements with the class article, select up to the first three.
$('.article:first');: Selects the first element with the class article
$('.article:last');: Selects the last element with the class article
$('.article:odd');: Selects the odd elements out of all the elements with the class article (zero-based index: 1,3,5,etc)
$('.article:even');: Selects the even elements out of all the elements with the class article (zero-based index: 0,2,4,etc)

Hierarchy selector in jQuery

2012-03-01T01:35:00.001-08:00

Basic jQuery selectors work the same as CSS selectors:

$('p');

Selects all the <p> elements in your page

$('*');

Selects all elements on the page

$('.status');

Selects all elements with the class status

$('#header');

Selects the element with the id header

	Note
	You should not use the same id for more than one element. If you do so and if you perform a selection by id, only the first matched element in the DOM will be returned

$('p, li, .status, #nav');

Selects all <p> and <li> elements, all elements with the status class, and the element with the id nav.

----------------------------------------------------------------------------------

jQuery hierarchical selectors also work the same as CSS selectors:

$('#footer span');

Selects the <span> elements that are descendants of the element with the id footer.

$('ul > li');

Selects the <li> elements that are immediate children of <ul> elements.

$('h2 + p');

Selects the <p> elements that are immediately preceded by an <h2> element.

$('h2 ~ p');

Selects all <p> elements following an <h2> element that have the same parent as the <h2> element. ----------------------------------------------------------------------------------

Another powerful selection type is selection by attribute:

$('a[href]');

Selects all <a> elements that have an href attribute.

$('a[href="http://mrkn.co/f/271"]');

Selects all <a> elements whose href attribute exactly matches "http://mrkn.co/f/271".

$('a[href*="goo.gl"]');

Selects all <a> elements whose href attribute contains "goo.gl". For example, this would match:

<a href="http://goo.gl/DeSyV" class="url">Interesting link</a>

$('a[href^="http://bit.ly"]');

Selects all <a> elements whose href attribute starts with "http://bit.ly". For example, this would match both of these elements:

<a href="http://bit.ly/eU3ccR" class="url">One link</a>
<a href="http://bit.ly/jqcon11SF" class="url">Another link</a>

$('a[href$=".pdf"]');

Selects all <a> elements whose href attribute ends with ".pdf". For example:

<a href="http://mrkn.co/docs/info.pdf" class="url">Download PDF version</a>

$('p[lang|="en"]');

Selects all <p> elements whose lang attribute matches either "en" or "en-\*", where * can be anything.

Note

A detailed explanation on selection by attribute can be found at the following URL: http://api.jquery.com/category/selectors/attribute-selectors/

----------------------------------------------------------------------------------

jQuery also comes with useful selectors related to forms.

$(':button'); , $(':checkbox'); , $(':file'); , $(':image'); , $(':password'); , $(':radio'); , $(':reset'); , $(':submit'); , $(':text');: Selects all <input> elements of the specified type.
$(':input');: Selects all form elements, including <textarea> and <select> elements.
$(':checked');: Selects all checkbox and radio elements that are checked.
$(':selected');: For <option> elements, returns the selected option(s).
$(':disabled'); , $(':enabled');: Selects all disabled/enabled form elements.

	Note
	It’s recommended to precede these selectors with a tag name or some other selector; otherwise, the universal selector (``) is implied (e.g., `$(":checkbox")` implies `$(":checkbox")`).

The following will serve as an example to demonstrate form selectors:

<form name="foodieform">
  <fieldset>
    <legend>Search a recipe:</legend>
    <label for="txt_recipe_name">Recipe name:</label>
    <input type="text" name="txt_recipe_name" id="txt_recipe_name" />
    <label for="meal_type">Type of meal:</label>
    <select id="meal_type" name="meal_type">
      <option value="Apetizer" selected>Apetizer</option>
      <option value="Entree">Entree</option>
      <option value="Drinks">Drinks</option>
      <option value="Desert">Desert</option>
    </select>
  </fieldset>
  <fieldset>
    <legend>Choose a type of food</legend>
    <input type="checkbox" name="food_type" value="French" checked>French</input>
    <input type="checkbox" name="food_type" value="Italian">Italian</input>
    <input type="checkbox" name="food_type" value="Mexican">Mexican</input>
    <input type="checkbox" name="food_type" value="Chinese">Chinese</input>
  </fieldset>
  <fieldset>
    <legend>Skills required</legend>
    <input type="radio" name="food_skills" value="1"/>Easy
    <input type="radio" name="food_skills" value="2"/>Medium
    <input type="radio" name="food_skills" value="3" checked/>Hard<br/>
  </fieldset>
  <input type="button" name="form-button" id="form-button" value="search"/>
  <input type="reset" name="form-reset" id="form-reset"/>
</form>

$(':checked'); would select:

<input type="checkbox" name="food_type" value="French" checked>French</input>
<input type="radio" name="food_skills" value="3" checked/>Hard<br/>

$(':radio'); would select:

<input type="radio" name="food_skills" value="1">
<input type="radio" name="food_skills" value="2">
<input type="radio" name="food_skills" value="3" checked>

$(':reset');:: Selects reset elements. In this case:

<input type="reset" name="form-reset" id="form-reset">

$(':selected'); would select:

<option value="Appetizer" selected>Appetizer</option>

$(':text'); would select:

<input type="text" name="txt_recipe_name" id="txt_recipe_name">

	Note
	More information on form selectors is available here ⇒ http://api.jquery.com/category/selectors/form-selectors/

Sliding effect using jQuery

2012-03-01T01:33:00.000-08:00

if you need any functionality like sliding image or menu , then you can use below code :

$('.menu-ul1').hide();

$('.menu-li1').toggle(function(){
   $(this).next('.menu-ul1').slideDown();
},function(){
   $(this).next('.menu-ul1').slideUp();
});

Fadding effect in jQuery

2012-03-01T01:32:00.002-08:00

Guys

When you have requirement for giving fadding effect in your application , you can use below code :

$('.menu-ul1').hide();

$('.menu-li1').toggle(function(){
   $(this).next('.menu-ul1').fadeIn();
},function(){
   $(this).next('.menu-ul1').fadeOut();
});

Hide and show element

2012-03-01T01:30:00.001-08:00

Hi everyone,

Use below code for hiding and showing elements :

$('.menu-ul1').hide();

$('.menu-li1').toggle(function(){
   $(this).next('.menu-ul1').show();
},function(){
   $(this).next('.menu-ul1').hide();
});

Effect Methods using jQuery

2012-02-22T23:13:00.001-08:00

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

2012-02-22T23:11:00.004-08:00

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

2012-02-22T23:10:00.002-08:00

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

2012-02-22T23:09:00.002-08:00

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

2012-02-22T23:07:00.001-08:00

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

2012-02-22T23:04:00.001-08:00

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

2012-02-22T23:02:00.000-08:00

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

2012-02-22T22:57:00.000-08:00

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

2012-02-22T22:36:00.002-08:00

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

2012-02-22T22:35:00.002-08:00

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

2012-02-22T22:34:00.000-08:00

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

2012-02-22T22:33:00.000-08:00

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

2012-02-22T22:31:00.000-08:00

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

2012-02-22T22:28:00.000-08:00

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.   
 
 

 