Javascript – Using JS to find Browser Country / Location not from IP Photo by ToastyKen

Common solutions to identifying a users locale/localizing/localising a web client:

Using PHP / ASP.NET take the users IP and feed into an ip to location service (geo ip) to find a country from ip.
Pro’s: Server-side off the bat, can cache a database of IP’s (although would you?)
Con’s: Adds another 2 hops to at least initial page load, IP location service’s can cost or be faulty

Using the request headers (again server-side) to identify an “accepted language” and then guestimating their location (taking en-US…for example.)
Pro’s: Server-side to start with, no extra hops/calls required, this data is already available whether you use it or not, more useful for language (although limited)
Con’s: Unreliable – mostly because of a few of the BIG browsers default to en-US for all english users, often international users might learn to use a browser in English anyway – defeating the point

Another solution (work in progress:)

A step towards a proper solution, and in my case a solution for MY original problem, is to at least work out their TIMEZONE. What? I hear you say, why the timezone? Well if you know, for example using analytics data, that your user base is 40% US, 50% UK and 10% rest of the world you can at least make a START by dealing with the two major constituents of your audience. I can envisage A more complete solution though, by combining the use of request headers accepted language AND the following Javascript timezone detection:

Searching around a bit I found this which showed a lot of promise. This javascript works out the users Operating System time offset, and from that you can define which timezone they are in. Useful, if like me you know your users in a specific timezone are likely to be in one country, not particularly if they are possibly in multiple countries within a timezone.

A solution / exploration – location detection in javascript

The following Javascript gives you both indicators, using navigator.language/systemlanguage it detects the browser’s language, and then using an expanded upon version of the above script it will provide you with the possible countries from the users OS timezone offset. How useful this is to you is depending on the application, but check it out – build some fantastic solution off of it, then show me, because I probably won’t get round to it!

var langCode = navigator.language || navigator.systemLanguage;
var lang = langCode.toLowerCase(); lang = lang.substr(0,2);

