• Speed up your Javascript part 1
• Speed up your Javascript part 2

This is an ongoing series of articles with specific Javascript examples that make sense.

a { text-decoration:none; }
a:hover { text-decoration:underline; }

The above example sets all anchors to have no underline text decoration, and the hover pseudo-class sets all anchors to have an underline on them. When the user hovers their mouse over a link, an underline will show under the link. When they move their mouse away, the hover pseudo-class stops taking effect and the underline is removed.

Pseudo-classes are supported with all modern browsers, but this support is only for the anchor element. Any attempt to use a pseudo-class on any other element will not work in Internet Explorer 6.

There are other pseudo-classes that can be used to provide a more usable experience for those that primarily use a keyboard to navigation through a page. The first of these is the focus pseudo-class (which take affect when the element gains focus – such as tabbing to the element). This pseudo-class can be used to style elements when they receive focus.

Building on the initial example, the addition of a focus pseudo-class will ensure that the same hover effects (in this case some underline text decoration) are applied when the user tabs focus to the anchor.

a { text-decoration:none; }
a:hover, a:focus { text-decoration:underline; }

This would be fine, except that Internet Explorer 6 doesn’t understand the focus pseudo-class at all! The solution is to use the active pseudo-class to extend the CSS rule.

a { text-decoration:none; }
a:hover, a:focus, a:active { text-decoration:underline; }

The order of the pseudo-class rules is important (and if you get the order wrong, you may experience some of the CSS rules displaying inconsistently across browsers). As a general rule, always put pseudo-classes in the following order:

link, visited, hover, focus, active

So, whenever you define a hover pseudo-class CSS rule, consider adding in a focus and then an active pseudo-class at the same time – it will help users that choose to use the keyboard to navigate your site.

With the following markup:

<div class="verticalCenteringOuter" id="moduleA">
	<div class="verticalCenteringMiddle">
		<div class="verticalCenteringInner">
			<b>Some vertical aligned content here</b>
		</div>
	</div>
</div>

Using the following CSS:

<style type="text/css">
#moduleA {
	height: 300px;
}
.verticalCenteringOuter {
	display: table;
	overflow: hidden;
}
.verticalCenteringMiddle {
	display: table-cell;
	vertical-align: middle;
}
</style>
 
<!--[if IE]>
<style type="text/css">
.verticalCenteringOuter {
	position: relative;
}
.verticalCenteringMiddle {
	position: absolute;
	top: 50%;
}
.verticalCenteringInner {
	position: relative;
	top: -50%;
}
</style>
<![endif]-->

Full credit on this to Yuhů (www.jakpsatweb.cz). Thanks for the inspiration on this one.

The solution is rather trivial – and also very simple to achieve.

Open the System Preferences application and choose Keyboard & Mouse then change the Keyboard Shortcuts option to “All controls” (this can also be toggled using Control-Function-F7 if you are so inclined).

You can now use the tab key to cycle through checkboxes (use the spacebar to select a checkbox when you have cycled to it) and radio buttons (you can use up/down or left/right arrow keys to toggle a radio button when the group is in focus).

A similar option is available in Safari (MacOSX as well as Windows) in the Preferences menu option (within the Edit menu). Select the Advanced tab and select “Press Tab to highlight each item on a webpage”. When enabled, this option allows you to cycle through all elements that can receive focus using option+tab (this includes standard links on the page as well).

I’d like to credit this “discovery” to Brad Jasper and Dylan Ryan at MacTips: Tips & Tricks – but the post is no longer available. Thanks for the heads-up guys!

Consider the following CSS and HTML code snippets that set up the problem with a link contained within a div that has an alpha transparency filter applied to it:

<style type="text/css">
.opaque { background: url(images/alphaTransparent.png) transparent no-repeat left top; }
</style>
<!--[if IE 6]>
<style type="text/css">
.opaque {
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src=images/alphaTransparent.png);
}
</style>
<![endif]-->

...
<div id="parent" class="opaque">
    <span id="child">Lorem <a href="http://www.codecouch.com">ipsum</a> dolor.</span>
</div>
...

The parent element has a class opaque applied to it which puts an image on the background of the element. In Internet Explorer 6 only, the background image is removed and the proprietary filter property is used. The link inside the child span is no longer clickable in Internet Explorer 6.

Make sure the parent element (the element with the filter applied to it) doesn’t have the position property set on it, and the child element (the element with the link in it) has to have relative position.

The following addition to the above code will make the link clickable:

<!--[if IE 6]>
<style type="text/css">
#child { position: relative; }
</style>
<![endif]-->

Since it only has to apply for Internet Explorer 6, the “fix” can be enclosed within the conditional comment that targets just that browser. This doesn’t require any javascript to work (unlike other solutions that have been posted) and degrades properly.

a { text-decoration: none; }
a:hover { text-decoration: underline; }

We could extend this to change the background and forground colour of the link to make it appear a little more “box-like” using something like this CSS code:

