Posted on December 10, 2008, Filled under AJAX, JavaScript, 
Bookmark it
In this tutorial I will show you how to display the Yahoo! Weather on your website, using a PHP RSS Parser, called Magpie RSS and JQuery (AJAX). The Weather RSS Feed uses 2 parameters: ‘p’ for location & ‘u’ for degree units. The base URL for the Weather RSS Feed is http://weather.yahooapis.com/forecastrss. An address that gets the weather forecast in Sunnyvale, CA (zip code: 94089) in Celsius (c) looks like this: http://weather.yahooapis.com/forecastrss?p=94089&u=c.
Read more from this entry…
Posted on December 5, 2008, Filled under AJAX, jQuery, Bookmark it
Did you notice how many sites have a verification tool for the ‘username’ field when you try to register? Many use the power of AJAX to check if the nickname has already been assigned to an existing member. This short tutorial gives you an idea of how you can make such a feature in the pages of your website. We’ll use JavaScript (JQuery) and PHP.
Let’s start creating the page where the visitor will type the “username”:
index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>An AJAX Username Verification Tool</TITLE>
<META NAME="Keywords" CONTENT="form, username, checker">
<META NAME="Description" CONTENT="An AJAX Username Verification Script">
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
As you can see the JQuery library and the CSS file (will reveal its contents later) are included. Now let’s continue creating the script that takes the input value and sends it to check.php in order to determine if the username is already in use or not. I will explain you the code in detail below.
<SCRIPT type="text/javascript">
<!--
/*
Credits: Bit Repository
Source: http://www.bitrepository.com/web-programming/ajax/username-checker.html
*/
pic1 = new Image(16, 16);
pic1.src="loader.gif";
$(document).ready(function(){
$("#username").change(function() {
var usr = $("#username").val();
if(usr.length >= 4)
{
$("#status").html('<img src="loader.gif" align="absmiddle"> Checking availability...');
$.ajax({
type: "POST",
url: "check.php",
data: "username="+ usr,
success: function(msg){
$("#status").ajaxComplete(function(event, request, settings){
if(msg == 'OK')
{
$("#username").removeClass('object_error'); // if necessary
$("#username").addClass("object_ok");
$(this).html(' <img src="tick.gif" align="absmiddle">');
}
else
{
$("#username").removeClass('object_ok'); // if necessary
$("#username").addClass("object_error");
$(this).html(msg);
}
});
}
});
}
else
{
$("#status").html('<font color="red">' +
'The username should have at least <strong>4</strong> characters.</font>');
$("#username").removeClass('object_ok'); // if necessary
$("#username").addClass("object_error");
}
});
});
//-->
</SCRIPT>
Read more from this entry…
Posted on October 27, 2008, Filled under AJAX, Bookmark it
This is a great star rating system from Nomadic Functions. Compared to other traditional rating scripts, this one has a 1,680% increase in accuracy and 84 hot spots (84px wide), instead of only 5. To view a live demo & download the source code visit: http://www.nofunc.com/AJAX_Star_Rating/.
Create any type of Anti-Spam Forms with AJAX Form Builder
Posted on September 2, 2008, Filled under AJAX, jQuery, PHP, Bookmark it
This is a professional multi-usage AJAX Form Builder meant to enhance the functionality of your website by providing an interactive user experience for your readers that need to reach you, whether they need to send a feedback, share their opinion regarding your website, fill a survey, leave a testimonial or even make a room reservation online.
Beside the premium AJAX Form, I would like to offer you a short tutorial regarding the creation of a basic AJAX Contact Form. It will give you an idea of how you can create similar web applications using jQuery and AJAX.
The aim of the tutorial is to help you to create a simple (tableless) ajax contact form using AJAX, JQuery & PHP. We will have a HTML page which will contain the form, a CSS file, a php page where the data will be sent and another file where the validation function(s) will be located. JQuery is a new and powerful library which simplifies the way that you write JavaScript.
Step 1 – Creating the configuration file
config.php
<?php
// To
define("WEBMASTER_EMAIL", 'your_name@domain.com');
?>
Here you should fill the e-mail address where you wish to receive the mail as well as the address where you wish to receive the replies (usually the same).
Step 2 – Creating the css file
style.css
/*
Credits: Bit Repository
CSS Library: http://www.bitrepository.com/
*/
html, body { padding: 0; border: 0px none; }
.notification_error
{
border: 1px solid #A25965;
height: auto;
width: 90%;
padding: 4px;
background: #F8F0F1;
text-align: left;
-moz-border-radius: 5px;
}
.notification_ok
{
border: 1px #567397 solid;
height: auto;
width: 90%
padding: 8px;
background: #f5f9fd;
text-align: center;
-moz-border-radius: 5px;
}
.info_fieldset { -moz-border-radius: 7px; border: 1px #dddddd solid; }
.info_fieldset legend
{
border: 1px #dddddd solid;
color: black;
font: 13px Verdana;
padding: 2px 5px 2px 5px;
-moz-border-radius: 3px;
}
.button
{
border: 1px solid #999999;
border-top-color: #CCCCCC;
border-left-color: #CCCCCC;
background: white;
color: #333333;
font: 11px Verdana, Helvetica, Arial, sans-serif;
-moz-border-radius: 3px;
}
/* Label */
label {width: 140px; padding-left: 20px; margin: 5px; float: left; text-align: left;}
/* Input, Textarea */
input, textarea
{
margin: 5px;
padding: 0px;
float: left;
border: 1px solid #999999;
border-top-color: #CCCCCC;
border-left-color: #CCCCCC;
color: #333333;
font: 11px Verdana, Helvetica, Arial, sans-serif;
-moz-border-radius: 3px;
}
/* BR */
br { clear: left; }
Read more from this entry…
