/*IE 7 and Modern Browsers*/
html>body #header {height: 25px;}

/*Modern Browsers (not IE 7)*/
html>/**/body #header {height: 25px;}

/*Firefox*/
#selector[id= header] {height: 25px;}

/*Hide from IE-Mac*/
/* Hide from IE-Mac \*/
#header {height: 25px;}
/* End hide */

/*IE 5*/
#header {height: 25px; height /**/:/**/ 50px;}
/*Second value will be ignored my IE 5 but not others*/

/*IE 6 and Below*/
* html #header {height: 25px;}
#header {_height: 25px;}

/*IE 7*/
*:first-child+html #header {height: 25px;}

/*Opera 9 and Below*/
html:first-child #header {height: 25px;}

/*Safari*/
html[xmlns*=""] body:last-child #header {height: 25px;}

Know any CSS hacks for browser detection that weren’t mentioned? Please share them!

The XML

The XML that I’m going to parse is a small phonebook with three people in it. Each person has a name, email, phone number, and an address. We are going to read in the information of each person and display them. To find out more about XML syntax see W3School’s XML Syntax.

<?xml version="1.0"?>

<phonebook>

	<person>
		<name>Joe A. Doyle</name>
		<email>joe@example.com</email>
		<phone_number>901-795-3338</phone_number>
		<address>3102 Burton Avenue Memphis, TN 38118</address>
	</person>

	<person>
		<name>Michael D. Montgomery</name>
		<email>MichaelDMontgomery@example.com</email>
		<phone_number>907-793-5822</phone_number>
		<address>3295 Kidd Avenue Anchorage, AK 99501</address>
	</person>

	<person>
		<name>Linda D. Serrano</name>
		<email>LindaDSerrano@example.com</email>
		<phone_number>978-793-2440</phone_number>
		<address> 3725 Christie Way Westborough, MA 01581</address>
	</person>

</phonebook>

Getting Start with jQuery

Let’s start off by including jQuery into our page.

Before we have jQuery parse the XML we need to make sure the DOM (Document Object Model) is loaded. We do this by simply adding the following code.

$(document).ready(function(){
	//Everything will go inside here…
});

Let The Parsing Begin

Inside the function above we start off with an AJAX request to read the XML file. The AJAX call will take 3 parameters: url, dataType, and success. Below is what the AJAX request should look like. The first parameter, url, points to where the XML that you want to parse is located (this may be different for you). After that we have the dataType parameter, here you put the type of data that you’re expecting back from the server in this case, XML. Coming to the third and final parameter is the success parameter, here when the AJAX request is successful it will run a function.

$.ajax({
	url: "phonebook.xml",
	dataType: "xml",
	success: function(xml){
	}
});

Inside the success function we start reading the XML in. Frist we add the following…

$(xml).find("person").each(function(){

});

Above we are looping through every ‘person’ node in the XML file. To actually get and print the information from inside each node of every ‘person’, we do the following…

var name = $(this).find("name").text();
var email = $(this).find("email").text();
var phone_number = $(this).find("phone_number").text();
var address = $(this).find("address").text();

document.write("Name: "+name+"
");
document.write("Email: "+email+"
");
document.write("Phone Number: "+phone_number+"
");
document.write("Address: "+address+"

");

The final code should look like this:

$(document).ready(function(){
	$.ajax({
		type: "GET",
		url: "phonebook.xml",
		dataType: "xml",
		success: function(xml){
			$(xml).find("person").each(function(){
				var name = $(this).find("name").text();
				var email = $(this).find("email").text();
				var phone_number = $(this).find("phone_number").text();
				var address = $(this).find("address").text();

				document.write("Name: "+name+"
");
				document.write("Email: "+email+"
");
				document.write("Phone Number: "+phone_number+"
");
				document.write("Address: "+address+"

");
			})
		}
	});
});

Avada

View | Download

BlackSapphire

View | Download

GrayMist

View | Download

Mullaco

View | Download

Organica

View | Download

Forgive me if it’s not perfect I wrote this a while back, but I have gone over everything and reworked most of it. With a little improvement on what I have provided this could become a robust anti spamming measure.

Features

• Completely dynamic
• Completely Random
• Uses JavaScript to load a new CAPTCHA image
• Config file to customizable just able everything easily

Preview

In this article I’m going to use images as my examples, so that my friends using Internet Explore will be able to see what they’re missing.

Syntax for border-radius

/*Mozilla*/
-moz-border-radius: /*horizontal and vertical radii*/;
-moz-border-radius-topleft: /*horizontal and vertical radii*/;
-moz-border-radius-topright: /*horizontal and vertical radii*/;
-moz-border-radius-bottomright: /*horizontal and vertical radii*/;
-moz-border-radius-bottomleft: /*horizontal and vertical radii*/;
/*WebKit*/
-webkit-border-radius: /*horizontal and vertical radii*/;
-webkit-border-top-left-radius: /*horizontal and vertical radii*/;
-webkit-border-top-right-radius: /*horizontal and vertical radii*/;
-webkit-border-bottom-right-radius: /*horizontal and vertical radii*/;
-webkit-border-bottom-left-radius: /*horizontal and vertical radii*/;

The ones under ‘Mozilla’ will work for all Mozilla-based browsers, that includes FireFox and the ‘WebKit’ ones work in Safari and Chrome.

Examples

As you can see CSS3 can be a huge time saver, no longer will we need to cut out images to make our corners round. Again, keep in mind that not all browsers support rounded corners. In browsers that don’t, the corners will appear as normal squared corners.

There are both good and bad things about removing some of the subpar articles from the old site. Such as, there will undoubtedly be 404 errors (page not found) that people will receive; this is obviously due to the fact that what you are looking for is no longer there. On the up side this will enable me to ensure the quality of the content on this site.

One of the few things that weres brought over from the old site is my CAPTCHA, but even that has been completely reworked. So if you would like an easily customizable CAPTCHA to use and dissect, check out CAPTCHA in the freebies section.

Tell me what your thoughts and opinions are, also don’t forget to subscribe to the RSS feed and to follow the site on Twitter.