Add a Weather Widget

Using weatherwidget.io in a Menuboard Manager presentation

Marc Rosenberg avatar
Written by Marc Rosenberg
Updated over a week ago

You will need to add CSS, Javascript, and HTML to a presentation for your weather widget to work. Some example code is shown below.


In the Presentation Editor, go to the CSS tab and paste the following code:

.weatherwidget-io{
left: 237px;
display: block !important;
position: absolute !important;
text-align: left !important;
width: 670px !important;
/*height: 550px !important;*/
top: 737px;
}

Next, go to the JS tab and paste the following code:

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');

var fields=document.getElementById('fields');
var children=fields.children;
hideFields();
var weatherWidget=document.getElementById('weatherwidgetIo');
var firstPress = document.getElementById("playlist").firstChild;
var observer = new MutationObserver(function(mutations, _){
for (mutation of mutations) {
if (mutation.type == 'attributes' && mutation.attributeName == 'style') {
if (firstPress.style.visibility ==='visible') {
weatherWidget.style.visibility='visible';
hideFields();
}else{
weatherWidget.style.visibility='hidden';
showFields();
}
}
}
});
observer.observe(firstPress, {
attributes: true
})
function showFields() {
for(var i=0; i<=children.length; i++) {
if(children[i])
children[i].classList.remove("hide-prices");
}
}

function hideFields() {
for(var i=0; i<=children.length; i++) {
if(children[i])
children[i].classList.add("hide-prices");
}
}
setTimeout(function(){
window.location.reload();
}, 2.88e+7);

Next, go to the HTML tab and paste the following code:

<a class="weatherwidget-io" id="weatherwidgetIo" href="https://forecast7.com/en/32d76n97d33/fort-worth/?unit=us" data-label_1="FORT WORTH" data-label_2="WEATHER" data-font="Arial Black" >FORT WORTH WEATHER</a>Modify the CSS to position and size the weather widget.

Modify weather widget position & size in CSS

Specify the correct weather locale in HTML

More settings at https://weatherwidget.io/

Did this answer your question?