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: ,

code zone jQuery Crash Course

Welcome to code zone jQuery Crash Course. This is just the beginning of a comprehensive tutorial session covering jQuery technology. These tutorials are prepared with the target of those who are new to jQuery. In other words, this course is for absolute beginners. Let’s get started!

What is jQuery?
This is how jQuery.com defines this technology “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.

First of all, you need jQuery library which can be downloaded from http://docs.jquery.com/Downloading_jQuery
Use your favorite HTML editor for manipulating HTML and javaScript.
Copy the jQuery library into your project folder.

Day 1 – Simple jQuery application

Day 2 – Introduction to animation basics

Day 3 – Handling Items and lists

Day 4 – Simple timed animation

Day 5 – Working with images

 
Leave a comment

Posted by on March 5, 2012 in jQuery

 

Tags: ,