Tag Archives: jquery

jQuery Ajax Tutorial and Example

by

Before we are going with example let’s read something about jQuery and AJAX.

In this example we are submitting a simple form using AJAX.

To create a form first we are creating a database with name “ajax”.

Create a config file with name config.php.

<?
$dbhost = "localhost";   //replace it with your host name
$dbuser="root";               //replace it with your database username
$dbpassword="";             // replace it with your database password
$dbname="ajax";            // replace it with your database name

mysql_connect($dbhost,$dbuser,$dbpassword);
mysql_select_db($dbname);
?> Continue reading →
00000

What is jQuery and Ajax ?

by

What is jQuery ?

jQuery is a multi-browser JavaScript library designed to simplify the client-side scripting of HTML. jQuery is free, open source software and it is a fast, small, and feature-rich JavaScript library. jQuery’s syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and web applications.

What is AJAX ?

AJAX (means Asynchronous JavaScript and XML) is a group of interrelated web development techniques used on the client-side to create asynchronous web applications. With Ajax, web applications can send data to, and retrieve data from, a server asynchronously (in the background) without interfering with the display and behavior of the existing page. Data can be retrieved using the XMLHttpRequest object. Despite the name, the use of XML is not required (JSON is often used instead), and the requests do not need to be asynchronous.

Ajax is not a single technology, but a group of technologies. HTML and CSS can be used in combination to mark up and style information. The DOM is accessed with JavaScript to dynamically display, and allow the user to interact with, the information presented. JavaScript and the XMLHttpRequest object provide a method for exchanging data asynchronously between browser and server to avoid full page reloads.

If you need to check the example on jQuery AJAX, you can check it out here

00000

Rotating Arrow Using jQuery

by

Create a file navigation.html and write the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#arrow_box").html(" ");
$("#arrow_box").append("<img src='arrowimages/arrow1.jpg'>");
});
function arrow_navigation(x,y){
var i = x;
var j = y;
$("#arrow_box").html(" ");
$("#arrow_box").append("<img src='arrowimages/arrow"+j+".jpg'>");
}
</script>
<style type="text/css">
#arrow_box1, #arrow_box2, #arrow_box3, #arrow_box4, #arrow_box5, #arrow_box6, #arrow_box7, #arrow_box8, #arrow_box9, #arrow_box10, #arrow_box11, #arrow_box12 {
cursor:pointer;
}
</style> Continue reading →
00000

jQuery – css() Method

by

jQuery css() Method
The css() method sets or returns one or more style properties for the selected elements.

Return a CSS Property
To return the value of a specified CSS property, use the following syntax:

css(“propertyname”);
The following example will return the background-color value of the FIRST matched element:

Example

$(“p”).css(“background-color”);

Set a CSS Property
To set a specified CSS property, use the following syntax:

css(“propertyname”,”value”);
The following example will set the background-color value for ALL matched elements:

Example

$(“p”).css(“background-color”,”yellow”);

Set Multiple CSS Properties
To set multiple CSS properties, use the following syntax:

css({“propertyname”:”value”,”propertyname”:”value”,…});
The following example will set a background-color and a font-size for ALL matched elements:

Example

$(“p”).css({“background-color”:”yellow”,”font-size”:”200%”});

00000