var dateObject = new Date(); //this timezone offset calc taken from http://unmissabletokyo.com/country-detector.html
var timeOffset = - dateObject.getTimezoneOffset() / 60;
var c = ""; //this will ultimately end up as a country/csv of possible countries
switch (timeOffset) { //I expanded upon this switch, adding all the possible countries
	case 0:
	 c = 'Algeria, Ascension Island, Burkina Faso, Faeroe Islands, Ghana, Guinea Republic, Iceland, Ireland, Ivory Coast, Liberia, Mali, Morocco, Sao Tome & Principe, Senegal, Sierra Leone, St Helena, The Gambia, Togo, United Kingdom'; break;

	case 1:
	 c = 'Albania, Andorra, Angola, Australia, Austria, Belgium, Benin, Bosnia, Cameroon, Central Africa Republic, Chad, Congo, Croatia, Czech Republic, Democratic Republic of Congo (Zaire), Denmark, Equatorial Guinea, France, Gabon, Germany, Gibraltar, Guam, Hungary, Italy, Liechtenstein, Luxembourg, Macedonia (Fyrom), Malta, Mariana Islands, Marshall Islands, Micronesia, Monaco, Netherlands, Niger, Nigeria, Norway, Papua New Guinea, Poland, Portugal, San Marino, Serbia, Slovak Republic, Slovenia, Spain, Sweden, Switzerland, Tunisia'; break;

	case -1:
	 c = 'Cape Verde Islands, Cook Islands, French Polynesia, Guinea Bissau, USA'; break;

	case 11:
	 c = 'New Caledonia, Solomon Islands, Vanuatu'; break;

	case -11:
	 c = 'Niue Island, Samoa (American), Samoa (Western), USA'; break;

	case 11.5:
	 c = 'Norfolk Island'; break;

	case 12:
	 c = 'Fiji Islands, Kiribati, Nauru, New Zealand, Tuvalu, Wallis & Futuna Islands'; break;

	case 13:
	 c = 'Tonga'; break;

	case 2:
	 c = 'Botswana, Bulgaria, Burundi, Cyprus, Democratic Republic of Congo (Zaire), Egypt, Finland, Greece, Israel, Jordan, Lebanon, Lesotho, Libya, Lithuania, Malawi, Mozambique, Namibia, Palestine, Romania, Rwanda, South Africa, Sudan, Swaziland, Syria, Turkey, Zambia, Zimbabwe'; break;

	case 3:
	 c = 'Bahrain, Belarus, Comoros Island, Djibouti, Eritrea, Estonia, Ethiopia, Iraq, Kenya, Kuwait, latvia, Madagascar, Mayotte Islands, Moldova, Qatar, Russia, Saudi Arabia, Somalia, Tanzania, Uganda, Ukraine, Yemen Arab Republic'; break;

	case -3:
	 c = 'Argentina, Brazil, Cuba, Greenland, Guyana, Uruguay'; break;

	case 3.5:
	 c = 'Iran'; break;

	case -3.5:
	 c = 'Surinam'; break;

	case 4:
	 c = 'Armenia, Azerbaijan, Georgia, Mauritius, Oman, Reunion Island, Seychelles, United Arab Emirates'; break;

	case -4:
	 c = 'Anguilla, Antigua and Barbuda, Aruba, Barbados, Bermuda, Bolivia, Brazil, Canada, Chile, Dominica Islands, Dominican Republic, Falkland Islands, French Guiana , Grenada, Guadeloupe, Martinique, Montserrat, Netherlands Antilles, Paraguay, Puerto Rico, St Kitts & Nevia, St Lucia, Trinidad & Tobago, Venezuela'; break;

	case 5:
	 c = 'Diego Garcia, Maldives Republic, Pakistan, Turkmenistan'; break;

	case -5:
	 c = 'Bahamas, Brazil, Canada, Cayman Islands, Columbia, Ecuador, Haiti, Jamaica, Panama, Peru, Turks & Caicos Islands, USA'; break;

	case 5.5:
	 c = 'Bhutan,India,Nepal,Sri Lanka'; break;

	case 6:
	 c = 'Bangladesh, Kazakhstan, Kyrgyzstan, Tajikistan, Uzbekistan'; break;

	case -6:
	 c = 'Belize, Canada, Costa Rica, El Salvador, Guatemala, Honduras, Mexico, Nicaragua, USA'; break;

	case 6.5:
	 c = 'Myanmar (Burma)'; break;

	case 7:
	 c = 'Australia, Cambodia, Indonesia, Laos, Thailand, Vietnam'; break;

	case -7:
	 c = 'Canada, Mexico, USA'; break;

	case 8:
	 c = 'Australia, Brunei, China, Hong Kong, Indonesia, Macau, Malaysia, Mongolia, Philippines, Singapore, Taiwan'; break;

	case -8:
	 c = 'Canada, Mexico, USA'; break;

	case 9:
	 c = 'Australia, Indonesia, Japan, Korea, North, Korea, South, Palau'; break;

	case -9:
	 c = 'USA'; break;
}

//at this point Lang should be a 2 letter language code (e.g. en), timeOffset will be the users hour offset from GMT and c will be the csv of possible countries!
alert('Lang: ' + lang + "\r\n" + 'timeOffset: ' + timeOffset + "\r\n" + 'Possible Countries: ' + "\r\n" + c);

You can get the full source for this zipped here, included is a minified version wrapped in a function, isn’t that nice of me? Use it as you will, and if you create something epic, show me!

Countries/timezones: I built the timezone offset switch based on the wikipedia list of countries and their timezones, so its comprehensive.

Irritating when the thing looks so pretty out of the box. So rather than opt for one of the non-pretty options I just hacked it. Brutally I just added code to maintain an input as a csv, it needs fixing really but this does work, for now.

Click here to download my hack/fixed version which maintains a separate csv (in a designated ID – search replace “csvHolder” if you want to change its ID.)

Hopefully Drew can update his plugin so it works out of the box, its a really useful plugin.

Note: This rar includes my csv quick maintaining functions which are required.

Using the below you can add/remove items to an input which acts as a csv holder, should be self explanatory, get and set are just shorteners.

function get(a){ //small get
	if (typeof a != "undefined") {
		return document.getElementById(a).value;
	} else {
		return '';
	}
}

function set(i,v){ //small set
	document.getElementById(i).value = v;
}

function append(i,v){ //small append
	set(i,get(i) + v);
}

function appendTocsv(i,v){ //small append csv
	if (get(i).length == 0){
		set(i,v);
	} else {
		append(i,', ' + v);
	}
}

