This gave me the idea to create a script that checks for plug-ins installed in a browser. I know there are a lot of scripts of this nature online, but if you have the time, check out mine as well, you might find it useful.

The basic idea was to be able to do something like this:

if(plugin.available) {
	do this;
} else {
	do that;
}

In standard compliant browsers it’s pretty easy to check if a plug-in is installed. You use the navigator object and check the mimeTypes property.

if(navigator.mimeTypes && window.console && window.console.log){
	for(var p in navigator.mimeTypes){
		window.console.log(navigator.mimeTypes[p]);
	}
}

Let me explain the code above a bit. We are doing what is called object detection or feature detection. We are basically testing to see if the browser supports a certain method or property. In this case we are first testing to see if the browser supports the mimeTypes property of the navigator object.

This property returns the mimeTypes that the browser in question supports. Then we test to see if our browser supports the console object and it’s log method.

If all those conditions are met, then we loop through all of the items in the navigator.mimeTypes property and log each one in the console.

We will get a list of objects that represent our installed plug-ins. We can log the type of each item to see the mimeType.

if(navigator.mimeTypes && window.console && window.console.log){
	for(var p in navigator.mimeTypes){
		window.console.log(navigator.mimeTypes[p].type);
	}
}

You will get something like this:

application/googletalk
application/vnd.gtpo3d.auto
application/x-CorelXARA
application/vnd.xara
image/vnd.djvu
image/x.djvu
image/x-djvu
image/x-iw44
image/x-dejavu
image/djvu

The actual content that will be logged in the console depends on what plug-ins you have installed, so your results may be different from mine.

The problem is that in IE, the navigator.mimeTypes gives us no info about the plug-ins installed(Thanks Microsoft). If we want to check for a plug-in in IE we have to use the ActiveX control. Again, we have to do a little bit of JavaScript feature detection. Since IE is the only browser that recognizes ActiveX controls, if we try to create a new ActiveXObject without checking for support first, standard compliant browsers will throw errors.

We first check to see if the browser knows what an ActiveXObject is:

if (typeof ActiveXObject != 'undefined') {
	try {
		new ActiveXObject('ActiveXObjectName');
	}
	catch (err) {
	}
}

Then we use a try{} catch(){} statement, because if we did something like:

if(typeof new ActiveXObject('ActiveXObjectName') != 'undefined'){
	....
}

IE would throw an error if we passed in an argument it did not recognize.

So let’s get started on our code. First we need to create an object that we will use to store information on our plug-ins in:

var installedPlugins = {
};

The next step is to add properties to that object. A very simple one to add is support for Java:

var installedPlugins = {
	'java': navigator.javaEnabled()
};

If Java is installed, installedPlugins.java will return true , else it will return false.

The next step is to create a self invoking anonymous function. This is done to protect the global scope.

(function(){
....
})()

Now we need to create an object that holds the plug-ins we want to check for. There are literally hundreds of browser plug-ins on the out there, I have made this script to test only for some of the most popular.

var plugins = {
	'flash': {
		'mimeType': ['application/x-shockwave-flash'],
		'ActiveX': ['ShockwaveFlash.ShockwaveFlash', 'ShockwaveFlash.ShockwaveFlash.3', 'ShockwaveFlash.ShockwaveFlash.4', 'ShockwaveFlash.ShockwaveFlash.5', 'ShockwaveFlash.ShockwaveFlash.6', 'ShockwaveFlash.ShockwaveFlash.7']
	},
	'shockwave-director': {
		'mimeType': ['application/x-director'],
		'ActiveX': ['SWCtl.SWCtl', 'SWCt1.SWCt1.7', 'SWCt1.SWCt1.8', 'SWCt1.SWCt1.9', 'ShockwaveFlash.ShockwaveFlash.1']
	},
	..........
	'quicktime': {
		'mimeType': ['video/quicktime'],
		'ActiveX': ['QuickTime.QuickTime', 'QuickTimeCheckObject.QuickTimeCheck.1', 'QuickTime.QuickTime.4']
	},
	'windows-media-player': {
		'mimeType': ['application/x-mplayer2'],
		'ActiveX': ['WMPlayer.OCX', 'MediaPlayer.MediaPlayer.1']
	}
};