a {
	display: block;
	padding: 5px 10px;
	background-color: #000000;
	color: #FFFFFF;
}
a:hover {
	background-color: #CCCCCC;
	color: #000000;
}

If you wanted to have a background image on the anchor, then you could change the background-image when you hovered over the anchor. The CSS code might look like this:

a {
	display: block;
	padding: 5px 10px;
	background: #000000 url(img/anchor_off.gif) no-repeat left top;
	color: #FFFFFF;
}
a:hover {
	background: #CCCCCC url(img/anchor_hovered.gif) no-repeat left top;
	color: #000000;
}

This technique does suffer from a flaw, however. You will invariably see a flickering as you roll over the anchor for the first time due to the browser having to request the second image (assuming the file isn’t already in the browser cache).

This problem can be fixed by using the same image for both the normal and hover state of the anchor – just reposition the background image on hover. This is presented very well over at A List Apart where Dave Shea introduces the concept of CSS Sprites. The image below (195px wide, 30px high in size) shows how you might set this up:

The image above shows both states of the anchor… the initial state at the “left top” and the hovered state “100px” from the left of the image. The following CSS code shows how you can reposition the background image to show a different image on hover – without the flicker:

a {
	display: block;
	padding: 5px 10px;
	width: 95px;
	height: 30px;
	overflow: hidden;
	background: #000000 url(img/anchor_background.gif) no-repeat left top;
	color: #FFFFFF;
}
a:hover {
	background-position: 100px top;
	background-color: #CCCCCC;
	color: #000000;
}

You may have to deal with all the anchor pseudo classes to get the effect consistent in all browsers, and be sure to define them in the correct order… :link, :visited, :hover, :active.

Finally, Internet Explorer only supports pseudo classes on the anchor element. All other browsers support pseudo classes on all elements. You could use this technique on non-anchor elements, but would be forced to introduce some javascript to support Internet Explorer. A good working example of this is the popular Suckerfish dropdowns CSS menu solution that uses :hover on the list item element and attaches some javascript for Internet Explorer.

Now you want to click a link within the iframe content and have that perform some action on the parent page (maybe you want to submit a form on the parent page, maybe you want to adjust the height of the iframe on the parent page). And you start getting frustrated because the browser won’t let you access all your javascript functions/properties on another domain.

Communication from an iframe that has content from a domain other than the one the iframe is contained within is a constant source of frustration – as browsers prevent this kind of activity due to built-in security policies. The solution is actually relatively painless requiring the addition of an iframe (see the following diagram).

You can see a working example of this over at Sky Movies where the iframe is resized as the content within the iframe changes. This is being controlled from within the iframe.

Why do we need to implement a solution like this in the first place?

Because whilst the main page at movies.sky.com can set the height of the iframe, it cannot get the height of the iframe content… and the iframe document can get it’s height but it can’t set the height of it’s enclosing iframe.

Using the following example pages, we can create a demonstration of this technique. Following is the source of the main page (marked as [1] in the figure above) which contains the iframe and the function that will be used to resize the iframe.

<html>
<head>
	<title>Page hosted on example.com</title>
	<script type="text/javascript">
	function resizeIframeHeight(nHeight) {
		var iframe = document.getElementById('mainIframe');
		iframe.setAttribute('height', nHeight);
	}
	</script>
</head>
 
<body>
	<h1>This page is hosted on the example.com domain</h1>
	<p>The iframe below is hosted on the example.org domain</p>
	<iframe id="mainIframe" width="400" height="200" src="http://example.org/iframedDocument.html">Iframes not supported.</iframe>
</body>
</html>

Following is the source of the iframe page (marked as [2] in the figure above) which contains the extra iframe and some javascript that allows this technique to work.

<html>
<head>
	<title>Page hosted on example.org</title>
	<script type="text/javascript">
	function updateIframeHeight() {
		var iframe = document.getElementById('hiddenIframe');
		var newHeight = parseInt(document.body.offsetHeight,10) + 10;
		iframe.src = 'http://example.com/xssEnabler.html?height=' + newHeight;
	}
	</script>
</head>
 
<body onload="updateIframeHeight()">
	<h1>This page is hosted on the example.org domain</h1>
	<p>The iframe below is hosted on the example.com domain (and be styled to be hidden)</p>
	<iframe id="hiddenIframe" width="100" height="100" src="http://example.com/xssEnabler.html">Iframes not supported.</iframe>
</body>
</html>

The final source file resides on the original domain (marked as [3] in the figure above) and contains some javascript to strip out the height parameter and then pass this on to the function on the main page that resizes the iframe. It is referred to in the code above, as the content of the file at http://example.org/xssEnabler.html – and whilst it is saved as a .html file, it contains just the code you see below.

<script type="text/javascript">
	function getFirstParamFromLocation() {
		var pair = window.location.search.substring(1);
		var parts = pair.split('=');
		return parts[1];
	}
	var nHeight = getFirstParamFromLocation();
	try {
		window.top.resizeIframeHeight(height);
	} catch(e) {};
