Way to display image only in USA from 9 to 5?

[Greg_Baka]

We wish to display a “Click to Call” button only to visitors from the US and only between the hours of 9 to 5.

We did SORT OF create code that works - but not if you navigate off the page and then back. Then it screws up and shows the button even if you are not in the USA.

I think maybe it is not re-checking the “country” and therefore displaying when it shouldn’t. (we tested here in the US by changing the country to Canada and altering the times to be true or not during the test) The code is below:

Suggestions on how to fix this, or how to replace it with something else are welcome. But it must only be JS and HTML code.

Thank you!

<!-- Javascript to check time & country for phone and tablet versions-->
      <div class="hidden-desktop">
                 <script>
                 window.addEventListener("load",function(){
                 var currentTime = new Date();
                 var hours = currentTime.getHours();
                 var call = document.getElementById("callMe");
                 if(hours>=9 && hours<=17){
                 call.style.display = "inline";
                 }else{
                 call.style.display = "none";}
                 });
                 </script>
                 
                 <script>
                 window.addEventListener("load",function(){
                 $.getJSON("https://freegeoip.net/json/",function(data){
                 var country = data.country_name;
                 var nation = document.getElementById("callMe");
                 if(country != 'United States'){
                 nation.style.display = "none";}
                 })
                 });
                 </script> 

        <p class="view-cart pull-right">    
                 <a href="tel:1800333444" id="callMe" ><img src="../images/PHONE-icon.png" ></a>
        </p>
</div>

…and this is up in the head:
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

[jgetner]

after looking through your code is it could be 2 things. I do not know but you should have display none default on the button. But my understanding of freegeoip you must pass the ip or it will be based on the requesting ip which is your ip which if is a united states ip it will come back as united states and then then you will not hide the button.

From my understanding your button is left in a display:inline or block i assume in your css. Then you hide it until the ip is a united states ip correct? This could present pit falls as to when your javascript fails the button shows. It i think would better to hide the button with display:none in the css and show it using $("#callMe").show(); // jquery using hide to re-hide to and would allow the button to be hidden on failure of any sort.

[Greg_Baka]

I tried that (offline), but it did not work.

After a couple refreshes it continues to show the button no matter what country I set to show.

Any other ideas?

[Greg_Baka]

We had to give up on checking for “Country”. It was just too buggy.

So instead we created a way to only display the “Click to Call” button
from 7am to 7pm. We have a home office and wanted to minimize late night
phone calls.

The JS code uses UTC which is Universal time, and basically the same a
Greenwich Mean Time - which is the same no matter what timezone you
check it from. Central time zone, where we are, is 5 or 6 hours
different from UTC, depending on if Daylight Savings Time in effect or
not.

Here it is. Maybe it will be helpful to someone else…

* “callMe” is initially set to display:none; in the CSS

[CODE]

 

[/CODE]