Geolocation prompt before page load?

Question

A website I am working on requires users to be able to pay in their local currency, on the basis of an HTML5 geolocation check. I have set a piece of javascript / html / php up to show a "splash page", which sits over the top of the first page they get to, which says "we think your local currency is : ", and asking them to choose a currency.

At the moment, the browsers' " do you want to share your location " question is appearing after the page is loaded. Which means that the "we think your local currency is : " part of the page has already done a geo-location check before asking if the user wants to share their information, oddly.

In order to test the geolocation code, I have added the geolocator plug in for firefox, which allows me to give a different html location. However, I am unable to test this, as the geolocation check is running before the user is asked if they want to share their location.

Answer 1

 function success(position) { $('#loc').text('We think you\\'re at (' + Math.round(position.coords.longitude) + ', ' + Math.round(position.coords.latitude) + '). If not, pick:'); $('#popup').removeClass('hidden'); } function error() { $('#loc').text('We have no clue where you are, so pick:'); $('#popup').removeClass('hidden'); } if ("geolocation" in navigator) { navigator.geolocation.getCurrentPosition(success, error); } else { error(); } 

 #popup { display: fixed; top: 100px; left: 200px; width: 200px; background: black; color: white; padding: 10px; } #popup.hidden { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="popup" class="hidden"> <div id="loc"></div> <button>THE WORLD</button> <button>SOMEWHERE ELSE</button> </div> 

(for some reason does not work in SO snippet, but works on JSBin