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

Sliding Tab Using jQuery

Sliding Tab using jQuery

Necessity of space [ in display area] leads us to use new techniques.  So as to minimize the space in short space utilization we are using a tab which on click [ You can use Mouseover/Out Function too ] Maximize and Minimize the other tabs.  Also it’s a  6-7 line Jquery code we used for sliding purpose.
Here it looks like:

Sliding tab – When Load

Sliding Tab – On Click Event

Here is the jQuery code for sliding tab..

$(".all_block").click(function() {
	$(this).animate({width:650},"slow");
	$(this).prevAll("div").animate({width:50},"slow");
	$(this).nextAll("div").animate({width:50},"slow");});
/* Code For Reset All */
$("#reset_").click(function() {
	$("#container").children("div").animate({width:200},"slow");});

For Complete Source click on Read More

Read more of this post

Animated Tooltip Using jQuery

Login Form

Its another tooltip sourcecode using jQuery. You can copy paste the sourcecode from here. It is a span based tooltip, with animation. The Jquery effects used here are as..

$(".tbox").focusin(function() {

	$(this).next("span").show(1000);

});
$(".tbox").focusout(function() {

	$(this).next("span").hide(1000);

});

Read more of this post

Jquery Image DeScroller [ Very Basic Image Scrolling Jquery Code ]

There are many Image Scroller on web, But their code is difficult to read/ Understand. Infact I am not a developer, I know very basic of  jQuery. So I decided to code myself a very Basic Code. I have taken the help from [http://api.jquery.com/category/effects/].
*Note [The Code below written from scratch so there may be some small mistakes. Suggestions are most welcome]
The Procedure I followed / Problems I faced
1) First I tried Code for a “Animate Function”.
2) Then I put the Images in animating div.
3) Styled the thumbnail images.
4) Problem occurred at the limit of scrolling to right and left.
5) Then I searched for a code that counts the particular Element in an HTML Element.
6) Then I calculated the total width of space images had taken with margin, padding and border.
7) I had the width of Main Div and The Width of Space images had taken : that I used for Limiting the Scroller Div at right position.
8) And for left position I taken the Limit as 0 [Zero] / From the left position of Main Div.
9) However I tried for stopping the animation, Scroller Div passes its limit when I clicked the Button no. of times quickly.
10) When I searched for this issue, I came to know that the process are in Queue then run one after another.Second process wait Until the first process gets completed.

Read more of this post

IE Fix – Centering Layout [Common Bug in IE]

We use the “margin:0 auto;” for centering layout which works in Firefox and Chrome well. But when it comes to IE, it shows the entire layout at left.

Display in Firefox and Chrome:

Display in Internet Explorer :

Click on “Read More” to continue…
Read more of this post

%d bloggers like this: