Javascript help to fix problem page.

Hiya all,

I need some help in writing some javascript to mend an issue on a page of my website.

Problem 1. You can see that the four tabs on this page should each have an interactive map. Only the first tab displays the map. This is a known problem with the H5P content that I have used to make the maps. It doesn’t know the size of the tab and so defauts to a 0 size for display. If you click on one of the tabs and then hit restore on your browser, the map will get the size info it needs and will display. I have been informed on the H5P forum that I need to add a script:

window.dispatchEvent(new Event(‘resize’));

This should be triggered every time one of the four tabs is clicked. Is there a way to put this in a script in the header so that the script will be active all the time a visitor is on the page?

2. Sometimes the initial view of the first map is bigger than the tab. I have set the iframe dimension to a suitable size but it doesn’t always work.

Many thanks in advance,

Nige.

The page I need help with: [log in to see the link]