Anonymous

Anonymous,

> What I want to do is to create a cookie which will remember whether to
> access a High resolution or Low Resolution site with the use of a
'Remember
> my choice' checkbox.

If you use a checkbox, that implies you are using a form that sends the
user's choice to a server. The server has a page that sets the cookie, then
redirects the user to the next page.

This has some benefits and limitations. It does not rely on JavaScript,
which is a positive thing. However, it means that search engines will not
index the pages (since they do not follow form submissions), which is a
serious problem. Aside from that, caching proxies will also screw it up.

There is also the alternative approach of going completely client side. This
is easier, and more reliable, but relies on JavaScript. This is the approach
I recommend, since it degrades nicely, and also works with search engines.

In all cases though, you have to consider that the user did it by mistake,
and they want to switch to the alternative version. If you set a cookie that
remembers their choice, they cannot undo that unless you provide them with a
way to do that (say a link that points to a page that offers the choice
again without automatic redirection).

I will assume that you are using my cookie controls script:
http://www.howtocreate.co.uk/jslibs/script-cookie

Then your script needs to be built in two parts. One checks for the cookie
and redirects immediately:
var bwsetting = retrieveCookie( 'bandwidth' );
if( bwsetting == 'high' ) {
  location.replace('high.html');
} else if( bwsetting == 'low' ) {
  location.replace('low.html');
}

Then you need the links and the tickbox. Since the tickbox only works if
script is enabled, it makes sense to create it with a script so it does not
appear when script is disabled. Since this will need a script element, the
entire script can go in there:

<ul>
  <li><a href="high.html" onclick="setResPref('high');">High
    resolution</a></li>
  <li><a href="low.html" onclick="setResPref('low');">Low
    resolution</a></li>
</ul>
<script type="text/javascript">
function setResPref(val) {
  if( !document.getElementById ) { return; }
  if( document.getElementById('remchoice').checked ) {
    setCookie( 'bandwidth', val, 31536000 ); //one year
  }
}
var bwsetting = retrieveCookie( 'bandwidth' );
if( bwsetting == 'high' ) {
  location.replace('high.html');
} else if( bwsetting == 'low' ) {
  location.replace('low.html');
}
if( document.getElementById ) {
  document.write('<p><input type="checkbox" name="remchoice"> '+
    'Remember my choice<\/p>');
}
</script>

That should do it.


Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/

Anonymous,

> I have set up the page but it does not seem to be remembering the choice
> I make.

A couple of points:

1. You have repeated the redirection parts of the script. Remove the first
one, since it is included in the main script below.

2. You need to use my cookie script. Cookie handling in JavaScript is quite
messy. My script makes it far more easy. I wrote the sample script assuming
you were going to use my cookie management script:
http://www.howtocreate.co.uk/jslibs/script-cookie
Download the script onto your site, and then put a script tag on the page
that loads it using:
<script type="text/javascript" src="cookie.js"></script>

Without that, the sample script simply produces errors, which is why it is
not working.

Anonymous,

> Page works great now but would it be possible to make it so it automatically
> detects your internet speed and then determines which page to go to?

Not directly. This information is not available to HTML, JavaScript, or
server side scripting. The only way to determine it is to test it manually.
The normal way to do this seems to be using a Java (not JavaScript) applet
to download some data and see how long it takes. This only works if the user
has Java enabled (many do not because Java applets suck), and makes your
page take far longer to load, since Java takes a long time to initialise.

It may be possible to simulate this in JavaScript by using XMLHttpRequest to
load some uncached data and see how long that takes by creating a JavaScript
Date object either side. However, that means wasting time performing the
test, does not work in older browsers, and will also fail in Safari due to
bugs in its Date object handling:
http://www.howtocreate.co.uk/safaribenchmarks.html

I recommend that you do not try doing this. Which version the user will want
is also down to their own preferences, not just their network speed. Some
users on low bandwidth connections will be willing to wait for longer for
the larger version. Some users on high bandwidth connections prefer sites
that load extremely fast, and are not willing to wait. Unless you have
something that is extremely sensitive to data loading speed (such as a game
that dynamically loads data in real-time), let them all choose manually.

[Ed. Just to test, I wrote a script that did what I described. It tested the speed, and automatically made sure it used enough data for the test to take over 1 second, to minimise script execution overheads. Ignoring HTTP header overheads (which can be significant with smaller data sets), it was a very quick approximation. I tested with several browsers, using a server on the same computer, to avoid network lag (which would cause severe random fluctuations on the Web). When loading the page, it would appear dead for a few seconds while running tests, and wasting several MB (uncompressed) of bandwidth per test.

The time in one browser would randomly change between their maximum speed, and a quarter of their maximum speed between tests. The maximum speeds in different browsers were wildly different, between 3 Mbps and 100 Mbps, on the lo interface of a network card that is capable of 54 Mbps. Safari had trouble getting any results because of its various Date object bugs.

With a real network that was limited to 4 Mbps, browsers also randomly gave between 3 Mbps and 100 Mbps. The browsers would give strange results for smaller data sizes, such as 5 KB taking 100 ms, while 60 KB could take 30 ms. They would give even stranger results at higher data sizes, with Firefox holding the stupidity record of 714 MB taking just over 1 second - an awesome calculated 5.5 Gbps over a 4 Mbps network!

Exactly what the browsers are doing with Date objects and instantiation of HTTP communication to get these calculated speeds is unknown, but the results they produced are definitely wrong. I assume that some of them say that the XMLHttpRequest response has been loaded before it has actually loaded. Quite simply, testing with JavaScript gave totally ridiculous, unreliable results and could not be used on a real Web page.]