Here’s a really simple jQuery method which will set two or more elements to the height of the largest of those elements. All you need to do is add a common class to the elements.

The HTML

Here’s some sample HTML to get us going:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div class="col1 sameheight" style="border: 1px solid red; float: left; margin-right: 10px">
 
This is a test
</div>
<div class="col2 sameheight" style="border: 1px solid red; float: left; margin-right: 10px">
 
This is a test
 
This is a test
</div>
<div class="col3 sameheight" style="border: 1px solid red; float: left; margin-right: 10px">
 
This is a test
 
This is a test
 
This is a test
</div>

<div class="col1 sameheight" style="border: 1px solid red; float: left; margin-right: 10px">

This is a test
</div>
<div class="col2 sameheight" style="border: 1px solid red; float: left; margin-right: 10px">

This is a test

This is a test
</div>
<div class="col3 sameheight" style="border: 1px solid red; float: left; margin-right: 10px">

This is a test

This is a test

This is a test
</div>

This will create three columns, each with a different amount of content (and therefore of a different size). Note that they all have a common class (sameheight)

The JavaScript

First we’ll create a jQuery plugin which finds each element with a specified class and measure its height. We’ll keep track of the greatest column height with a variable, initially set to 0; if a column has a height greater than the current greatest column height, we’ll update this variable with the height of this column.

1
2
3
4
5
6
7
8
9
10
11

<script type="text/javascript">
    $.fn.equalHeightify = function() {
        var highest = 0; // keep track of the greatest height
        $(this).each(function() { // for each element
            if ($(this).height() > highest) { // compare heights
                highest = $(this).height();
            }
        });
        $(this).height(highest); // set new height
    }
</script>

<script type="text/javascript">
	$.fn.equalHeightify = function() {
		var highest = 0; // keep track of the greatest height
		$(this).each(function() { // for each element
			if ($(this).height() > highest) { // compare heights
				highest = $(this).height();
			}
		});
		$(this).height(highest); // set new height
	}
</script>

Now we can run our class on the three columns:

1
2
3
4
5

<script type="text/javascript">
    $(document).ready(function() {
        $('.sameheight').equalHeightify();
    });
</script>

<script type="text/javascript">
	$(document).ready(function() {
		$('.sameheight').equalHeightify();
	});
</script>

The Result

You can use this plugin multiple times; just set a different class on each set of columns you want to set as the same height.

The Demo

Here’s our finished product with just a little bit of CSS to get it started:

• Menu Item 1
  • Sub item 1.1
  • Sub item 1.2
  • Sub item 1.3 »
    • Sub sub item 1.3.1
    • Sub sub item 1.3.2
    • Sub sub item 1.3.3
• Menu Item 2
  • Sub item 2.1
  • Sub item 2.2
  • Sub item 2.3
• Menu Item 3
  • Sub item 3.1
  • Sub item 3.2
  • Sub item 3.3

The HTML

First, the easy part; we need a list of menu items.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<ul id="dd_menu">
<li><a href="#">Menu Item 1</a>
<ul>
<li><a href="#">Sub item 1.1</a></li>
<li><a href="#">Sub item 1.2</a></li>
<li><a href="#">Sub item 1.3 &raquo;</a>
<ul>
<li><a href="#">Sub sub item 1.3.1</a></li>
<li><a href="#">Sub sub item 1.3.2</a></li>
<li><a href="#">Sub sub item 1.3.3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Menu Item 2</a>
<ul>
<li><a href="#">Sub item 2.1</a></li>
<li><a href="#">Sub item 2.2</a></li>
<li><a href="#">Sub item 2.3</a></li>
</ul>
</li>
<li><a href="#">Menu Item 3</a>
<ul>
<li><a href="#">Sub item 3.1</a></li>
<li><a href="#">Sub item 3.2</a></li>
<li><a href="#">Sub item 3.3</a></li>
</ul>
</li>
</ul>

<ul id="dd_menu">
<li><a href="#">Menu Item 1</a>
<ul>
<li><a href="#">Sub item 1.1</a></li>
<li><a href="#">Sub item 1.2</a></li>
<li><a href="#">Sub item 1.3 &raquo;</a>
<ul>
<li><a href="#">Sub sub item 1.3.1</a></li>
<li><a href="#">Sub sub item 1.3.2</a></li>
<li><a href="#">Sub sub item 1.3.3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Menu Item 2</a>
<ul>
<li><a href="#">Sub item 2.1</a></li>
<li><a href="#">Sub item 2.2</a></li>
<li><a href="#">Sub item 2.3</a></li>
</ul>
</li>
<li><a href="#">Menu Item 3</a>
<ul>
<li><a href="#">Sub item 3.1</a></li>
<li><a href="#">Sub item 3.2</a></li>
<li><a href="#">Sub item 3.3</a></li>
</ul>
</li>
</ul>

