Coders Cult Web Development Blog » Javascript/AJAX

Javascript Sleep Function

Mike Lopez — Thu, 05 Feb 2009 09:36:38 +0000

I’ll make this short and quick. I’ve been searching the web for a Javascript sleep function that works and came across this. It was presented as a class but what I needed was just a function so I rewrote the code a bit. Here’s the end result of my Javascript sleep function which I named, well, jsleep.

function jsleep(s){
	s=s*1000;
	var a=true;
	var n=new Date();
	var w;
	var sMS=n.getTime();
	while(a){
		w=new Date();
		wMS=w.getTime();
		if(wMS-sMS>s) a=false;
	}
}
// how to use
alert('in the beginning there was a pause...');
jsleep(3);
alert('3 seconds after... the pause was gone.');

I’ve tested it in Google Chrome, Firefox 3 and Internet Explorer 7. Works like a charm.

Share this Post through Social Bookmarking

Rounded Corners on ALL Browsers

Mike Lopez — Mon, 17 Nov 2008 03:48:30 +0000

Web designers out there! Have you ever wanted to have rounded corners on the web pages you design but without the use of ugly GIFs or IE-troublesome PNGs? I’ve got good news for you and it’s called jQuery Corners. Have a look at the screenshot below:

This nifty little jQuery plugin will allow you to have anti-aliased rounded corners on your design without the hassle of creating images or worrying about browser compatibility. Note that it’s just a jQuery plugin which means that you’ll also need the jQuery library which you can get for free.

How does jQuery Corners do it?

Well, first it checks if the browser supports rounded corners and if so uses the browser’s built-in rounded corners support. If the browser however doesn’t support rounded corners, then jQuery Corners uses its own algorithm to emulate rounded corners. I took a look at the algorithm’s generated code and it looks like it’s using DIVs with varying width and colors to do to the trick. Simple and elegant but most of all it works.

Give it a try for yourself – jQuery Corners

Share this Post through Social Bookmarking

How to Correctly Render Transparent PNG images in Internet Explorer

Mike Lopez — Fri, 25 Apr 2008 18:12:51 +0000

PNG images are more often better than GIF when it comes to rendering images with transparency mainly because GIF can only support 256 colors while PNG can support 32-bit colors. Here’s a graphical comparison between the two.

PNG is obviously better! Problem is that Internet Explorer 6 and below doesn’t support PNG images natively and that’s kind of bad for web designers who wish to make use of the power of the PNG image format. Other browsers such as Firefox, Opera and Safari support PNG natively but not IE6 and below. Why? Well you go and ask Microsoft.

Is there a solution? Of course! I won’t try to explain how it works because there are many websites out there explaining how it works. I’ve pretty much based my code on a solution provided by Microsoft which uses the proprietary AlphaImageLoader filter. The problem with their solution is that you have to practically edit all your web pages plus it won’t validate with CSS standards.

After studying the basics, I came up with a simple and valid solution that works. With a little help from a 1×1 transparent GIF and a few lines of javascript, you can properly render PNG images with alpha transparency in Internet Explorer. Here’s what you do.

Upload this Nifty 1×1 Transparent GIF to your web server. Put it in the same folder as your html file.
Upload this Nifty Javascript that fixes PNGs in IE to your web server. Put it in the same folder as your html file.
Paste the following javascript code somewhere inside the section of your page.
--[if lte IE 6]> ->
Refresh the page and enjoy transparent PNGs in Internet Explorer

There you go. Hope this helped.

Share this Post through Social Bookmarking

Google Translate Working Example

Mike Lopez — Sat, 22 Mar 2008 09:55:17 +0000

As promised, here’s a sample implementation of the Google Translate API.

"1.0" encoding="UTF-8" ?>
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/1999/xhtml">

"Content-Type" content="text/html; charset=UTF-8" />
Google Translate

"return false">

Enter text to translate and click "Translate"

"button" value="Translate" onclick="gtrans(this.form)" />

"translation" style="border:1px solid #00f;padding:5px;width:400px">-

Here’s the working sample:

Google Translate Sample Implementation

With this API, translating a website from one language to another will be pretty straightforward and FREE. Thanks to Google for providing us with this API, now we can finally increase usability in our websites.

Share this Post through Social Bookmarking

