[MeIsProgrammer] » Javascript

HTML5 Geolocation – Google Map with Modernizr

Thor — Sat, 03 Jul 2010 18:28:21 +0000

HTML5 defines a very handy function, which is geolocation. Basically, this function will try to locate user’s location. But at the moment, not every browser supports this function. We need to implement some tedious conditions to check whether the browser supports Geolocation or not. Luckily, there is an open source javascript library, Modernizr. Using modernizr is simple, just import a script and use it. For example, if I want to check the browser whether Geolocation is supported or not, I just write the following code


if (Modernizr.geolocation){
//...Your logic here
}

Here, I wrote a simple html page that locate your location using Geolocation and show it on the Google map.

http://just-thor.com/sample-works/geolocation.html

Happy coding.

Google Ajax Libraries Gotcha!

Thor — Tue, 23 Feb 2010 09:37:58 +0000

I was working on Google Map for the past few days, and was using jQuery to retrieve markers information from another URL using ajax. I came across the Google Ajax Libraries (http://code.google.com/apis/ajaxlibs/) which helps to load Javascript from CDN.

Here’s part of the code

//sample code taken from http://code.google.com/apis/ajaxlibs/

By using this code, we actually load jQuery 1 from the CDN. However, there is a gotcha. If you follow the example I attached just now, it probably won’t work, well, at least not on my FF3.5 and IE8. In fact, you will have to do something like the following instead

//sample code taken from http://code.google.com/apis/ajaxlibs/

You will have to close the script tag that load external script from CDN before you can use it. Else you will get javascript error, in IE8, it shows ‘Object expected’.I really hope you will be able to read my article before you pull all your hair off.

Happy Coding

Javascript manipulating multiple cookie values in one cookie

Thor — Fri, 28 Aug 2009 06:00:37 +0000

Sometimes,its convenient to store values in cookies and retrieve it later.But,when dealing with different browsers,you may have problems as different browser may support different numbers of cookies.For example, IE can only support up to 20 cookies for one single domain. Therefore, we may need to compact our cookies into one instead of more.

How do we do that in Javascript?

Lets say originally we have like 3 cookies value storing for the same domain.

document.cookie = "cookie1=val1;path=/;domain=just-thor.com"
document.cookie = "cookie2=val2;path=/;domain=just-thor.com"
document.cookie = "cookie3=val3;path=/;domain=just-thor.com"

By using javascript, first of all we store all 3 values into 1,and separate it by a separator.

document.cookie = "allcookies=cookie1=val1|cookie2=val2|cookie3=val3;path=/;domain=just-thor.com"

Instead directly reading from cookies,first we translate our cookies value into array.

var cookieArray = translateCookiesToArray(new Array(), "allcookies");
// you can append more items into the array by calling
// cookieArray = translateCookiesToArray(cookieArray, "anotherCookiesCollection");

function translateCookiesToArray(result, key) {
 rawString = getCookieValue(key);
 if (rawString != null) {
 tokenizedString = rawString.split("|");

 for (i=0;i<tokenizedString.length;i++){
 innerArray = tokenizedString[i].split("=");
 result[innerArray[0]] = innerArray[1];
 }
 }

 return result;
}

To get value for cookie1,simply type

cookieArray["cookie1"]

You can always refactor it by globalize the separator variable and the way you access cookieArray. Refer to the code below.

Here’s the complete code

var cookieArray = translateCookiesToArray(new Array(), "allcookies");

function translateCookiesToArray(result, key) {
 rawString = getRawCookieValue(key);
 if (rawString != null) {
  tokenizedString = rawString.split("|");

  for (i=0;i<tokenizedString.length;i++){
   innerArray = tokenizedString[i].split("=");
   result[innerArray[0]] = innerArray[1];
  }
 }

 return result;
}

function getRawCookieValue(name)
{
 var arg = name + "=";
 var alen = arg.length;
 var clen = document.cookie.length;
 var i = 0;
 while (i < clen) {
  var j = i + alen;
  if (document.cookie.substring(i, j) == arg) {
   return getCookieByOffset(j);
  }
  i = document.cookie.indexOf(" ", i) + 1;
  if (i == 0) break;
 }
 return null;
}

function getCookieByOffset (offset)
{
 var endstr = document.cookie.indexOf (";", offset);
 if (endstr == -1) {
  endstr = document.cookie.length;
 }
 return unescape(document.cookie.substring(offset, endstr));
}
function getCookieValue (name)
{
 value = cookieArray[name];
 if (typeof value == "undefined") {
  value = null;
 }
 return value;
}
//retrieving value
var val1 = getCookieValue("cookie1");

Feel free to leave any comment.

Happy coding