This is pretty simple markup. All we have are some nested lists, and one ID attribute to identify the menu. If you want to add in some fancy styling you might like to sprinkle in a few class attributes.

The JavaScript

This is a jQuery-powered menu, so we’ll need to throw in a reference to jQuery. You can download a copy yourself, or use Google’s hosted version by including this somewhere between your tags:

1

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

Now that we have included jQuery, we need the code to power our drop downs. Add this in just before your closing tag:

1
2
3
4
5
6
7
8

<script type="text/javascript">
    $('#dd_menu > li').hover(function() {
        $('> ul', this).toggle();
    });
    $('#dd_menu > li > ul > li').hover(function() {
        $('> ul', this).toggle();
    });
</script>

<script type="text/javascript">
	$('#dd_menu > li').hover(function() {
		$('> ul', this).toggle();
	});
	$('#dd_menu > li > ul > li').hover(function() {
		$('> ul', this).toggle();
	});
</script>

If you want fancy fade or slide effects, you could replace the references to toggle() with fadeToggle() or slideToggle(). Have a play around until you come up with something that you like.

The CSS

This part is entirely up to you; it’s your menu! Having said that, here’s some CSS that you’ll definitely need to add:

1
2
3

#dd_menu ul {
        display: none;
}

#dd_menu ul {
		display: none;
}

Without this, the full menu will display by default, which sort of defeats the point of a drop down menu.

To give you a starting point, here’s the CSS I used in my demo. Feel free to copy and modify it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

#dd_menu {
    padding: 0;
    list-style: none;
    overflow: auto;
    text-align: center;
}
 
#dd_menu ul {
    display: none;
    position: absolute;
    background-color: #fff;
    border-width: 0 1px 1px 1px;
    border-style: solid;
    border-color: red;
    padding: 0;
    list-style: none;
    width: 160px;
}
 
#dd_menu ul li {
    background-color: #ccc;
}
 
#dd_menu ul li:hover {
    background-color: #fff;
}
 
#dd_menu > li {
    float: left;
    border: 1px solid red;
    background-color: #ccc;
    height: 30px;
    line-height: 30px;
}
 
#dd_menu li a {
    width: 160px;
    display: block;
}
 
#dd_menu ul li ul {
    left: 160px;
    margin-top: -30px;
    border-top-width: 1px;
    width: 160px;
    padding: 0;
}

#dd_menu {
	padding: 0;
	list-style: none;
	overflow: auto;
	text-align: center;
}

#dd_menu ul {
	display: none;
	position: absolute;
	background-color: #fff;
	border-width: 0 1px 1px 1px;
	border-style: solid;
	border-color: red;
	padding: 0;
	list-style: none;
	width: 160px;
}

#dd_menu ul li {
	background-color: #ccc;
}

#dd_menu ul li:hover {
	background-color: #fff;
}

#dd_menu > li {
	float: left;
	border: 1px solid red;
	background-color: #ccc;
	height: 30px;
	line-height: 30px;
}

#dd_menu li a {
	width: 160px;
	display: block;
}

#dd_menu ul li ul {
	left: 160px;
	margin-top: -30px;
	border-top-width: 1px;
	width: 160px;
	padding: 0;
}

Why all the JavaScript?

The demo at the start of this post can be achieved without any JavaScript. Try it yourself; strip out all the JavaScript, and then add this CSS:

1
2
3
4
5
6
7

#dd_menu > li:hover > ul {
    display: inline;
}
 
#dd_menu > li > ul > li:hover > ul {
    display: inline;
}

#dd_menu > li:hover > ul {
	display: inline;
}

#dd_menu > li > ul > li:hover > ul {
	display: inline;
}

It works the same as before! Why do we even bother with all the jQuery?

The goal of this post is to provide a starting point, to give you a basic structure upon which you can build. Using jQuery adds in the possibility to add simple effects like sliding, which will make your menu look a lot nicer than the demo above! If you’re happy without fancy effects and the like, then by all means copy in the additional CSS and leave it at that. Otherwise, use the jQuery code and get your hands dirty!

If you use this on your site, share the link in the comments. I’d love to see what you come up with.

Once you’ve included the jQuery and jQuery UI JavaScript files on your Web site, you need to add in some JavaScript to add the datepicker to a particular form element:

1
2
3

$(function() {
    $( "#datepicker" ).datepicker();
});

