To use the rotating div block in your webpage you have to follow three steps

1. HTML Section
2. CSS Section
3. jQuery Section

Click here to download the demo file.

Write less , do more. the slogan of the jquery proves its significance. According to jquery.com .”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.” I am always fascinated by the jquery plugins.In this article , i have compiled some jquery plugins which i have used in my projects and hope it will be useful to other’s too.The jquery plugins, here i am discussing are specially focused for handling the images.

1.Slick Auto-Playing Featured Content Slider

Click here for demo and download.

2.Sliding Boxes and Captions with jQuery

Click here for demo and download.

3.jqFancyTransitions slideshow with strip effects

Click here for demo and download.

4.zoomer gallery

Click here for demo and download.

5.Panning Slideshow

Click here for demo and download.

Step 1:
Copy and paste the following code on the head section of your webpage .

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript" src="jquery.js"></script>
<script language="javascript" src="jquery.dimensions.js"></script>
<script language="javascript">
	var name = "#floatMess";
	var menuYloc = null;
		$(document).ready(function(){
	menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
			$(window).scroll(function () {
				offset = menuYloc+$(document).scrollTop()+"px";
				$(name).animate({top:offset},{duration:500,queue:false});
			});
 
			$('#close_message').click(function()
			{
  			$(name).animate({ top:"+=15px",opacity:0 }, "slow");
			});
		});
	 </script>

Step 2:
Add the following code in the CSS style sheet or in the style section of html page.

#floatMess {
		position:absolute;
		top:5px;
		float:left;
		width:95%;
		border:1px solid #999;
		background-color:#456;
		color:#ccc;
		padding:5px 5px 5px 25px;
		text-align:center;
 
		}

The above codes select the color,size font color, width etc of the floating message box.
You can change the upper parameters as per your requirements.

Step 3:
Now it’s the time for adding the main thing in the body section of your webpage ie the main message DIV which is going to be displayed on the webpage. Copy the following codes and paste it in the beginning of the body section or anywhere , it will not affect the other div of the page .

<div id="floatMess"><img id="close_message" style="float:right;cursor:pointer"  src="cross.png" />
      Your message Goes here
 </div>

Step 4:
You will need to download following three files and save it in the same folder which contains the main html file.

• jquery.js
• jquery.dimensions.js
• cross.png ( ICON need to display cross image at the message box )

Downloads:

• Click here to download jquery.js
• Click here to download jquery.dimensions.js
• Click here to download cross.png

DEMO

• Click here to see DEMO
• Click here to download the zip version of demo file .

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.

<div>
	Hover the box and LINK! <br /><br />
	<ul>
		<li>LINK 1
			<ul>
				<li>Sub link 1</li>
				<li>Sub link 2</li>
				<li>Sub link 3</li>
			</ul>
		</li>
		<li>LINK 2
			<ul>
				<li>Sub link 1</li>
				<li>Sub link 2</li>
			</ul>
		</li>
	</ul>
	<br />
	<span>Sample text One!</span> <br />
	<span>Sample text Two!</span> <br />
	<span>Sample text Three!</span> <br />
</div>

The following jQuery code will change the CSS of all span inside the div with id ‘parent’ when we hover the mouse over the div.

jQuery(‘parent > child’) description: Selects all direct child elements specified by “child” of elements specified by “parent”.

$("#parent").hover(function(){
	$("#parent > span").css({"color":"green","font-size":"20px"});
}, function(){
	$("#parent > span").removeAttr("style");
});

The following jQuery code will change the CSS of the parent of li inside the div with id ‘parent’ when we hover the mouse over the li element of the div.

More clearly explaining:
- when mouse is hovered on the li element of the div with id ‘parent’
- then the CSS of the parent of the particular li element is change (not of the li element but of the parent of the li element)
- when the mouse is moved away from the li element, then the recently added css is removed and we go back to normal
- parent() function description: Get the parent of each element in the current set of matched elements.

$("#parent li").hover(function(){
	$(this).parent().css({"border":"1px solid red"});
}, function(){
	$(this).parent().removeAttr("style");
});

VIEW DEMO

Cheers,

VIEW DEMO

Here is my html code. This contains a div with class ‘content’ and two buttons (Write and Append).

<div class="content">
	Write Something!
</div>
<br />
 
<button>Write</button>
<button>Append</button>

Here is the jQuery code to write data:

$("#write").click(function(){
	$(".content").html("Hello World! ");
});

Here is the jQuery code to append data:

$("#append").click(function(){
	$(".content").append("Hello World! ");
});

VIEW DEMO

Cheers,

In this article, I will be showing you how to add or remove HTML attributes. HTML attributes like title, href, src, etc. For example:-

<img src="abc.jpg" class="test" alt="abc" />

Here: src, class, alt, title are attributes.

You can add attributes like above through jQuery. You can also remove the attributes with jQuery.

VIEW DEMO

Here is the HTML source. This contains a link with id ‘myLink’ and Add and Remove buttons with id ‘add’ and ‘remove’ respectively.

<div class="content">
<a id="myLink" href="#">This is my LINK</a>
</div>
 
<button>Add</button>
<button>Remove</button>

Adding Attribute

The following function works as follows:
- myLink is the id of a href link
- add is the id of add button
- when add button is clicked, some style (css) is added to the link with id ‘myLink’
- after that, ‘title’ attribute is added to link with id ‘myLink’

$("#add").click(function(){
	$("#myLink").css({"font-weight":"bold", "color":"red", "text-decoration":"line-through"});
	$("#myLink").attr("title","My Link Title");
});

Removing Attribute

The following function works as follows:
- there is a button with id ‘remove’
- when remove button is clicked, the following things happen:
- ‘style’ attribute is removed from the link with id ‘myLink’
- ‘title’ attribute is removed from the link with id ‘myLink’

$("#remove").click(function(){
	$("#myLink").removeAttr("style");
	$("#myLink").removeAttr("title");
});

VIEW DEMO

Cheers,

In this article, I will be showing you how to add or change css styling. You will be able to add or remove class in HTML elements.

VIEW DEMO

Here is my html code:

<div>
	<span>Sample text!</span>
	<br />
	Testing!
</div>
<br />
 
<div>Click me</div>

As you can see above, I have a div with id ‘content’. I have ‘Sample text!’ inside span. And I have a div with id ‘clickme’.

Here is CSS class to be used:

.hover {
	text-decoration: underline;
	cursor: pointer;
	color: #003399;
	font-weight: bold;
}

Here is the magical jQuery function :)

$("#clickme").hover(function(){
	$(this).addClass("hover");
}, function(){
	$(this).removeClass("hover");
});

Here, ‘hover’ function is used. It means that, when we hover on ‘Click me’ div then the CSS class ‘hover’ is added to the ‘clickme’ div. The ‘hover’ class will change the color, font-weight, etc. of the div text ‘Click me’.

Now, when we click the ‘Click me’ text, then the CSS styling is added to the div ‘content’. The new styling will change the text of div ‘content’ to green in color and it also increases the font size. The following jQuery code is used:

$("#clickme").click(function(){
	$("#content").css({"color":"green","font-size":"20px"});
});

VIEW DEMO

Cheers,

In this article, I will be showing you how to animate image and div.

By animation, I just mean basic animation. This is a basic tutorial. So, please don’t expect it to be so complex animation :). It will simply be increasing the width of the image and div with animate effect.

This is a base for starting animation with jQuery.

VIEW DEMO

Here we go.

I have the following HTML tags for image and buttons:

<img src="lilies.jpg" />
<br /><br />
 
<button>Large</button>
<button>Small</button>

Here is the jQuery code to animated the image:

$("#large").click(function(){
	$("#img").animate({width: "30%"},1500);
});
 
$("#small").click(function(){
	$("#img").animate({width: "200px"},1500);
});

In the above code:

- When the ‘Large’ button is clicked, the image size is increased by 30% with a speed of 1500 ms. The first parameter in the animate() function is CSS property and the second parameter is the number determining how long the animation will run.

- When the ‘Small’ button is clicked, the image size is fixed to be 200px. 1500 is the time for the animation to ru in millisecond.

Similarly, for DIV.

Here is the HTML code with div and buttons:

<div class="content">
	My Div
</div>
<br />
 
<button>Large</button>
<button>Small</button>

Here is the jQuery code to animated the div:

$("#large2").click(function(){
	$(".content").animate({width: "50%"},1500);
});
 
$("#small2").click(function(){
	$(".content").animate({width: "300px"},1500);
});

- When the ‘Large’ button is clicked, the div is expanded to 50% of its width.
- When the ‘Small’ button is clicked, the div is fixed to 300px of width.
- 1500 is the time for the animation to run. You can change it according to you need and wish.

VIEW DEMO

Cheers,

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

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