function incsv(id,v){ //check a csv (in element with id) for a value (v)

	var csv = get(id);
	var csvArray = csv.split(', ');
	var found = false;

	if (csvArray.length > 0){

		for (i = 0; i <= csvArray.length; i++){

			if (csvArray[i] == v){ found = true;  }

		}

	}

	return found;

}

function removeFromcsv(id,v){ //removes a val from csv

	var csv = get(id);
	var csvArray = csv.split(', ');
	var removed = false;
	var endString = "";

	if (csvArray.length > 0){

		for (i = 0; i <= csvArray.length-1; i++){

			if (csvArray[i] == v){ removed = true;  } else { 

				if (endString.length > 0){ endString += ', '; }
				endString += csvArray[i]; 

			}

		}

	}

	set(id,endString);

	return removed;

}

The JQuery documentation for this doesn’t account for the reality of the above, its all very well if you want the empty column/div to SHOW all the time as empty, that is remain as some sort of visible placeholder, but if the empty list should show as empty, until an object is ready to be dropped on it then JQuery sortable’s don’t work. It all comes down to dimensions, if an empty list exists without a height value, you can’t drop onto it.

More specifically, if an empty jquery-sortable list exists without a specific height set at the point of [.sortable start] (that is BEFORE the event is fired) then you just cannot drop the sortable.

Image by Dmitry Baranovskiy

