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)

Hierarchy selector in jQuery

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

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

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

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();
});