Javascript Based Google Translate API Released

Mike Lopez — Fri, 21 Mar 2008 10:41:54 +0000

If you need to translate your website from one language to another then I have some good news for you. Google Translate has released a JavaScript based API that’s both easy to use and implement. It can handle 13 different languages and as much as 29 language pairs.

I already checked the API documentation and it’s definitely easy to implement. Check out my sample implementation.

Share this Post through Social Bookmarking

AJAX Username Validation

Mike Lopez — Mon, 17 Mar 2008 21:13:07 +0000

Form input validation is sometimes an annoying part in web development but it’s something that we web developers can’t avoid. In order to make sure that the data being entered by our users are valid, we simply have to validate. Another good use of validation is to provide feedback to the user on whether what they are typing is acceptable or not.

One such case is in user registration forms wherein we ask the user to enter a username. It will be nice if we can provide them immediate feedback on whether the username they are choosing is of the correct length, contains invalid characters and of course if it’s still available. For this purpose, I wrote a 156 line AJAX file that shows how to do it.

It’s divided into three sections…

The PHP section – which runs on the server to check if the username is available
The Javascript section – which contains are AJAX stuff and does some client-side validation as well
And the HTML Form – this is where the user enters the username

I simplified the form to contain only the username field – after all, this is just an example / tutorial.

The PHP Part

// sample code for testing purposes only
// existing usernames
$usernames = array ("administrator", "peterpiper", "peterpan", "superman");
if ($_GET["u"] != "") {
if (in_array ($_GET["u"], $usernames)) {
// if username is in our array then output the string "0"
echo "0";
} else {
// if username is not in our array then output the string "1"
echo "1";
}
exit;
}

For the purpose of providing an example, I simply entered a list of “existing” usernames into an array. In the real world, you will be checking the value of $_GET["u"] against a database.

The Javascript Part

// if we have a pre-ajax error, then show the error
if (err != "") {
obj.style.color = "#ff0000";
obj.innerHTML = err.join ("
");
return;
}

// all pre-ajax checks passed? good, now let"s do our ajax check
ajax_call ("usercheck.php?u=" + i.value, usercheck_callback, usercheck_error);
}

/*
* this is our callback function
* all it does is check the data returned by the server
* and decide on whether we show an error or not
*/
function usercheck_callback (data) {
var response = (data == "1");

var obj = document.getElementById("ajax_output");
obj.style.color = (response) ? "#008800" : "#ff0000";
obj.innerHTML = (response == "1") ? "Username OK" : "Username already taken";
}
/*
* this is our error function
* all it does is pop an alert box showing the error
*/
function usercheck_error (err) {
alert ("Error: " + err);
}

It’s pretty self-explanatory but if you’re a bit confused then read the AJAX Introduction I wrote previously so you can grasp the idea of what’s being done in the Javascript code above.

The HTML Form

A few things worth mentioning about our HTML form. First, I placed onsubmit="return false" in the form tag – you can take that out. I just don’t want the form to be submitted when someone presses the enter key on the username field. Second is the onkeyup="usercheck_init (this)" part. That’s what hooks our input field to our ajax call every time the user types a character in our username field.

Now, we put them all together into one nice HTML/PHP file and give it a try.

/*
* Username Validation using AJAX
*
* Author: Mike Lopez
* Author URI: http://mikelopez.info , http://coderscult.com
*
* Description:
* This AJAX example consists of three parts
* namely: PHP, Javascript, and HTML FORM
* - The PHP part handles the server side checking of the username
* - The Javascript part contacts the server (the PHP part)
* - The HTML FORM displays the username input field which is
* hooked to Javascript via the onkeyup attribute
*/

// *** THE PHP PART ***
// sample code for testing purposes only
// existing usernames
$usernames = array ("administrator", "peterpiper", "peterpan", "superman");
if ($_GET["u"] != "") {
if (in_array ($_GET["u"], $usernames)) {
// if username is in our array then output the string "0"
echo "0";
} else {
// if username is not in our array then output the string "1"
echo "1";
}
exit;
}

/*
* Note: In a more realistic scenario, you will be checking
* usernames against a database instead of just a predefined
* array as in our example
*/
// *** END OF PHP PART ***
?>

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/1999/xhtml">

