Text Children plugin

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

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

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

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

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

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

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)