$(function() {
	$( "#datepicker" ).datepicker();
});

If you plan to have multiple datepicker fields across your site, here’s a little snippet which you can use instead of the above code that will automatically add a datepicker to any textbox with the class “date”:

1
2
3
4
5

$(document).ready(function() {
    $('.date').each(function() {
        $(this).datepicker({ dateFormat: 'yy-mm-dd' });
    });
});

$(document).ready(function() {
	$('.date').each(function() {
		$(this).datepicker({ dateFormat: 'yy-mm-dd' });
	});
});

Just add this code to your site footer, or into some globally-included JavaScript file, and then create your form element:

1

<input type="text" name="date" class="date" />

<input type="text" name="date" class="date" />

Create as many of these as you like; they’ll all be automatically converted into datepickers. Easy!

I wanted to get a list of all pages which had a certain custom field. This can be easily done by passing the meta_key parameter to the get_pages() function, which returns an array of post objects. For example, if you wanted to get a list of all pages with the custom field ‘test’, you would do:

1

$pages = get_pages('meta_key=test');

$pages = get_pages('meta_key=test');

This works fine for top-level pages with the custom field ‘test’, but child pages are inexplicably ignored. This doesn’t seem to be mentioned anywhere in the WordPress Codex and was a source of much confusion to me.

The solution: hierarchical

Another parameter of the get_pages() function is hierarchical, which is used to display subpages in an indented fashion below their parent, and defaults to true. Setting this to false, we get our expected results from get_pages():

1

$pages = get_pages('meta_key=test&hierarchical=0');

$pages = get_pages('meta_key=test&hierarchical=0');

Any pages or subpages with the custom field ‘test’ will now be returned.

CSS to the rescue! I decided to make use of the CSS3 border-radius property which allows for rounded corners without any images or extra HTML. CSS3 hasn’t been properly implemented yet, however the border-radius effect can be achieved in Gecko, Webkit and KHTML-based browsers using -moz-border-radius, -webkit-border-radius and -khtml-border-radius respectively. Opera’s Presto rendering engine had a similar property but this has unfortunately been removed. Opera’s market share (around 2%) is small enough that I can feel okay ignoring it until the developers choose to bring back the border-radius property. Internet Explorer, however, has a majority market share and predictably has no support for border-radius nor an equivalent proprietary property.

One of many solutions I found to Internet Explorer’s disability was a JavaScript solution, DD_roundies, by Drew Diller. Using conditional comments I included the reasonably small 9kb js file in my HTML source only for Internet Explorer users and added a rule for each ID or class that I wanted to have rounded corners for. Now when I load up my page in either IE 6, 7 or 8, the borders of the appropriate divs are as rounded as they are in Firefox.

This is further proof that our country is being run by a bunch of technologically-ignorant morons. Given the current proposals of Internet filtering and the complete lack of progress and planning of the National Broadband network we really didn’t need more evidence to support this.

So now instead of legally purchasing this game on Steam I will be forced to pirate it. If the Government thinks these outdated classification laws are protecting anyone they are seriously misinformed.

Thanks Michael Atkinson.

The iPhone itself is amazing. The touch screen is intuitive and easy to use and the App store is fantastic, there are so many different apps that are available for free (or for around a dollar or two, encouraging impulse buying).

But it’s Apple’s closed off nature that really lets down the iPhone. It didn’t take me long to jailbreak my phone, opening the door to additions like the awesomely useful SBSettings, the 5 icon dock, battery percentage indicator (I have the 3G model) and a whole bunch of other useful apps not available through official Apple channels. I will say this now: if you have an iPhone and it’s not jailbroken, do it now. You’ll be asking yourself why you didn’t do it sooner.

The biggest annoyance I’ve had so far with the restricted nature of Apps has been a usage meter I bought (paid app, not free, hence my anger over this issue). This particular App allows me to keep track of my mobile phone credit usage and home Internet download usage. I use this app at least once every two days. Unfortunately a couple of weeks back, Virgin Mobile Australia decided to redo their Web site and made changes to their authentication system. So now my usage app can no longer log into their site to get my mobile phone usage. The developer of the usage app, who is a legend for support, fixed the issue later that same day, but due to Apple’s infuriatingly slow approval process the update has yet to make an appearance in the App store, over two weeks later. If Apple must insist on approving all applications they will need to hire a hell of a lot more staff to do it, and should implement some sort of fast track program for application updates.