</script>

Obviously you would not be using example.com and example.org for your solution, they are used merely to identify the different domains you would use for each file.

...
<div id="parent" style="background-color:#F00;">
	<div id="child" style="float: left;">Floated element</div>
</div>
...

Given the child element is floated, it doesn’t affect the height of the parent element – and so the parent element remains with no height (and the red background colour is never shown).

The W3 describe floating an element and the use of a “clearing element” (a block level element with the clear CSS property set). This is not acceptable for all layouts. It would be nicer if all this could be carried out using CSS – providing a separation of content and layout into the bargain.

Rather than attempt to merely re-word much of what is already online, you can read about how the CSS for this works in more detail at Position is Everything. Whilst their implementation is slightly different to the one presented below, their description is excellent (and they are credited with bringing together all the threads to make this solution usable).

The clearfix solution below is our current “best practise” effort to date. We have switched from using the typical “.” to using a space ” ” in the content rule due to reports of some layout issues in Firefox.

<style type="text/css">
.clearfix:after {
	clear: both;
	display: block;
	content: " ";
	height: 0px;
	visibility: hidden;
}
.clearfix {
	display: inline-block;
}
/* Hide these rules from IE-mac \*/
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
li.clearfix {
	display: list-item;
}
/* End hide from IE-mac */
</style>

We extended the normal rules to include setting the correct display (list-item) for use on list items (as a direct result of some problems with floated lists). If you don’t care about IE-mac support (don’t forget that Microsoft finally retired IE 5 for the Mac) then you can avoid using the “commented backslash hack” all together.

Going back to our original HTML code, we can place the clearfix class on the parent element to ensure that it inherits the height of it’s floating child elements (and the red background will now show):

...
<div class="clearfix" id="parent" style="background-color:#F00;">
	<div id="child" style="float: left;">Floated element</div>
</div>
...

You can read more about the clearfix solution all over the place, including:

• Position is Everything
• 456 Berea Street
• Sitepoint

ReferenceError: console is not defined

It turns out that this is by design. If you want to make use of the console object that Firebug offers, you need to do so with a call to window.loadFirebugConsole() first.

A little bit of testing, and the following code can be safely put in your javascript source to enable use of the Firebug console object safely (without breaking other browsers).

if (window['loadFirebugConsole']) {
	window.loadFirebugConsole();
} else {
	if (!window['console']) {
		window.console = {};
		window.console.info = alert;
		window.console.log = alert;
		window.console.warn = alert;
		window.console.error = alert;
	}
}

Whilst you are at it, why not check out some of the other nifty commands available on the Firebug console object at the Get Firebug website.

<?
if (isset($_GET['xhttp'])) {
	$counter = date("d M Y h:m:s");
	echo $counter;
} else {
?>
<html>
<head>
<title>Test some XHTTP</title>
<script type="text/javascript">
function getHTTPObject() {
	var xmlhttp;
	/*@cc_on
	@if (@_jscript_version >= 5)
		try {
			xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (E) {
				xmlhttp = false;
			}
		}
	@else
		xmlhttp = false;
	@end @*/
	if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
		try {
			xmlhttp = new XMLHttpRequest();
		} catch (e) {
			xmlhttp = false;
		}
	}
	return xmlhttp;
};
 
function fetchData() {
	http = getHTTPObject();
	http.open('get', "<?= $_SERVER['SCRIPT_NAME']; ?>?xhttp=true", true);
	http.onreadystatechange = function() {
		if (http != null && http.readyState == 4) {
			document.getElementById('displayCounter').innerHTML = http.responseText;
		}
	};
	http.send(null);
};
 
function initPage() {
	http = null;
	pageTimerHandle = setInterval('fetchData()', 2000);
};
 
window.onload = initPage;
</script>
</head>
<body>
	<h1>Test page</h1>
	<p>This page is using AJAX to update the current time every two seconds.</p>
	<div id="displayCounter"><?= date("d M Y h:m:s"); ?></div>
</body>
</html>
<? } ?>

This block of code is PHP and basically tests to see whether a (GET) parameter (called xhttp) was passed in to the URL:

<?
if (isset($_GET['xhttp'])) {
	$counter = date("d M Y h:m:s");
	echo $counter;
} else {
?>

If the xhttp GET parameter was present in the URL, then the server time is sent back, otherwise the whole HTML page is delivered. This allows us to deliver two very different “pages” of data back to the browser using the same single PHP file.

The following block of code is used to output the full name of the PHP page being run (the file name) and merely removes the need to specify the file name in the code itself:

<?= $_SERVER['SCRIPT_NAME']; ?>

The final block of PHP that is prominent in the page is:

<?= date("d M Y h:m:s"); ?>

This writes out the current date and time to the page (and mimics the same date and time format that will be returned if the PHP file is requested with the GET parameter of xhttp added to it).

Everything else is just HTML and Javascript.