I recycle old Kindles into mini weather stations through their "experimental browser". I create webpages showing the date and time along with weather data I put into iframes for use with the Kindle browser. Working great until I ran into weird problem with a Kindle Voyage browser.
This is what I use for weather within a customized iframe.
https://forecast.io/embed/#lat=39.742043&lon=-104.991531&name=Denver
My first clue something was odd was the time for this date & time javascript snippet I've successfully used before on other Kindles was off by +7 hours. In other words, when it's 4pm, the browser is telling all the javascript content within the page its rendering that it's 11pm and so on.
I double-checked the Kindle time and it was correct. I then attempted to offset the time by manually changing the time of the entire Kindle -7 hours and it didn't change the browser issue.
I finally adjusted the date & time javascript snippet to offset the time by 7 hours to fix the display of the time.
However, the Kindle Voyage's browser is also offsetting the weather in my iframe ahead by 7 hours as well causing the weather in an iframe to shift ahead 7 hours. It causes the code of the weather to go wonky after 5pm because the browser is then making it believe it's the next day (7 hours ahead). I don't have direct access to any of that code to offset the time, so I need to somehow offset the 7 hours on my webpage or server.
I've attempted changing the timezone in the .htaccess file with various SetEnv TZ timezones but it has no affect on the javascript output in time nor the weather within the iframe.
Is there perhaps a way to use javascript to force all javascript within a page to offset the time the browser is reporting? Or is there some other way to fix this issue?
I'm stumped.
Update/edit -
Never figured out an answer so I created a time-sensitive javascript that I offset by 7 hours to overlay different days over top the weather chart. Here's some snippets of the code I used in case anyone is curious. I rotated everything because for some reasons Amazon also now doesn't allow you to view the browser in landscape mode on the Voyage, so I just made the entire page on its side.
From 5PM Denver time to midnight the overlay is active. If you note the times 0 to 6 in the code, it's because I had to shift the time 7 hours back up until the next day starts. I also had to shift the days back as well because the Kindle Voyage browser's weird time-offset was causing the forecast to shift all the days backwards. It's sloppy and could be streamlined, but it works.
CSS -
p {
white-space: nowrap;
font-size: 70px;
word-spacing: 91px;
transform: rotate(90deg);
}
jQuery/Javascript -
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var d = new Date();
if(d.getHours() >= 0 && d.getHours() <= 6 ){
/* Greater than or equal to 5PM (5PM+7=midnight (0) and less than or
equal to 11PM+7=6AM (6) */
$(".amazonworkaround").show();
}
else {
$(".amazonworkaround").hide();
}
});
</script>
And -
<script>
var d = new Date();
var weekday = new Array(7);
weekday[0] = "Now Sun Mon Tue Wed Thu Fri Sat";
weekday[1] = "Now Mon Tue Wed Thu Fri Sat Sun";
weekday[2] = "Now Tue Wed Thu Fri Sat Sun Mon";
weekday[3] = "Now Wed Thu Fri Sat Sun Mon Tue";
weekday[4] = "Now Thu Fri Sat Sun Mon Tue Wed";
weekday[5] = "Now Fri Sat Sun Mon Tue Wed Thu";
weekday[6] = "Now Sat Sun Mon Tue Wed Thu Fri";
var n = weekday[d.getDay()];
document.getElementById("dayfix").innerHTML = n;
</script>
And finally -
<div class="amazonworkaround" style="position: absolute; top: 0px; left: 625px;
width: 85px; height: 1800px; background-color: white; padding-left: 0px;
z-index: 101;"><p id="dayfix"></p></div>