CODEWITHSUNDEEP
geolocationgeoip
Audity
Audity

Reputation: 49

Controlling HTML elements dependent on geo IP

We have a mobile web page here 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:

Using JavaScript called GeoIP 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:

function geoip_country_code() { return 'GB'; }

In the HTML there is currently a script which says:

    if (geoip_country_code() == 'GB') 
    {
      alert("Hello, you are in Great Britain");
    }

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.

This is the JavaScript embedded into the page:

<script src="http://j.maxmind.com/app/country.js" charset="ISO-8859-1"></script>

Here are the HTML elements we want to control:

<div id="container">
            <div id="buttons">
                <a href="#" target="blank">
                    <div class="button youtube"></div>
                </a>
                <a href="#" target="blank">
                    <div class="button facebook"></div>
                </a>
                <a href="#" target="blank">
                    <div class="button web"></div>
                </a>
                <a href="#" target="blank">
                    <div class="button appstore"></div>
                </a>
            </div>
        </div>

Upvotes: 0

Views: 2592

Answers (2)

Florian Margaine
Florian Margaine

Reputation: 60717

var map = {
    'GB': {
        'background': 'img1.jpg',
        'buttons': 'show',
        'buttons2': 'hide'
    }
};

var country = geoip_country_code();
$('#container').css('background', map[country].background);
$('#buttons')[map[country].buttons]();
$('#buttons2')[map[country].buttons2]();

This is an example using jQuery. I hope you get the idea of using a "mapping object" (with only UK there, but add countries as you wish), and then you can do your actions based on this.

Upvotes: 2

abhinav pratap
abhinav pratap

Reputation: 623

Based on the country code returned, you should change the stylesheets(css)

like if returned GB then load the css where div#container have a different backround image div#buttons be hidden and div#buttons-2 be shown

else vice-versa.

or you can simply do this with javascript

Make a function which : sets the background image of container, hide div#button, show div#buttons-2

and another function to do vice versa like : sets another background image of container, show div#button, hide div#buttons-2

Now you can call the appropriate function for which to show like : if returned 'US' call func1, if returned 'UK' call func2

Upvotes: 0

Related Questions