Our object contains a list of plug-in names. Each plug-in has two properties: mimeType and ActiveX. mimeType is used for checking in standard compliant browsers and ActiveX is used for IE.

Now that we have our plug-ins object set up, we need to create the function that will check for support:

//check support for a plugin
function checkSupport(p){
	var support = false;
	//for standard compliant browsers
	if (navigator.mimeTypes) {
		for (var i = 0; i < p['mimeType'].length; i++) {
			if (navigator.mimeTypes[p['mimeType'][i]] && navigator.mimeTypes[p['mimeType'][i]].enabledPlugin) {
			support = true;
			}
		}
	}
	//for IE
	if (typeof ActiveXObject != 'undefined') {
		for (var i = 0; i < p['ActiveX'].length; i++) {
			try {
				new ActiveXObject(p['ActiveX'][i]);
				support = true;
			}
			catch (err) {
			}
		}
	}
	return support;
}

We start by creating a function called checkSupport(). This function accepts one parameter, or argument and that is the plug-in we are testing for. The function returns true if it finds that a certain mimeType or ActiveX control is supported by the browser and false otherwise.

Now that we have our function set up, we need to loop over the plug-ins in our plugins object and test to see if each one is installed or not.

//we loop through all the plugins
for (plugin in plugins) {
	//if we find one that's installed...
	if (checkSupport(plugins[plugin])) {
		//we add a property that matches that plugin's name to our "installedPlugins" object and set it's value to "true"
		installedPlugins[plugin] = true;
		//and add a class to the html element, for styling purposes
		document.documentElement.className += ' ' + plugin;
	}
	else {
		installedPlugins[plugin] = false;
	}
}

To test if a browser plug-in is installed you need to check the installedPlugins object. Like this:

if(installedPlugins.flash){
....
} else if(installedPlugins.quicktime){
....
} else if(installedPlugins.windows-media-player){
}

A class containing the plug-in’s name is added to the html element, just in case you need to style the page differently if a plug-in is installed/missing.

<html class="3dmlw djvu google-talk flash shockwave-director quicktime windows-media-player pdf vlc xara silverlight">

Please note that this script only checks for a few plug-ins, those which are most used. If you wish to check for another plug-in you will need to add the necessary info to the plugins object.

If you find any problems with the code or have any suggestions on how to improve it, please leave a comment.

You can create all kinds of fields: text, textarea, email, phone and even reorder the the fields using drag and drop. One thing i found was lacking though, is PayPal integration. But we can do that pretty easy with query strings.

A query string is the part of a URL that contains data to be passed to web applications. Here’s and example:

http://www.sliceratwork.com/contact?param1=value1&param2=value2&param3=value3

We can use query strings to send data to PayPal for things like donations or a payment form for a service, like I have here.

First you will need to have a licensed copy of gravity forms.

After you download and install the plugin, you will have to create a form.

In the admin panel, you need to go to Forms->New form. You will see something similar to this.

Click on the form and edit the title and description to something that suits you.

Now let’s add some fields to our form. You’ll find the form fields panel on the right side of the admin.

Now that you have added your fields you need to click on the Confirmation tab and tick the Redirect radio button and the Query String checkbox.

In the URL text field you need to add:

https://www.paypal.com/cgi-bin/webscr

and in the Query String field:

cmd=_xclick&business=example@example.com&item_name={Why ?:3}&amount={Amount:4}&currency_code={Currency:5}&return=http://www.example.com

Here  are a few of the parameters we are passing in the query string.

• business: that will be the email address you use for your PayPal account
• item_name: the item or service for which people are paying you
• amount: the amount of money they are sending you
• currency_code: the type of currency(USD, EUR, GBP)
• return: the URL to which people will be redirected after they make the PayPal transaction

The settings used above are purely for demonstrative purposes. Please replace them with your desired values.

To add a field reference to the query string,  place the text cursor where you want to insert the field and choose from the Insert form field select.

After you fill in the form and hit submit, you will be redirected to PayPal.

Notice that the business name, item description and amount appear in the top side of the PayPal interface.

After you complete the PayPal transaction you will be redirected to the URL you used for the return parameter.

Here is some useful info about PayPal objects and pre-populating PayPal fields.

<a href="http://www.google.com" target="_blank">Google</a>

There are two problems with this:

1. you have to go through all the links and add the necessary code
2. you can’t use the target attribute in XHTML strict. It will invalidate your code

We can use JavaScript to solve both of those problems. Here’s the code:

var hostname = window.location.hostname,
links = document.getElementsByTagName('a'),
pattern = /^https?:\/\/(www.)?/i;

for(var i=0, len = links.length; i<len; i++) {
  if(pattern.test(links[i].href) && links[i].href.toLowerCase().indexOf(hostname) == -1){
    links[i].target = "_blank";
    links[i].className += ' external';
  }
}

Here’s a short explanation of the code above.

First we store the hostname in a variable called hostname. The hostname is the part of the URL that contains your domain name , plus the domain extension.

In my case the hostname is sliceratwork.com. You can learn more about window.hostname here.

var hostname = window.location.hostname;

Now we grab all the links on the page and store a reference to them in a variable called links.

var links = document.getElementsByTagName('a');

Then we create a new RegExp that we will use to check the href attribute of each links and store that in a variable called pattern.

This RegExp checks to see if the protocol of the URL we are testing is either http or https. We want to filter things like mailto: links.

pattern = /^https?:\/\/(www.)?/i;

Now we cycle through the links using a for loop:

for(var i=0, len = links.length; i<len; i++) { ... }

We check to see if the current link’s href attribute matches our pattern:

if(pattern.test(links[i].href)){ ... }

and if it points to our domain or another one:

links[i].href.toLowerCase().indexOf(hostname) == -1

If both those conditions return true, we set that link’s target attribute to _blank and append “external” to it’s class(es).

links[i].target = '_blank';
links[i].className += ' external';

The target attribute makes the link open in a new window and the class is for styling purposes. For example all your links can be blue, but any external link will be pink.

a {
color: blue;
}

a.external {
color: pink;
}

I really like it because it has a lot of cool features like: it shows browser support for CSS properties, JS libraries autocomplete (like jQuery, Mootools and so on).  But I couldn’t find WordPress autocomplete anywhere.

After searching the web for a while, I found this. The file provided by ilovecolors.com is cool, but it has very few WordPress template tags, so I thought I’d add all the template tags on wordpress.org. So let’s get started.

First you need to install PHP in Aptana.

Open up Aptana and go to Aptana->Help->Install new software. A dialog box will appear. In the “Work with:” field type http://update.aptana.com/install/php then select Aptana PHP and install it.

Accept the license and restart Aptana. Now you need to go to Window->Preferences->Aptana->Editors->PHP->Editing->Templates.

Click “Import” and browse to the location of the WordPress template tags XML file. After that you should see some new entries in the Templates window. In the description field look for “WP:”.

Now to use the templates open up a PHP file and type for example the_. The autocomplete box will pop up and show all relevant results.

If you find any errors or have any suggestions about the code, please let me know in the comments section.

I bet most of you have heard of CSS sprites and their benefits.

If not, I’ll give you a crash course in sprites.

An image sprite is basically a matrix of images.You take a bunch of images and merge them into one. Then you use CSS background-position to control which part of the image you want to show.

Why would you do that, I hear you say?

The answer is simple: to cut down on HTTP requests. The more HTTP requests your web page makes, the longer it will take to load.

You may not feel the difference when there are few files involved, but when we are talking about over 1000 images, that’s a lot of HTTP requests.

Almost all web pages you’ll find on the Internet will have at least a few icons, like a RSS feed icon or a person icon for the login link.

One of the most used icon pack is the one from famfamfam (1000+ icons).

So let’s turn that icon pack into a sprite shall we? For this we’ll use the CSS Sprite Generator.

The process is pretty simple: download the ZIP file from famfamfam and upload it to the sprite generator. You can fiddle around with the options or leave them to their default values.

After you click “Create Sprite Image & CSS” you will be presented with a link to download the image sprite and the CSS code. You will get something like this:

.icon-add {background-position: 0 0;}
.icon-anchor {background-position: 0 -26px;}
.icon-application {background-position: 0 -52px;}
.icon-application-add {background-position: 0 -78px;}
.icon-application-cascade {background-position: 0 -104px;}
.icon-application-delete {background-position: 0 -130px;}

Save that file to something like icons.css and include it  in your page and copy the image sprite in your images folder. Make sure the paths in the CSS file file match the path of your image.

At the top of your icons.css file add the following rules:

.icon {
 display: inline;
 display: -moz-inline-stack;
 display: inline-block;
 zoom: 1;
 width: 16px;
 height: 16px;
 overflow: hidden;
 padding: 0;
 border: 0;
 margin: 0;
 vertical-align: middle;
 line-height: 0;
 font-size: 0;
 text-decoration: none;
 text-indent: -999px;
 background-color: transparent;
 background-image: url('../images/icons/icons.png');
}

Now to turn any element into an icon you need add the icon class and one of the classes from the icons.css file. Like this:

<span class="icon icon-application-delete" title="Delete">Delete</span>

You can turn any element into an icon: a span, a div, an anchor even a form input or button.

<span class="icon icon-hourglass-add">Add</span>
<button type="button" class="icon icon-hourglass-add">Add</button>
<input type="submit" class="icon icon-hourglass-add" value="Add" />

Although the tags are different they will all look the same:

I’ve also included desaturated version of the sprite, for inactive icons. To make an icon inactive simply swap the icon class with icon-disabled. Like this:

<span class="icon-disabled icon-hourglass-add">Add</span>

The result should be a greyed out icon.

I’ve made an icon reference page. To find out what class each icon has, simply hover over it.

Feel free to comment if you have anything to add or if you find something wrong in the article. Thank you.

What exactly does Google Chrome Frame do? Well it allows you to render web pages in IE using Chrome’s rendering engine, WebKit.

You’ll be able to use HTML5 elements such as canvas, CSS border-radius and have access to powerful CSS selectors. Basically you’ll have all the power of Google Chrome in IE. Cool huh?

So how do we use this great tool? Well here’s the catch: Google Chrome Frame is offered as a plugin.That means the user has to install it on their PC. You can’t just add a script tag in your markup and it will magically work.

So we need to make sure that the user installs Google Chrome Frame on their PC. What’s the best way to do that, I hear you say? Present it as an update of course. Inspiration for the idea .

IE required updates

See that yellowish line with the little shield on the left? That’s called the Information Bar. It displays information about security updates, missing plug-ins and stuff like that.That’s where we will show our missing plugin message.

I know what you are thinking: “Is this ethical? Aren’t you lying to users ?”. Well…let’s look at it this way: we want to change the default rendering engine of a browser (IE‘s Trident), to another one (Google Chrome’s WebKit)… so yeah, I consider that an update.

Ok here is where the technical stuff begins. First we need to include a meta tag in the <head> section of our document.

<meta http-equiv="X-UA-Compatible" content="chrome=1" />

This <meta> tag ensures that users running IE with Google Chrome Frame installed will see web pages rendered by Google Chrome Frame. Now we just have to worry about those who don’t have Google Chrome Frame. Easy huh?

We need to detect if a user has Google Chrome Frame installed. And we can do that in 2 ways: server-side detection or JavaScript.We are going to use JavaScript.

We need to include the CFInstall.js file, provided by the nice people at Google.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js" charset="UTF-8"></script>

Next we need to have another script were we will create our Information bar and do all of our configuration.I prefer to call mine config.js. Feel free to name it whatever you want.

<script type="text/javascript" src="scripts/config.js" charset="UTF-8"></script>

Here is the content of that file:

//add a class of js to the body tag for CSS purposes
document.getElementsByTagName('html')[0].className += ' js';

//read cookies
function readCookie(name){
    var cookieName = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ')
            c = c.substring(1, c.length);
        if (c.indexOf(cookieName) == 0)
            return c.substring(cookieName.length, c.length);
    }
    return null;
};

//we check for when the DOM has loaded and if the user has not closed our Information Bar
document.onreadystatechange = function(){
    if (document.readyState == "complete" && !readCookie('refuseChromeInstall')) {
        CFInstall.check({
            //disable the default prompting mechanism
            preventPrompt: true,

            //if Google Chrome Frame is missing we execute the folowing function
            onmissing: function(){
                //create the Information Bar
                var updateBar = document.createElement('div');
                updateBar.id = 'updateBar';

                updateBar.onmouseover = function(){
                    this.className = 'over';
                };
                updateBar.onmouseout = function(){
                    this.className = '';
                };

                //when the user clicks on the Information Bar, open a popup with the Google Chrome Frame terms of service page
                updateBar.onclick = function(){
                    window.open('http://www.google.com/chromeframe/eula.html', 'GCFInstall', 'width=760, height=500');
                };

                var updateMessage = document.createElement('div');
                updateMessage.id = 'updateMessage';
                updateMessage.appendChild(document.createTextNode('Internet Explorer is missing updates required to view this site. Click here to update...'));
                updateBar.appendChild(updateMessage);

                var closeUpdateBar = document.createElement('div');
                closeUpdateBar.id = 'closeUpdateBar';
                closeUpdateBar.onclick = function(){
                    //if the user chooses not to install Google Chrome Frame, we set a cookie, so as not to show the Information Bar on every page refresh
                    document.cookie = 'refuseChromeInstall=1';

                    //remove the Information Bar
                    document.getElementsByTagName('body')[0].removeChild(document.getElementById('updateBar'));
                };

                //append the close button to our Information Bar
                updateBar.appendChild(closeUpdateBar);

                //append the Information Bar to our body element
                document.getElementsByTagName('body')[0].appendChild(updateBar);
            }
        });
    }
};

Now that we have our Information Bar created, we need to give it some <style>;

#updateBar {
	width: 100%;
	padding: 5px 0px;
	border-bottom: 1px solid #666;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 10000;
	font-family: Bitstream Vera Sans,verdana,sans-serif !important;
	font-size: 11px !important;
	color: #000 !important;
	background: #FFFFE1;
	cursor: default;
}

* html #updateBar {
	position: absolute;
	top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop : document.body.scrollTop);
}

#updateBar.over {
	color: #fff !important;
	background: #3399ff;
}

#updateMessage {
	height: 16px;
	line-height: 16px;
	padding: 0px 23px;
	background: url(../images/icons/install-shield.gif) 3px 0px no-repeat;
}

#updateBar.over #updateMessage {
	background-position: 3px -16px;
}

#closeUpdateBar {
	width: 16px;
	height: 16px;
	position: absolute;
	top: 5px;
	right: 1px;
	z-index: 10001;
	background: url(../images/icons/close.gif) 0px 0px;
}

#updateBar.over #closeUpdateBar {
	background-position: 0px -16px;
}

A quick tour of how things are supposed to work:

When a user that has Google Chrome Frame installed views the site, everything’s fine and dandy. They are using the WebKit rendering engine and the page show’s up nicely. If a user does not have Google Chrome Frame installed, they will be prompted by the Information Bar to install it as an update.

When the user clicks on the Information Bar, a popup window appears with the Google Chrome Frame Terms of Service page and two options: accept and install the plugin or cancel.

If the user chooses not to install Google Chrome Frame, we don’t want to bug them every time they refresh or leave a page. So when the user clicks the little close button on the right side of the Information bar, the Information Bar will no longer appear. They will be prompted to install the plugin next time they view the website.

Note that the Information Bar will only appear if you view the demo page in IE and the blue <div/> will only spin in a WebKit based browser or in IE but after you install Google Chrome Frame.

Here’s a screenshot of WebKit transitions working in IE8.

WebKit transitions working in IE8

You will need to restart your browser after the installation has completed in order to see the effects.

Today we will see which browsers do support text-shadow and to what extent.

Let’s have a look at the syntax proposed by the W3C:

h1 { text-shadow: 2px 2px 1px #000; }

Using the above rule we should get a result similar to the image below, providing you are viewing the page in a browser that supports text-shadow.

Let’s examine the rule above.

h1 { text-shadow: top-offset left-offset blur-radius color; }

top-offset

defines the top offset of the drop shadow.It can be positive, negative or 0 (zero).

left-offset

defines the left offset of the drop shadow.It can be positive, negative or 0 (zero).

blur-radius

defines the amount of “fuzzines” of the drop shadow

color

defines the color of the drop shadow

You can change the opacity of the drop shadow by using rgba.

h1 { text-shadow: 2px 2px 1px rgba(255, 0, 0, 0.5); }

You could also add multiple text-shadows, but the effect might get a little ugly.

h1 {
    text-shadow: 2px 2px 1px #00ff00,
	-2px -2px 1px #ff0000,
	-3px 3px 1px #0000ff;
}

The code above produces the following results.Nasty huh?

Of course Microsoft had to do things differently, so let’s have a look at IE‘s implementation of text-shadow.

h1 { filter: Shadow(Color=#000000, Direction=135, Strength=3); }

Color

Sets or retrieves the value of the color applied with the filter.

Direction

Sets or retrieves the direction that the filter’s effect is offset.

Enabled

Sets or retrieves a value that indicates whether the filter is enabled.

Strength

Sets or retrieves the distance, in pixels, that a filter effect extends.

Excerpt taken from Internet Explorer Developer Center.

If you add that rule to your CSS file, you may find it doesn’t do anything, that’s because the element you are targeting, in this case the h1 tag, needs to have another “Microsoft magical property”, named hasLayout.

Here is how your h1 tag, should look in IE.

As you can see IE‘s way of rendering text-shadow is not that nice.IE‘s filters do not allow for the same effects as the W3C‘s implementation of text-shadow like multiple shadows for example and also the font is a bit jagged.

So here is the final code:

h1 {
    text-shadow: 2px 2px 1px #000; /* used for standard compliant browsers */
    filter: Shadow(Color=#000000, Direction=135, Strength=3); /* used for IE */
    zoom: 1.0; /* used to ensure that the element hasLayout */
}

Below is a list of browsers that support text-shadow:

• Firefox 3.5: supports text-shadow, rgba on text-shadow and multiple text-shadows
• Safari 3: supports text-shadow, rgba on text-shadow.has some bugs rendering multiple shadows
• Google Chrome 3: supports text-shadow, rgba on text-shadow and multiple text-shadows
• Opera 9: supports text-shadow, and multiple text-shadows
• Opera 10: supports text-shadow, rgba on text-shadow and multiple text-shadows
• IE5.5 −> 8: supports a poor implementation of the text-shadow property
• Konqueror: not tested.
• iCab: not tested.

If you need your text to have a consistent drop shadow effect, regardless of the browser it’s viewed in, you should consider a font replacing technique such as cufón, or the oldy but goldy sIFR.

There might be other browsers that support text-shadow, if you find them please let me know and I’ll add them to the list.