jQuery Snippet: Fancy Resolution Detector

/ jQuery / by Paul Robinson / 7 Comments
This post was published back on February 24, 2010 and may be outdated. Please use caution when following older tutorials or using older code. After reading be sure to check for newer procedures or updates to code.

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:

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

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.


Author’s gravatar

That’s very useful.

Maybe there is a way to show different webpages or adding different css styles, too?

Author’s gravatar author

Well to be honest you can probably do anything you like with it. I just thought the general idea might be of use to someone. 😉

You could use it to load different CSS files depending on the user resolution or another web page though if that’s what you mean.

Author’s gravatar

Yeah, you can actually just use the CSS @media query in conjunction with the JS and jQuery, and then that way it can call a completely unique stylesheet (embedded or linked) based on screen resolution.

Author’s gravatar author

Didn’t know that, thanks for sharing Jim. 🙂

Author’s gravatar

Pretty cool tutorial or I must say codes. I have visited the site and I found out the it really have great design. I also like the changing logo of it. How to do that?

Author’s gravatar

If you mean http://1click.at … that’s not that hard 😉 just 2 logos (one with more z-index) that are getting moved.



Author’s gravatar author

Well that’s one way to do it.

I’ll make a tutorial on how I did it. I’ve been looking for some tutorials to do, I’ve been really busy with other things & just haven’t had any inspiration for any new tutorials. So this is a great new one to start with. 😉

Older Comments
Newer Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

I'll keep your WordPress site up-to-date and working to its best.

Find out more