I don’t know if this little snippet of code can help anyone else, but I thought it was rather nifty & wanted to share it with everyone. I hope someone can use it to do something else, as it’s a little specific to the site I was working on, but who knows. ;)

If you look on Celeb O Rama’s wallpaper site on each wallpaper’s page there is a list of the resolutions that the wallpaper is available in. We wanted a way to check the users resolution & highlight the one for their resolution (should they not know their desktop size). What we came up with was to add a green checkmark over the top of the picture. As there is no way to get a users resolution through PHP we went for javascript & a little bit of jQuery.

Here is what we came up with:

jQuery(function($) {
		var check = $("div#wallpapersizes .WallSizesHolder p:contains('" + screen.width + "x" + screen.height + "')");
		var tick = $('<div/>').attr('class', 'tick').css({ display: 'none', padding: '3px'});
		if(check.length > 0) {
			var link = check.siblings(0).children(0).attr('href');
			check.siblings(0).css({position:'relative'}).append(tick);
			tick.css({display: 'block'}).wrap('<a href="' + link + '"></a>');
		}
	});

This code might make more sense if I show the code used to display the wallpapers:

<div class="post" id="wallpapersizes">
            <h3>Available Sizes:</h3>
            <div class="WallSizesHolder">
		<div class="WallSizesThumbHolder">
	 	    <a href="http://wallpapers.celeborama.net/wp-content/uploads/2010/02/Cheryl_Cole_Rainbow_Glow_1920x1440.jpg" title="Cheryl_Cole_Rainbow_Glow_1920x1440" target="_blank"><img src="http://wallpapers.celeborama.net/wp-content/themes/snapshot/thumb.php?src=http://wallpapers.celeborama.net/wp-content/uploads/2010/02/Cheryl_Cole_Rainbow_Glow_1920x1440.jpg&w=92&h=69&zc=1" /></a>
		</div>
		<p>1920x1440</p>
	    </div>
<!-- Repeats -->
</div>

The jQuery(function($) is used as the site runs on WordPress which has no conflict enabled. The resolution is written underneath each wallpaper so we make a variable that targets the paragraph with the users resolution in (using the global variable screen). We create a div with the class tick & the css set to display none (as to not show it until we are ready) and add some padding. The tick is a png (yes, we are using a PNG fix) and is a background image.

We check the length, so that if the users resolution isn’t available it doesn’t crash, then we get the href of the link to the wallpaper. That might look needless but due to the template the link to the wallpaper isn’t available until later in the template so the only way to get it is via jQuery. We then move to the div that holds the image (WallSizesThumbHolder) using siblings, position it relative and then append the tick to it. The positioning is to position the tick over the image. Finally we show the tick by setting it’s display to block and wrap it in the link, as the user can no longer click the image underneath the tick.

Again I’ve absolutely no idea if this is of any help, but if anything it shows you how to get a users desktop resolution using javascript. For those not keeping track it’s held in screen.width & screen.height.