I recently had the challenge of retrieving a country based on the browser language. It was used to pre-select a country in a drop down list so the user didn’t have to. I knew it wasn’t going to be 100% accurate but probably more like 80-90%.

That’s because some people change the browser language instead of their native language and others use a non-ISO standard language. And last, some clients just don’t send language information.

It wasn’t an option to use a database that mapped IP addresses to countries, so the country had to be resolved from the browser alone.

Resolve the culture

I decided to split the functionality up into two methods. The first one resolves the CultureInfo based on the browsers language.

Resolve the country

The next method uses the ResolveCulture() method above to create a RegionInfo object. The RegionInfo contains all the country information needed such as ISO code, EnglishName, NativeName and DisplayName.

Now I am able to get all the culture and country/region information I need based on the browser’s language, with a margin of inaccuracy I can live with.

A few people have asked me how to implement the div popup with a LightBox effect, like the one used when you click the Filter by APML link in the top right corner of this page. It’s actually very easy and it’s 100% JavaScript.

First, we need to add the semi-transparent div to lie on top of the entire page. This is done like so:

var width = document.documentElement.clientWidth + document.documentElement.scrollLeft;

var layer = document.createElement('div');
layer.style.zIndex = 2;
layer.id = 'layer';
layer.style.position = 'absolute';
layer.style.top = '0px';
layer.style.left = '0px';
layer.style.height = document.documentElement.scrollHeight + 'px';
layer.style.width = width + 'px';
layer.style.backgroundColor = 'black';
layer.style.opacity = '.6';
layer.style.filter += ("progid:DXImageTransform.Microsoft.Alpha(opacity=60)");
document.body.appendChild(layer); 

Next we add a div in the middle of the page on top of the semi-transparent layer.

var div = document.createElement('div');
div.style.zIndex = 3;
div.id = 'box';
div.style.position = (navigator.userAgent.indexOf('MSIE 6') > -1) ? 'absolute' : 'fixed';
div.style.top = '200px';
div.style.left = (width / 2) - (400 / 2) + 'px'; 
div.style.height = '50px';
div.style.width = '400px';
div.style.backgroundColor = 'white';
div.style.border = '2px solid silver';
div.style.padding = '20px';
document.body.appendChild(div); 

And finally we put some text and a link that closes the popup when clicked:

var p = document.createElement('p');
p.innerHTML = 'Some text';
div.appendChild(p);

var a = document.createElement('a');
a.innerHTML = 'Close window';
a.href = 'javascript:void(0)';
a.onclick = function()
{
  document.body.removeChild(document.getElementById('layer'));
  document.body.removeChild(document.getElementById('box'));
};
 
div.appendChild(a);

I’ve tested this in Firefox 2+, Internet Explorer 6+, Safari 3 and Opera 9.23+ and it works in all of them. Here is an example HTML page that uses this method. It's very simple to copy and modify.