I played with fixing this by adjusting each empty list (in the example belows case #col1,#col2,#col3) to have a defined height (and background, which looks nice) within the sortable “start” option, but this just creates boxes (or landing pads/zones) you can see, but not drop on.

Long and short of it – the solution to being able to drop jquery sortable’s onto invisible empty lists is to bind a function which adds a css class (or sets the height specifically) to the empty (invisible) sortable list when a user clicks one of the goal objects. This is then fired BEFORE the sortable takes hold and so creates drag-droppable landing zones for the users held sortable. It then uses the sortables “stop” property to remove the class it has added to any columns which have it.

function sortAndDrag() {

	//show BEFORE sortable starts
     $("#col1, #col2, #col3").bind('click mousedown', function(){
          $(".col").each(function (c) {
                if ($("div", this).size() == 0) {
                    $(this).addClass("colZoneEmpty")
                }
            })
     });

	//enable sortable
    $("#col1, #col2, #col3").sortable({
        revert: true,
        connectWith: ".col",
        stop: function (a, d) {
            $(".col").removeClass("colZoneEmpty");
	    //any ajax processing
        }
    });

}
//in this example 3 column div's exist with the id's 'col1','col2','col3', all of which have the class 'col'
//colZoneEmpty is a css class which makes the empty list visible

There are of course improvements you could make here, like checking the users dragging before setting any styling, but this quick hackaround works where it shouldn’t.

So if your in the same boat and you have hundreds (thousands?) of RSS urls hard-coded into files across multiple servers I would recommend you get working, perhaps the following will be of use. I should mention at this point that Auction 2 Post users (and Bans, Wordbay etc.) will not suffer any fallout as they use the shopping api (which is sensible now, but back in 2006 wasn’t an accessible option.)

I have written a quick transformation script (js) which will take an old epn RSS url (http://rss.api.ebay.com/ws/rssapi?…) and transform it into a new one (http://rest.ebay.com/epn/v1/find/item.rss?…), if you only have a few urls to change over then it might be enough for you:

If you have a LOT of these urls in files (like I do) then you might want to use something a little more automated. In my case I wrote a complete FTP spider which flies for each and every file hunting for old ebay RSS urls, transforming them and updating the pages. This was fine in my case because mine were pretty standardly laid out, similar use etc. I wouldn’t recommend it if you use the extremity of the RSS parameters.

Anyhow as the FTP crawler was pretty huge of a code puke, I might release that separately at some point (it has other good uses ), here is the csharp for transforming old RSS urls into new ones though (Note: it doesnt deal with all the parameters, only the most common/ones I use regularly, it may need tailoring.)

static string transformEPNRSSUrl(string inputUrl)
{
    string transformed = "http://rest.ebay.com/epn/v1/find/item.rss?";

    //split url by ?
    string[] splitUrl = inputUrl.Split(new char[] { '?' });

    //split second by &
    string[] splitParams = splitUrl[1].Split(new char[] { '&' });

    //new params
    string newParams = "";

    //transform params
    foreach (string s in splitParams)
    {
        string retID = "";
        string retVal = "";
        string[] sV = s.Split(new char[] { '=' });

        //mostly :p
        retVal = sV[1];

        //see if tis required
        if (sV[0] == "sacat") { retID = "categoryId1"; }
        if (sV[0] == "satitle") { retID = "keyword"; }
        if (sV[0] == "afepn") { retID = "campaignid"; }
        if (sV[0] == "customid") { retID = "customid"; }
        if (sV[0] == "saprclo") { retID = "minPrice"; }
        if (sV[0] == "saprchi") { retID = "maxPrice"; }

        if (retID != "")
        {
            if (newParams != "") { newParams += "&"; } //for all but first
            newParams += retID + "=" + retVal;
        }

        //last few additions 24/06/2011
        if (sV[0] == "fts" && sV[1] == "2") { newParams += "descriptionSearch=true"; }
        if (sV[0] == "sascs" && sV[1] == "2") { newParams += "listingType1=AuctionWithBIN&listingType2=FixedPrice"; }

    }

    transformed += newParams;
    //following is some defaults for me, check these yourself, use:
    //http://woodylabs.com/scripts/ebay-epn-rss-url-converter.php
    transformed += "&sortOrder=EndTimeSoonest&programid=15&toolid=10039&listingType1=All&lgeo=1&feedType=rss";

    return transformed;
}

Use both the transformer script page and the csharp code at your own peril, it worked for me over hundreds of urls, mostly without a hitch, but thats not saying it will for you. Check your urls, after all each is probably worth £ to you. Visit the RSS urls and use the ebay tool validator to check the RSS feed has worked!

Just a quick mention of the positives of ebay deciding to rip out the old system (its not all a pain in the arse!):

• It reminded me how widespread my old ebay affiliate sites are, it was a good excuse to take stock and write FTPCrawler
• The whole system is much cleaner, parameter wise
• The introduction of multiple selection parameters is useful
• The new RSS generator is nice (as much as anyone uses the thing

I can see applications ranging from replacing my SEO QUAKE’s list parameter check to many many web marketing, analytics, data crawling and recording processes, all of which you could do in ms.excel, yet more accessible here. This isn’t a big deal, but landed on my lap this morning so here’s the share

PHP is the tool of the open source project. (There are of course companies that use it (my companies do) and huge online websites/behemoths of information that use it as a server side language.) but overall the corporate world, any web software with intent to move to larger markets and bridge the gap to desktop apps codes in ASP and now ASP.NET. There was nothing I couldn’t do in PHP/mySQL that I wanted to do, it for me was a very good toolset and fulfilled my needs as far as I could see them. But it would lack if you wanted to move towards desktop applications, and its lack of association to Microsoft does act as a restriction in some ways. So there it is ASP / ASP.Net needs to picked up. For me this was more a conversion than picking up a new skill, I took PHP and hammered that knowledge into ASP Syntax – this actually works nearly entirely for the most part, you get over the differences very easily if you have done even a bit of visual basic before (as ASP in its default form is essentially vb – C# is also excellent.)

I just took a course in “ASP.NET Scalable web applications using AJAX” (Learning Tree in euston – would recommend it – taught by an excellent asp.net consultant, Richard Howells) which affirmed a lot of programmatic choices I have previously made and enlightened me to improved structures for scalability. The thing I most took out of it though is how much work microsoft have put into their IDE (Visual studio.) VS2008 is pretty phenomenal if you come from hand coding everything yourself. I can see how developers get wooed by intellisense and ease of access, they intend to make it all easy – every functionality provided by web technologies in their control based environment. For me it still remains though that in providing a huge framework of simplicity to every user you do carry a certain amount of redundancy, that is while it may take longer to code pure PHP \ Javascript it will still do specifically what you want it too, and only that. Potentially with the microsoft IDE you can create what you want entirely and then cut the fat so to speak afterwards – there are substantial speed benefits with their project based management, this methodology however is not my first choice.

For any person wanting to seek employment or understanding in web development I would highly recommend jumping strait into PHP or ASP.NET (probably PHP unless you have a requirement for ASP – ASP.NET C# Pays better than PHP here in the UK.) After learning the basics of HTML, Javascript and CSS, PHP or ASP brings you clearly up another step. I am available for code/developer mentoring/support as of Summer 2009.