"Content-Type" content="text/html; charset=UTF-8" />
Check <span class="kw1">if</span> User Exists

END OF THE JAVASCRIPT PART –>

END OF THE FORM –>

Here’s how it works:

Existing users are: administrator, peterpiper, peterpan, and superman.
View Sample

Download usercheck.zip – AJAX Username Validation

Share this Post through Social Bookmarking

AJAX Introduction

Mike Lopez — Mon, 17 Mar 2008 20:25:46 +0000

Ever wondered what AJAX is? AJAX stands for Asynchronous JavaScript and XML. It is not a programming language in itself but rather a combination of different web development techniques. Furthermore, AJAX technology is not new though it has only been popularized recently especially by Google (Google Maps, GMail, Google Calendar, etc.)

At the heart of AJAX is JavaScript’s XMLHttpRequest Object. It is through this object that the browser asynchronously sends a request to the server thereby eliminating the need for a page reload. Without AJAX, the typical flow would be:

User enters data into a field
User presses submit button
Browser sends form data to server and waits for a response
Server responds back with an entire page
Browser shows the returned page from the server

While the above approach works and is still being used by lots of websites, it is pretty cumbersome for the server and for the browser thereby taking more time. With AJAX, the flow would be

User enters data into a field
User presses submit button
XMLHttpRequest sends data to server asynchronously
Server responds back only with the data needed and not the entire page
Javascript updates the sections of the page that only needs to be updated

While there are the same number of steps, the browser and especially the server only process data that needs to be processed and eliminates the need of an entire page reload. But how is it done?

There are many AJAX libraries available that simplifies things allowing the programmer to focus on the more important things to be done. You may use those and things will work just the same but since the purpose of this article is to introduce you to AJAX, allow me to show you my simple little function that handles all my AJAX needs.

/*
* ajax_call function – this does the hard work
* accepts three parameters:
* url – the url of the server side script to call
* callback_function – the function to call when data is retrieved from the server
* error_function – the function to call when an error occurs
*/
function ajax_call (url, callback_function, error_function) {
var xmlHttp = null;
try {
// for standard browsers
xmlHttp = new XMLHttpRequest ();
} catch (e) {
// for internet explorer
try {
xmlHttp = new ActiveXObject ("Msxml2.XMLHTTP");
} catch (e) {
xmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");
}
}
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4)
try {
if (xmlHttp.status == 200) {
// we got the data, let’s call the callback function
callback_function (xmlHttp.responseText);
}
} catch (e) {
// oops we have an error, call the error function
error_function (e.description);
}
}
// open the url
xmlHttp.open ("GET", url);
// and send the data
xmlHttp.send (null);
}

The function is pretty self-explanatory so I won’t explain every line here (I’m feeling lazy). Note that this function only handles GET requests and does not handle POST but it can be easily modified to handle POST as well. I’ll leave that to you. Using it is pretty simple. Here’s an example:

/*
* first we create a callback function to process the returned data
* in this example, we’ll just show the data in an alert box
*/
function fxn_callback (data) {
alert (data);
}

/*
* for error handling, we specify an error handler which simply
* shows an alert box containing a description of the error
*/
function fxn_error (err) {
alert ("Error: " + err);
}

/*
* then we call our ajax function passing three parameters
* the url – in this case a plain text file
* the callback function
* and our error function
*/
ajax_call ("somefile.txt", fxn_callback, fxn_error);

As you can see, it’s pretty simple. Also you may notice that we’re just returning a text file instead of an XML file. Well, that’s the beauty of it. XMLHttpRequest will return exactly what the server gave it back – XML, HTML, or just plain text and it’s up to your callback function to process that data. In my case, I prefer returning data in plain text so my server side script (PHP in this case) looks something like this.

// do some work here based on the data passed to us via GET …
echo "our return value";
exit;
?>

See how I echo the return value in my PHP script? That’s important because what’s been echoed in my PHP script is the data that will be returned to our AJAX function. Also, I added “exit;” at the end of my script to make sure that no extra data will be sent back.

To sum it all up… AJAX is not new – it’s been there for a while but rather untapped by the majority of web developers. AJAX is pretty easy to understand because it’s not a new programming language. It’s just plain old Javascript. Lastly, AJAX can process both XML and plain text data, it’s really up to you to choose.

Share this Post through Social Bookmarking