It’s quite easy to use: simply load the JavaScript file at the end of your HTML file, and have it point on your JPEG image to an default X/Y position.

<script language="javascript" type="text/javascript" src="watermarker.js"></script>
<script language="javascript" type="text/javascript">
setWatermark("images/mywatermark.jpg",-4,-5);
</script>

And voila, you can toggle your JPEG overlay, move it around, change it’s alpha transparency and reset it to its default position.

A small demo is available here.

watermarker.js (7.8k)

Because graphic designers care more about the look and site designers care more about accessibility and usability, it’s often the developers’ role to satisfy them both. So here are the tricks I use to make stylish controls look cool when JavaScript is activated, and usable when it is not.

Being mainly a PHP backend programmer, I hate to see the design cripple the code. Therefore, I always make sure that stylish and standard controls end up sending the same data to the server.

In this post, I cover buttons, check boxes and radio buttons, and provide a simple PHP helper that automatically generates the code. You might also want to check out the demo page to have an idea of what it looks like.

Buttons

Without a doubt, this is the easiest one. We usually use an A tag with an on-click or javascript: URL event to show buttons when JavaScript is enabled. The reason is: the input-image tag results in drawing tiny dashed borders upon click, and that kind of kills the nice shadow effects.

Note that I use the CSS image cropping technique, well described by the guys at UXD (or in french at Quantik Solutions).
So the typical JavaScript code for a button would be (I compacted the style sheet because it’s pretty long) :

<style type="text/css">
.button {
 border: 0; margin: 0; padding: 3px 0 0 0;
 background: transparent url(btn_bg.gif) no-repeat 0 0;
 display:block; width: 146px; height: 28px;
 overflow: hidden; font-family: Arial, Helvetica, sans-serif;
 text-decoration: none; font-weight: bold; color: black;
 outline: none; text-align: center;
}

.button:hover {
 background: transparent url(btn_bg.gif) no-repeat 0 -54px;
}

.button:active {
 background: transparent url(btn_bg.gif) no-repeat 0 -103px;
}
</style>

<h1>Button</h1>
<a class="button" href="javascript:submitForm('formName');"
    title="Send">Send</a>

The no-JavaScript code could be simpler:

<h1>Button</h1>
<input type="submit" name="submit" value="Send" />

Finally, the JavaScript/no-JavaScript condition display is done using document.write and the noscript tag.