The second annoyance came about when I wanted to plug my iPhone into the TV. I went to the Apple Web site where they wanted $60 for a composite cable. That’s right, $60 for fifty cents worth of cable. “Screw that”, I thought, and went to have a look on eBay where I found generic iPhone-compatible composite cables for $10 with free postage. Unfortunately these listings have a small disclaimer: “will not work with iPhone firmware 3.0″. It seems that Apple has started including authentication chips in their cables, so if you plug a cable into an iPhone that doesn’t have one of these chips it will not work. These sort of business practices should be illegal and pretty much highlight Apple’s success: suck people into buying a really cool new toy and then squeeze more money out of them by charging ridiculous prices for accessories without allowing for competition.

Overall I am really happy with the iPhone and the above experiences have not made me rule out buying an iPhone again. Before I become an Apple “fanboy”, however, Apple are going to need to improve their business practices. But I don’t see that happening any time soon.

There are two ways in which they are protecting children by implementing a Web filter. The first is by blocking access to child pornography, the second is by preventing children from accidentally stumbling across inappropriate material.

Blocking access to child pornography

Simply put this is not possible. As surprising as this may sound, there is no official paedophile Web site out there. You can’t download images of child pornography by Googling “child porn” or going to childporn.com. All a Web filter is going to do is block access to certain Web sites, but what if the offending material isn’t on a Web site? The Web makes up only part of the Internet, there are dozens of other ways to transmit and share images. FTP, DCC via IRC and BitTorrent are just a few examples. Even if there were some inappropriate Web sites that should be blocked, bypassing any Web filter is insanely easy. Using a proxy, an SSH tunnel or an encrypted connection are all relatively easy ways to accomplish this.

Preventing children from accidentally stumbling across inappropriate material

Again, this sounds like a perfectly valid reason for implementing a Web filter. But why should the Web be filtered for every single Australian just to prevent kids from stumbling across something that they shouldn’t see? Surely an opt-in ISP-side filter, or a client-side filter installed by concerned parents, would accomplish this. Why doesn’t the Government simply require all ISPs to offer a free content filter for those who request it? And what ever happened to good old parental supervision? If you’re worried that your kids may, accidentally or not, stumble across something that’s inappropriate, keep an eye on them when they’re surfing. Put the family computer in an open location. Most kids are likely more technologically literate than their parents anyway, so bypassing the filter if they choose isn’t likely to be an issue: I remember using a proxy to bypass the draconian filters in high school when I was thirteen.

Web filters are not going to solve any problems and anyone who thinks they will are kidding themselves and have absolutely no idea how the Internet or World Wide Web work. So please, Misters Rudd and Conroy, abandon this pointless plan to filter my Web, I will just bypass it out of principle anyway.

It started with Google Earth: we could view satellite images of the entire planet, with enough detail to see the tops of people’s heads. Then there was the slightly creepier Street View, which allowed us to see straight down people’s driveways and look at others as they walked down the street. The latest venture seems to be sorting and organizing prescriptions.

What does everyone else think: a harmless company looking to make information easily accessible for all, or an alien race of super intelligent brains intent on learning everything until they destroy the Earth?

One of the highlights of the Z Series is the hybrid graphics switch which allows you to switch between the Intel GMA4500 integrated graphics and the discrete nVidia 9300M without rebooting. This allows you to squeeze an extra 40 minutes or so of battery life out of the notebook whilst on the move. The 9300M is relatively weak when it comes to mobile graphics however it still offers enough power to run most of the newer games available.

The design of the Z Series is impressive. I’m not ashamed to admit that aesthetics will influence my decision when purchasing a new gadget (which is why I didn’t consider the Lenovo X300) and the Z Series definitely meets my criteria. The top of the laptop is a simple black plastic with the Vaio logo in silver. It’s not a fingerprint magnet like my old HP Pavilion which is a plus. Opening the laptop reveals Chiclet-style keyboard which is great to type on; the keys are easy to press and are quiet and the trackpad is nice and large. Thanks to the carbon fibre casing the Z feels very strong and well built despite it’s low weight. There are no creaks or loose parts although the screen does have a disturbing amount of flex to it, but that’s the trade off for something so thin. The screen itself is fantastic. Images appear bright and colourful and text displays clean and crisp.

Battery life was another important aspect for me as the primary purpose of my notebook is for taking to university; power points aren’t always available to me and I’d rather not carry around the AC adapter all the time. With the screen set at a reasonably bright level and with wifi turned on I’m able to get around four hours of battery life out of the Z which is perfect for my needs. I’ve heard of people tweaking their Zs to get upwards of six hours, however I’m not sure what it is they’re sacrificing for this gain or how usable their notebooks are.

The Vaio Z Series is the perfect blend of portability and power. It’s light enough to carry around all day but has the specs to easily handle any task you throw at it. Very happy with my purchase!