RSS

Tag Archives: jQuery

code zone jQuery Crash Course – Day 4 | Simple timed animation

<html>
<head>
<title>Simple Animation</title>
<style type="text/css">
#myDiv
{
width:300px;
height:200px;
background-color:#0C0;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">

$('document').ready(function(){

$('#myLink').click(function(){

$('#myDiv').animate({"width" : "50px"},1000);
$('#myDiv').animate({"height" : "50px"},1000);
$('#myDiv').animate({"width" : "100px","height" : "100px"},2000);

});
});

</script>

</head>

<body>
<a href="#" id="myLink">Click Me</a>
<div id="myDiv">

</div>
</body>
</html>


 
Leave a comment

Posted by on March 6, 2012 in jQuery

 

Tags: ,

code zone jQuery Crash Course – Day 3 | Handling items and lists

Today I ‘ m going to show you how to create a dynamic list using jQuery. In the following code, user can add or remove item from the list simply by clicking the relevant link.

<html>
<head>
<title>Simple Animation</title>
<style type="text/css">

</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">

$('document').ready(function(){
var size = $('option').size() + 1;

$('#addItem').click(function()
{
$('<option>' + size + '</option>').appendTo('#list');
size++;
});

$('#removeItem').click(function()
{
$('option:last').remove();
size--;
});

});

</script>

</head>

<body>
<a href="#" id="addItem">Add</a> | <a href="#" id="removeItem">Remove</a>
<select name="list"  id="list">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</body>
</html>

 
Leave a comment

Posted by on March 6, 2012 in jQuery

 

Tags: ,

code zone jQuery Crash Course – Day 2 | Introduction to animation basics

It ‘s very easy to add some animation in jQuery. You only need to change the code a little bit. Some code snippets are listed below to understand animation basics in jQuery.

$(document).ready(function()
{
$('div#content').hide();
$('a#link').click(function()
{
$('div#content').show('slow');
});

});

Using slideDown() to control the fall  of content

This will cause to fall the content inside the div as a drop down content.

$(document).ready(function()
{
$('div#content').hide();
$('a#link').click(function()
{
$('div#content').slideDown('slow');
});

});

Using fadeOut() to control the fading effect

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#content
{
background-color:#00F;
width:300px;
height:200px;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function()
{

$('a#link').click(function()
{
$('div#content').fadeOut('slow');
});


});
</script>
</head>

<body>
<a href="#" id="link">Click Me</a>
<div id="content">
</div>
</body>
</html>


 
Leave a comment

Posted by on March 5, 2012 in jQuery

 

Tags: , ,

code zone jQuery Crash Course – Day 1

Create a new HTML file.
include the jQuery library in source code with <script>

Example 1 : Display alert message

<script type="text/javascript" src="jquery.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){

alert("Page loaded");
 });
</script>

In jQuery, accessing HTML elements is based on CSS selectors. You can use the HTML element, element id attribute or element class name to for reference purposes.

View this file using web browser. If everything works fine, you ‘ll see the alert message.

Example 2 : Hide content

$(document).ready(function()
{
$('div#content').hide();

});

Add the above code snippet within javaScript section and add a div container with some dummy text within body section. The div id is content for this scenario. When the browser loads the page you won’t see the text within the div container.

Example 3 : Hide and display content

<html>
<head>

<title>jQuery Examples</title>
<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function()
{
$('div#content').hide();
$('a#link').click(function()
{
$('div#content').show();
});

});
</script>
</head>

<body>
<a href="#" id="link">Click Me</a>

<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</div>
</body>
</html>
 
Leave a comment

Posted by on March 5, 2012 in jQuery

 

Tags: ,