<h1>Button</h1>
<script type="text/javascript">
document.write('<a class="button" href="javascript:submitForm(\'formName\');"
    title="Send">Send</a>');
</script>
<noscript><input type="submit" name="submit" value="Send" /></noscript>

Check boxes

This one is a little more complex, but not as much as radio buttons (which I kept for dessert). It is basically the same principle as the button, except that JavaScript required to control the checking and unchecking action when in stylish mode (while this was being done with CSS for the buttons).

First, we define a simple CSS for checked and unchecked states:

<style type="text/css">
.checked {
 background-color: black;
 width: 20px;
 display: inline-block;
 text-decoration: none;
 padding-left: 20px;
}
.unchecked {
 background-color: silver;
 width: 20px;
 display: inline-block;
 text-decoration: none;
 padding-left: 20px;
}
</style>

Then we create the check box, the stylish one first in JavaScript, and the standard one right after in a noscript tag.

<script type="text/javascript" language="javascript">
// Write the clickable A tag
document.write('<a id="checkbox1" href="#"
    onclick="toggleStylishCheckbox(\'checkbox1\', \'val\', \'checked\', \'unchecked\');"
    class="unchecked"></a>');
// Write the hidden input tag
document.write('<input type="hidden" name="checkbox1" id="checkbox1_val" value="" />');
</script>
<noscript><input type="checkbox" name="test1" value="val" /></noscript>
Check box label<br />

Finally, we need to include the control code that enables or disables the stylish check box, called by the on-click event.

<script type="text/javascript" language="javascript">
function toggleStylishCheckbox(id, value, classOn, classOff) {
  if (document.getElementById(id+"_val").value != "") {
    document.getElementById(id+"_val").value = "";
    document.getElementById(id).className = classOff;
  } else {
    document.getElementById(id+"_val").value = value;
    document.getElementById(id).className = classOn;
  }
}</script>

Radio buttons

This one is the trickiest: you need JavaScript to also to uncheck the previously checked control when checking a new one. Thus, we need to keep track of which group each radio buttons are, so we can quickly access its siblings.

The script goes pretty much as the check boxes one, but with a twist.You first need to define a checked and unchecked class for your radio buttons. You can use the same one as for check boxes.

Then we create the radio button, the stylish one first in JavaScript, and the standard one right after in a noscript tag.

<script type="text/javascript" language="javascript">
// Register the button in the group
var radioGroup_1;
if (radioGroup_1 == undefined) {
	// This is the first element, create the group
	radioGroup_1 = ["stylishRadio_1"];
} else {
	// This is not the first element, add to the group
	radioGroup_1.push("stylishRadio_1");
}

// Write the actual button code
document.write('<a id="stylishRadio_1" href="#"
    onclick="toggleStylishRadio(\'stylishRadio_1\', \'radioGroup_1\', \'1\', \'checked\', \'unchecked\');"
    class="checked"></a>');

// Create an input hidden for the group if it doesn't exist
if (!document.getElementById("radioGroup_1")) {
	document.write('<input type="hidden" name="set1" id="radioGroup_1" value="1" />');
}
</script>

<noscript>
<input type="radio" name="set1" value="1"checked="checked" />
</noscript>
Set 1, Option 1<br />

Finally, we need to include the control code that enables or disables the stylish radio buttons and their siblings, called by the on-click events.

<script type="text/javascript" language="javascript">
function toggleStylishRadio(id, groupName, value, classOn, classOff) {
  // Get the group
  var group = eval(groupName);

  // Process each radio button within it
  for (var i=0;i<group.length;i++) {
    // Get the class for this button
    var myClass;
    if (group[i] == id) {
      myClass=classOn;
    } else {
      myClass=classOff;
    }

    // Set the class
    document.getElementById(group[i]).className = myClass;
  }

  // Update the hidden input
  document.getElementById(groupName).value=value;
}
</script>

PHP helper

As you probably noticed, there is a lot of repetitive markup one need to include for every single check box or radio button. Duplication and maintenance is a pain, so why not let a PHP script do it?

Here’s the code for a PHP helper that handles the check boxes and the radios buttons automagically. This helper has been made for CodeIgniter, but can be used without it.

I wrote it as a demonstration, and there are many improvements to do. Including the JavaScript control scripts in a separate JavaScript file, for instance, and wrapping check box and radio buttons creation into a function to reduce the amount of repeated JavaScript code. Nonetheless, it works and can be useful as is for simple projects.

Also note that I did no helper for the buttons, as it is pretty simple, and the HTML markup varies a lot from project to project.

stylishControls_helper.phps (6 KB)

In theory and technologically, we could determine what timezone the user is in by:

• Using a geo location database to guess their longitude and latitude, and then find the probable timezone from it ;
• Using JavaScript to read the user’s workstation clock and calculate the probable timezone from it. You can see a live demo here.

Geo location, while pretty simple nowadays with free databases floating around, leaves us with a problem: the free databases are often not good enough to pin point a precise longitude and latitude, which will cause garbage in and garbage out when trying to translate it to a timezone. Moreover, the non-free and precise databases are pretty expensive compared to the added value of timezone detection, and are most likely not worth buying just for this purpose.

JavaScript clock reading on its side offers a pretty simple yet functional solution. The two downsides are:

• It is impossible to detect the timezone for users who disabled JavaScript (a very few in the AJAX world).
• The precision depends on the exactness of the users’ computer clock settings, as its the piece of information we base our calculation on.

Here are the three macroscopic steps for the detection:

• Try to detect the user’s timezone through JavaScript, then send it via an XML-HTTP call to a script that will save it either as a cookie or as a session. Alternatively, you could use the JavaScript setcookie function.
• If detection is impossible (JavaScript is disabled), try to read the previously detected timezone in a cookie.
• If no timezone can be detected, use a default one (or chain in the geolocation method).

The detection code itself is:

function setTimeZone() {
 	var xmlhttp;
 	timezone = "EDT";	/* Initialize httpRequest object */
 	if (window.ActiveXObject) {
 	 	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 	} else if (window.XMLHttpRequest) {
 	 	xmlhttp = new XMLHttpRequest();
 	}
 	xmlhttp.open("POST", "/timezone-controller.php",true);
 	xmlhttp.onreadystatechange=function() {
 	 	if (xmlhttp.readyState==4) {
 	 	 	// Do nothing
 	 	}
 	}

 	xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 	var visitortime = new Date();
 	xmlhttp.send('epoch='+visitortime.getTime()/1000+
 	 	'&timezoneoffset='+visitortime.getTimezoneOffset()/60);
} setTimeZone();

I personally prefer to use the epoch value rather than the timezoneoffset one, as, in my experience, local timezone settings are more often incorrectly set than local time.

In conclusion, it is possible to detect your users’ timezone in a fairly simple way using JavaScript, so you can present them dates and times relative to their location, without having to ask them.

However, the method being imperfect, the safest way to determine their exact timezone will always be to ask them. Thus, the implementation of this method shouldn’t replace the parameter in their profile.

World timezone map found on netschool.de.
Article previously published in French at Quantik Solutions.
Code distributed under the LGPL license.

Here are a few good ones:

• Styling File Inputs with CSS and the DOM
• Creating a table with dynamically highlighted columns like Crazy Egg’s pricing table
• Hyperlink Cues with Favicons
• CSS Dock Menu
• CSS Speech Bubbles
• CSS: Menu Descriptions
• Time Sensitive CSS Switcher

Enjoy!