Facebook like drop down menu using jQuery

Visit Infonine.in Blog http://infonine.in/blog

Today we will see a drop down menu like a facebook notification. We are using a jquery here. The code we use here is very easy and short.

Read more of this post

Animated stretchable search text box using jQuery

Today we will see the Animated Textbox which on focus stretch and on de-focus shrink to a particular size.
Here we are using jquery, css. This will reduce the occupied area by tradional search box. As shown in following image.

animated-search-box

Read more of this post

Jquery – Use of function – Passing values through function

Here we study about the jquery function. By using function we can use same code for multiple times. Here I have created the Add function which I can use for no. of times.
The code is as follows

<!DOCTYPE html>
<html>
<head>
<title>Passing Value Through Function</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
</head>
<body>
<input type="text" id="textboxone">+
<input type="text" id="textboxtwo">=<span style="padding:0 10px;"></span>
<button id="addbutton">Add</button>
<script>
$("#addbutton").click(function(){

	var a=$("#textboxone").val();
	var b=$("#textboxtwo").val();
	var d=addnumbers(a,b);
	$("span").append(d)
});
function addnumbers(a,b)
{
	var c=Number(a)+Number(b);
	return c;
}
</script>
</body>
</html>

Read more of this post

Auto Image Slideshow Using jQuery

This is a simple slideshow using jquery. Here we used the fade in fade out effect in Jquery.
Its just a 2-3 line code using jquery as compare to Javascript tradional code.
Here what we used

<script>
$(document).ready(function()
{
	$('.img:gt(0)').hide();
	setInterval(function() {
		$(".img:first-child").fadeOut(3000).next(".img").fadeIn(3000).end().appendTo("#show-case")
}, 4000);
      
});
</script>

The complete HTML,CSS & Jquery code is here [click on read more]
Read more of this post

%d bloggers like this: