jQuery Snippet: Fancy Resolution Detector
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:
|
1 2 3 4 5 6 7 8 9 |
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:
|
1 2 3 4 5 6 7 8 9 10 |
<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.
7 Comments
Michael Pehl
That’s very useful.
Maybe there is a way to show different webpages or adding different css styles, too?
Paul Robinson
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.
Jim
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.
Paul Robinson
Didn’t know that, thanks for sharing Jim. 🙂
Chicago Limousine Service
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?
Michael Pehl
If you mean http://1click.at … that’s not that hard 😉 just 2 logos (one with more z-index) that are getting moved.
Regards,
Michael
Paul Robinson
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. 😉