Basic jQuery Tutorial: About parent and child elements

In this article, I will be explaining about parent and child elements and how to use jQuery to them efficiently.

VIEW DEMO

Basically, parent element means any HTML element with other elements inside it. Like in the following HTML code, we have the div ‘parent’. We suppose it to be parent element. There are other elements inside it like ul, li, and span. So, ul, li and span are children of the div ‘parent’. There is also nested ul and li, hence containing parent child combination. Continue reading

jQuery: Create Stunning Slideshow with Cycle Plugin

You can easily create stunning and very effective image slideshow with the jQuery Cycle Plugin. You don’t need to write long and difficult programming code. Just a few lines of code will be enough.

View Demo | Download Code

You need to have jQuery library and the jQuery Cycle plugin.

Download jQuery Library | Download jQuery Cycle Plugin

The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more.

The Cycle Plugin provides many options for customizing your slideshow. The default option values can be overridden by passing an option object to the cycle method.

Here is the list of options

There are many effects that can be used with jQuery Cycle Plugin. You can find them all here. I have used some effects and created a demo.

View Demo | Download Code

jQuery: How to get X-axis Y-axis value?

Well, it’s terrifically easy to get the x-axis and y-axis value of any point with jQuery. I mean the mouse pointer position. We simply do it with event.pageX and event.pageY.

event.pageX gives the mouse position relative to the left edge of the document. And event.pageY gives the mouse position relative to the top edge of the document.

The following function fetches x and y axis on mousemove over the div content.

$(function(){	
	$("#content").mousemove(function(e){				
		$("#value").html("x-axis: "+e.pageX+"<br />y-axis: "+e.pageY);
	});		
});

View Demo | Download Code

Expandable Collapsible Sitemap with jQuery Treeview plugin

“Lightweight and flexible transformation of an unordered list into an expandable and collapsable tree.” This is what the jQuery Treeview plugin home defines. You can create different types of tree. See demos here. Here, I will be showing you the Sitemap demo that I created using the Treeview plugin.

View Demo | Download Code

<li class="expandable">Parent
	<ul>
		<li class="expandable">Child-A
			<ul>
				<li>Child-A-1</li>
				<li>Child-A-2</li>
			</ul>
		</li>
		<li class="expandable">Child-B
			<ul>
				<li class="expandable">Child-B-1</li>
					</ul><ul>
						<li>Child-B-1-1</li>
						<li>Child-B-1-2</li>
					</ul>
				</li>
			</ul>
		</li>
		<li>Child-C</li>

View Demo | Download Code

Best Beginner Tutorial For jQuery

jQueryThe motto of jQuery is “write less, do more” and it does exactly the same. Here is was jquery.com says about jQuery:

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

Some of the excellent features of jQuery are:

- It’s fast.
- It’s concise.
- It’s free and open source.
- It’s cross-browser (support all the web browsers).
- Moreover, it’s easy to learn and work with.

Google, Dell, Digg, Technorati, Mozilla, WordPress, Drupal and many more are using jQuery. So, why shouldn’t we?

Here are some links containing excellent tutorial to start up with jQuery.

1) http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery
2) http://www.codeproject.com/KB/scripting/jquerylab.aspx

I like learning through examples. The above tutorial links do exactly the same. So, enjoy jQuery.

Cheers,

Simple tooltip using jquery

tool tip using jQueryThe tooltip is a common graphical user interface element. It is used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a tooltip may appear — a small “hover box” with information about the item being hovered over.

There are some few steps to be followed to use tooltip in webpage.

Step 1:

First of all you have to insert the given code into the head section of the html code.

<script type="text/javascript" src="jquery-1.2.2.pack.js"></script>
<style type="text/css">
 
div.htmltooltip {
position: absolute; /*leave this and next 3 values alone*/
z-index: 1000;
left: -1000px;
top: -1000px;
background: green;
border: 10px solid red;
color: white;
padding: 3px;
width: 250px; /*width of tooltip*/
}
 
</style>
<script type="text/javascript" src="htmltooltip.js">
 
/***********************************************
* Inline HTML Tooltip script- by JavaScript Kit (http://www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/
 
</script>

Step 2:

Download the following two files and save it in the same folder which contains the html code.

Step 3:

To add tooltip to any link on webpage, just give the link a rel=”htmltooltip” declaration, then define the tooltip DIV itself anywhere on the page with class=”htmltooltip”.

To see an example:
ADD the following codes into the body section of your html code.

<p align="left">"<a href="http://en.wikipedia.org/wiki/Global_warming" rel="htmltooltip">Global warming</a> is one of the most hot topic in the news and reviews. There are various <a href="http://en.wikipedia.org/wiki/Global_warming_conspiracy" rel="htmltooltip">Conspiracy theories</a> on global warming. The effect of global warming are clearly being seen in the country like <a href="http://en.wikipedia.org/wiki/Nepal" rel="htmltooltip">Nepal</a>   where glaciers are constantly  melting and size is constantly decreasing. The message is very clear that some day ,there will be no snow at all.  </p>
 
<!--Inline HTML Tooltips (DIV with class="htmltooltip"-->
<!--Matched up with anchor links with rel="htmltooltip" and in the order they appear within page's source-->
 
<div class="htmltooltip">Global warming is the increase in the average temperature of the Earth's near-surface air and oceans since the mid-20th century and its projected continuation.</div>
 
<div class="htmltooltip">The Greenhouse Conspiracy , It is one of the earliest instances of the suggestion of a conspiracy to promote false claims supporting global warming.</div>
 
<div class="htmltooltip">Nepal is officially the Federal Democratic Republic of Nepal, is a landlocked country in South Asia and the world's youngest republic.</div>

Click here to see example