title: Controlling HTML elements dependent on geo IP
body: <p>We have a mobile web page <a href="http://spiritdigital.co.uk/outpost/mobile/index.html" rel="nofollow">here</a> which will be available in different countries and within each country we need the ability to change the following based on the visitor's IP:</p>
  
  <ul>
  <li>div#container to have a different backround image</li>
  <li>div#buttons to be hidden and div#buttons-2 to be shown</li>
  </ul>
  
  <p>Using JavaScript called <a href="http://dev.maxmind.com/geoip/javascript" rel="nofollow">GeoIP</a> we are so far able to identify the visitor's country and grab the function name in the form of a two character ISO 3166-1 to be used to control the other JavaScript functions.  For example, I am from the UK and so when I visit the page the JavaScript generates this code:</p>
  
  <pre><code>function geoip_country_code() { return 'GB'; }
  </code></pre>
  
  <p>In the HTML there is currently a script which says:</p>
  
  <pre><code>    if (geoip_country_code() == 'GB') 
      {
        alert("Hello, you are in Great Britain");
      }
  </code></pre>
  
  <p>We want to develop that so that we can manipulate the CSS of specified elements but we're not well versed in JavaScript so this is where we need help.</p>
  
  <p>This is the JavaScript embedded into the page:</p>
  
  <pre><code>&lt;script src="http://j.maxmind.com/app/country.js" charset="ISO-8859-1"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Here are the HTML elements we want to control:</p>
  
  <pre><code>&lt;div id="container"&gt;
              &lt;div id="buttons"&gt;
                  &lt;a href="#" target="blank"&gt;
                      &lt;div class="button youtube"&gt;&lt;/div&gt;
                  &lt;/a&gt;
                  &lt;a href="#" target="blank"&gt;
                      &lt;div class="button facebook"&gt;&lt;/div&gt;
                  &lt;/a&gt;
                  &lt;a href="#" target="blank"&gt;
                      &lt;div class="button web"&gt;&lt;/div&gt;
                  &lt;/a&gt;
                  &lt;a href="#" target="blank"&gt;
                      &lt;div class="button appstore"&gt;&lt;/div&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>