Slightlymore » HTML / XHTML

CSS Naked Day

Clinton Montague — Sun, 05 Apr 2009 16:12:10 +0000

What a bloomin’ marvellous idea. On CSS naked day (9th April this year), you might notice a lot of websites loose thier styling. It’s the brain child of Dustin Diaz, and it’s aim is to help us all to write more semantic (X)HTML. By considering the design with no CSS, it forces us to write better and better structured markup. Will you be joining in this year?

Flash and the z-index problem, solved

Clinton Montague — Tue, 24 Mar 2009 21:14:08 +0000

I was always told that Flash would render on top of everything else. That’s it. There’s no way around it. It meant that whenever I had a design using, say, suckerfish menus, I’d have to be careful to ensure that there was enough space below the menu to accommodate for Flash’s nasty little habit. It turns out that the notorious they were wrong. Again. It’s amazing just how many times ‘they’ don’t get it quite right, and that the majority of people still believe them.

Just a quick side note – I’ll be using the excellent sfwobject.js in this tutorial rather than embedding the flash directly in the HTML.

The problem

By default, the Flash plugin will do a weird thing. Instead of being displayed inside the browser, it actually makes a new window on top of the browser which synchronises it’s position with where you’d expect the flash should be. (Well, actually it’s a bit more complicated than that, but I won’t bore you with the nitty-gritty). This means that rather annoyingly, unless you know the fix, flash will always be on top of your other content. Even if you set the z index of the flash to 0 and of your content to a bazillion. Take a look at the example.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Flash and the z-index problem. Solved</title>
<script type="text/javascript" src="./swfobject.js"></script>
<style type="text/css">
	#test
	{
		position: absolute;
		top: 300px;
		left: 300px;
		width: 400px;
		background-color: #ccc;
		padding: 10px;
		color: #333;
		font-family: georgia;
		font-size: 2em;
	}
</style>
</head>
<body bgcolor="#ffffff">
<div id="flash">This is some flash content - you'll need the flash plugin to see it</div>
<div id="test">HTML on top of the flash. This page was created for the tutorial <a href="http://slightlymore.co.uk/wisdom/flash-and-the-z-index-problem-solved">Flash and the z-index problem. Solved</a> on <a href="http://slightlymore.co.uk">slightlymore</a>.</div>
<script type="text/javascript">
	var so = new SWFObject("wmode.swf", "wmode.swf", "550", "400", "8","#ffffff");
	so.write("flash");
</script>
</body>
</html>

The solution

The solution is simple. With an extra parameter, you can force the flash to render in a different window mode. The window mode that’s of interest to solve this problem is ~~transparent~~ opaque (see the comment by philip). It means (again, in simple terms) that the flash is this time rendered not only inside the browser window, but as if it were a normal image in the document flow instead of in a separate window on top of the browser window. With swfobject, it’s almost too easy.

1	so.addParam("wmode", "opaque");

Or if you want to continue being old-school, you could use the following line:

1	<param name="wmode" value="opaque" />

Adding everything together will leave you something similar to the code below. Again, I have prepared an example page for you to look at.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Flash and the z-index problem. Solved</title>
<script type="text/javascript" src="./swfobject.js"></script>
<style type="text/css">
	#test
	{
		position: absolute;
		top: 300px;
		left: 300px;
		width: 400px;
		background-color: #ccc;
		padding: 10px;
		color: #333;
		font-family: georgia;
		font-size: 2em;
	}
</style>
</head>
<body bgcolor="#ffffff">
<div id="flash">This is some flash content - you'll need the flash plugin to see it</div>
<div id="test">HTML on top of the flash. This page was created for the tutorial <a href="http://slightlymore.co.uk/wisdom/flash-and-the-z-index-problem-solved">Flash and the z-index problem. Solved</a> on <a href="http://slightlymore.co.uk">slightlymore</a>.</div>
<script type="text/javascript">
	var so = new SWFObject("wmode.swf", "wmode.swf", "550", "400", "8","#ffffff");
	// this next line is the important one
	so.addParam("wmode", "opaque");
	so.write("flash");
</script>
</body>
</html>

Grab the files

I have zipped up all the files used in this tutorial for you to download.

Application

I first saw this being implemented on www.mitchelsliwa.com and assumed that the man must have been dabbling with black magic. I’m currently working on a huge project which uses this code so that we can get a lightbox over a flash site. Where else have you seen this being used?

Progressive enhancement with CSS3

Clinton Montague — Thu, 18 Dec 2008 10:10:38 +0000

This rather good tutorial explains how to create brilliant 2.0-esque buttons using only text and CSS – NO IMAGES. It shows you how to take advantage of the slow emergence of browsers which understand CSS3 properties such as border radius and the like. Even if you’re not going to use this method, it’s a useful tool for the future

Better, faster and more robust rollovers with CSS sprites

