Wuru, a UK Small Business Directory, added a cool little javascript to their site that allows users to adjust the website width between 800, 1024, and liquid.
Giving Users More Options
When I first saw this I didn’t even know what it was. I knew the adjustable font size icons on the left, but brackets? Those cool little icons allow you to adjust the size of a website, and after seeing those I began thinking that would be a neat little option for browsers. It also gave me another idea for a website, the hide all images icons. It might come in handy if you were to visit Wuru’s Dating Directory UK. I’m not looking for a date, I swear. I just had to do an analysis on it.
Giving users more options to adjust a website to fit there unique computer settings is always a great idea, though it may not always be taken advantage of. A lot of people still don’t even know what the different size text icons are for. In case you don’t, it’s to adjust the font size of the site.
The How
The way the site owner created this neat little screen size option was by using javascript. They simply give id’s to all of the list items:
<li id=“w800″> </li>
<li id=“w1024″> </li>
<li id=“wLiquid”> </li>
and use a little javascript to make it all work. The need for javascript is essential here because besides adjusting the style of site width, it also needs to edit the cache so when a user visits a different page on the site the settings do not go back to default. Unfortunately this is still copyrighted script so I can’t share with you, but there is another way if javascript is not your strong point.
Without Javascript
Doing this without javascript is still doable assuming you are at least using PHP or ASP, but it requires three different style sheets. The links no longer call script, but basically tell the site to load a different css file. You will need to have the resize links pass their corresponding string to the active page, make sure a cookie is assigned before loading the page so the changes work on all pages, and make the call for the css be adjustable by using php. A simply example would be:
<link rel=”stylesheet” href=”<?php echo $widthsize; ?>style.css” type=”text/css” media=”screen” />
I don’t get a lot of request for how to code stuff, but wouldn’t mind doing a few tutorials. If this is the kind of stuff that interest you let me know! I may be also able to get the original author to share their details as well. Just not sure what your interest is.
Granite Benchtops (1)
PPC companies in ... (1)
proflight simulat... (1)
Great headline. If your cookie has a bite-sized action and your reader completes the action, I think two things happen. Their self-confidence goes up (which feels good) and their trust in you increases.
Hi Robert,
Came across your blog by accident and thought you might like this example too. I have been experimenting with this concept on my website opensite.mobi. Have a look and try the ‘Display’ link. Also, I have a ref. page with examples of others doing similar thing to your example: http://develop.opensitemobile.com/javascript.html.
Dwight
Hey, I like that, and works with FF. I seen some use expressions, but that is a IE only thing I think.