Quick & dirty way to show/hide content based on location

I’ve been busy but there’s lots to show. For now this is all I’ve got.

I recently wanted to show a different message for Finnish visitors on my Now page (for now needs refresh after you go to the page from that link). I was looking for a simple solution for that. I found all kinds of APIs but my requirement was:

• No API key required
• No over complicated JS
• No server-side code
• No frameworks

So I stubmled upon Stack Overflow (not a big surprise, huh?) thread “How to get visitor’s location (i.e. country) using geolocation?”. Most of the suggestions rely on API but one old school JS caught cauchgt my eye.

So here’s what I did.

HTML:

<p>
  <span id="finnish" style="display: none">
    The content you want to show only for Finnish users.
  </span>
  
  <span id="hide">
    The content you want to show to everyone else.
  </span>
</p>

Inline JS (I just needed this quick, don’t judge me):

<script src="https://cdnjs.cloudflare.com/ajax/libs/jstimezonedetect/1.0.6/jstz.min.js"></script>
<script>
  if ( jstz.determine().name() === "Europe/Helsinki" ) {
    document.getElementById('finnish').style.display = "inline-block";
    document.getElementById('hide').style.display = "none";
  }
</script>

If visitor is from Finland it will show the Finnish content and hide the English content. If not, Finnish content will already be hidden and English is shown.

You could do this wiser but this took me 1 minute of my time and does what it’s supposed to do. It’s working on Now page (doesn’t currently support my SPA-like page transition feature so you’ll need to reload the page).