Clinton Montague — Tue, 09 Dec 2008 19:35:57 +0000

Do you remember the olden days? You know, the ones where we had 56k modems, a mouse with only two buttons, and the only way to have a rollover state were those horrid MM_SwapImage javascript functions (or whatever they were called). I do. And I remember that it was actually only a small number of years ago. A large proportion of people are still using javascript for this task, maybe they’re stuck in their old ways. I want to show you a much sleeker, and if I’m honest, a much sexier way to do the same thing. If you can’t wait, I have put together an example.

So what’s a sprite

A sprite is essentially a picture. They can be 2d or 3d and are normally animated or move in some way. Strange to use a different word, but you know what us geeks are like. We like to make things sounds more complicated than they actually are, all the time. How many acronyms go into the technology of this page, for instance. WordPress is built in PHP using the MySQL database. It was uploaded with FTP, to a LAMP server which I manage using SSH. The pages are serverd over HTTP and are XHTML which is styled using CSS which is also used to position the PNG image in the header. Ok, ok, I’ll stop, you get the picture. So a sprite is an image. Think of a picture of Sprite^tm if that will help. (lol?)

What’s wrong with Javascript?

Nothing! Please, be my guest, continue using javascript until your heart is content. But it will become content. It’s a lot of work having to put your images in an array, get the hover states working independently and hitting your head against your desk. Then ofcourse, there’s always that annoying paranoid troglodyte of a client who has their javascript disabled so can’t see your beautiful handiwork.

Why is your CSS method so great then, huh??!

Sure, my client could have CSS disabled just like yours had javascript disabled. But then, my CSS disabling client is used to only seeing the web in 16pt times new roman with blue links. Using this CSS instead of swapping images will, believe it or not, improve the semantic meaning of your code. Which means google and friends will understand your site better too! Sounds too good to be true, doesn’t it! Shall we press on?

The theory

The idea here is to create a fully standards compliant, fully accessible and gracefully degradable graphical button using only HTML and CSS.

Let’s start with the the HTML for a graphic and turn it into a link, like a normal image link.

1	<a href="http://slightlymore.co.uk/"><img src="button.png" alt="My button" /></a>

Problem number 1: It’s not accessible. Well, sure, it’s got an alt tag, but let’s be pedantic here. Solution: Let’s remove the image and replace it with the text. After that, set the a tag to be displayed as a block (which allows you to specify the height and width), give it an id (so we can pick it out), give it a class of button (there will be other buttons like it so may as well use this to style it up) then use the picture as a background image.

1	<a href="http://slightlymore.co.uk/" class="button" id="sexy-button">Sexy button</a>

.button
{
	display: block;
	width: 184px;
	height: 35px;
}
#sexy-button
{
	background-image: url(sexy-button.png);
}

Great! Oh, except for the fact that the text is over the button. So let’s surround the text with a span, then tell the span to go away with CSS.

.button span
{
	position: relative;
	left: -9999px;
}

Wasn’t it supposed to move?

Welcome to the magic of CSS sprites. Remember how those rollover buttons were made of two graphics, one for the on state and one for the off state? Well use some photoshop glue to place them on top of each other (the off state at the top). I know, I know, it’s bigger than the size of the background, but that’s the awesome thing! Now, using only css, we can move the position of the background when the user rolls over the anchor tag using the :hover psuedo class.

.button:hover
{
	background-position: 0px -35px; /* moving up by the height of the button */
}

AND because it’s just a single image, the user won’t see the short delay and flicker when they roll over your button because the browser doesn’t have to load a new image!

The applications of this are immense. Just imagine having the on, off and active states all in one image and all controlled with your new friend, css. If you have gone on to use this, post a link to your new page!

And for graceful degradation:

Javascript disabled: Great, we didn’t use it anyway
CSS disabled: Great, you’ll see the text link
Google: Great, keep your text contextual (i.e. describe where the user will go instead of “click here”)
Screen readers: Great, there were no images involved so the program can read the text

You can download the files in the example page.

Seperating HTML, CSS and Javascript – unobtrusive javascript

Clinton Montague — Sun, 16 Nov 2008 19:43:53 +0000

Please note!! I have shamelessly stolen this article from my old and (even if I do say so myself) rather boring blog. So please ignore the terrible writing style! I’ll rewrite this article in the future, but until then, I present you with version 1.0

In todays world of ‘standards this’, ‘accessibility that’ and ‘ajax the other’, it can be a little overwhelming and confusing. How, for example, are you supposed to be able to add in all of this lovely AJAX scripting without being allowed to add javascript anywhere on your page to keep it accessible?!

Luckily, there is a way. Read on if you would like to know how this black magic is done…

First things first, let’s decide exactly what files we will need for the tutorial. There are three parts to a web page. The structure (xhtml), the styling (css), and thirdly, and behaviour (javascript). These should be three distinct parts. An HTML tag such as

1	<a style="text-decoration: underline;" onclick="doSomething()" href="somewhere.html">Click me</a>

is very naughty indeed.

Your (x)html should look as if it has no styling and no javascript applied to it (other than the ‘class’ and ‘id’ elements applied to a tag). How, then, are you supposed to get anything to do anything? The good news is that you’re ‘allowed’ to include css and javascript from other files, keeping your html looking tidy.


 
<script src="the_script.js" type="text/javascript"></script>
 
<script type="text/javascript"></script>

So, how to get event handers (onclick) etc from the external file into the tags of you html. Well there is a brilliant technology called the DOM (document object model). Using this, it is possible to find and edit the tags and their attributes. There are two great functions to do this with, getElementById and getElementsByTagName. Using these, the possibilities are endless! What you must do it load the html, then get the browser to do a little work and update the markup to do the dynamic things which you want it to do.

One function that they seemed to overlook was getElementsByClassName, which is quite strange considering the other two functions. Luckily, there are other developers in the world who have already noticed this, so there are many already written. I use Robert Nyman’s getElementsByClassName function.

So, to modify the tags, you first search for them using one of these javascript functions. Then, when you have found the tag (or group of tags) which you want to edit, you edit them with javascript. It’s really not as scary as it sounds if you write functions to do this for you, and luckily, I have written a function to do this for you. It has quite a few options, including changing the class name, adding html to the element (adding more functionality might need more explaination), and ofcourse adding the onclick attribute.

// usage: injectBehaviour ('myClass', {'onclick':functionName})
// options in the array are:
//		onclick
//		addclassname
//		replaceclassname
//		addtitle
//		replacetitle
//		htmlbefore
//		htmlafter
//		htmlreplace
//
//		if both add* and replace* are specified, 'replace' takes precidence
//
//		if htmlbefore / htmlafter are specified, they will be added before
//		or after the original innerHTML or the htmlreplace specified
function injectBehaviour(className, options)
{
	var elements=getElementsByClassName (document, "a", className);
	for (var i=0;i<elements.length;i++)
	{
		if (options["onclick"])
		{
			if (typeof (options["onclick"]) == "function")
			{
				elements[i].onclick=options["onclick"];
			}
			else
			{
				elements[i].onclick = function(){
										try{
											eval(options["onclick"])
										}
										catch (e) { alert(e); }
										return false};
			}
		}
		if (options["addclassname"])
		{
			elements[i].className+=(elements[i].className)? " " + options["addclassname"] : options["addclassname"];
		}
		if (options["replaceclassname"])
		{
			elements[i].className = options["replaceclassname"];
		}
		if (options["addtitle"])
		{
			elements[i].title+=elements[i].title ? " " + options["addtitle"] : options["addtitle"];
		}
		if (options["replacetitle"])
		{
			elements[i].title = options["replacetitle"];
		}
		if (options["htmlreplace"])
		{
			elements[i].innerHTML = options["htmlreplace"];
		}
		if (options["htmlbefore"])
		{
			elements[i].innerHTML = options["htmlbefore"] + elements[i].innerHTML;
		}
		if (options["htmlafter"])
		{
			elements[i].innerHTML = elements[i].innerHTML + options["htmlafter"];
		}
	}
}

Notice how in the onclick part of the function, it is a slightly more complicated than the other parts. This is so that you can either pass a ‘hard coded’ function (for example ‘alert(“Hello, world”)’) or pass a ‘dynamic’ function whose parameters might change depending on the element (if for example building a dynamic list). If the latter is true, I have surrounded the execution block with a try/catch statement just incase there are any syntax errors in the text you supply. To pass the element to this function, simply use the word ‘this’ and it will work. I realise that this is quite difficult to explain/understand in writing, so here is a coded example.

1
2
3

<a id="dave" class="makeMeSayHello" href="#">Click me!a>
 
injectBehaviour ("makeMeSayHello", {'onclick':'alert("The element with id "+this.id+" is saying hello!")'});

I know, this is a bit of a pointless script, but you get the idea.

Now, here’s the problem: You want to call this function LOADS of times, but you only have one onLoad handler for the body tag. What do you do?!??! Here’s your answer (aren’t you lucky!)

// allows for multiple onload functions to be added to the
// document. instead of using  use
// addOnload (function).
function addOnload(func) {
	var oldOnload = window.onload;
 
	if (typeof oldOnload == "function") {
		window.onload = function() {
			if (oldOnload) {
				oldOnload();
			}
			func();
		}
	}
	else {
		window.onload = func;
	}
}

So now all you do at the bottom of your page is this

1	<script type="text/javascript"></script>

So to sum up, never again will you be putting onAnything handlers ANYWHERE in your html, will you!

P.S. That doesn’t mean you can use this either!

1	<a href="javascript:myFunction()">Naughty</a>