Reload H5P after changing display from none to block

Submitted by Alexander Voigt on Thu, 03/26/2020 - 16:19
Forums: 
General discussion

Dear H5P experts,

on a webpage I'm wrapping a H5P inside a <div>. The <div> has style="display:none". I.e. when the page loads, the <div> (and thus the contained H5P) is not displayed. So far, so good.

Now, on the webpage I have a button, which (when clicked) changes the style of the surrounding <div> to style="display:block". I.e. clicking the button makes the <div> visible.

The issue is, that when the <div> becomes visible, the H5P inside the div is still *not* visible. This is strange and not the behaviour I desire. I'd like the H5P to also become visible when the surrounding <div> becomes visible.

However, when I then resize my browser, the H5P suddenly becomes visible! From this behaviour I'd guess, that the H5P on the webpage must be somehow "refreshed"/"reloaded".

My question is: How can I make the H5P visible, when the surrounding <div> becomes visible? Is there a way to "refresh"/"reload" it using JavaScript?

Many thanks in advance for your help!

Best regards

Alexander Voigt

 

Content types: 
all content types
otacke's picture

otacke

Thu, 03/26/2020 - 20:14

Hi Alexander!

This is not really strange, and there's even a page dedicated to this issue. Please see https://h5p.org/manipulating-h5p-with-javascript

Best,

Oliver 

Alexander Voigt

Thu, 03/26/2020 - 21:21

Dear Oliver,

many thanks for directing me to this site!

I've solved the issue using the hints on the site. For the record, I've added the following command to the function that is run when the button is pressed:

window.dispatchEvent(new Event('resize'));

Many thanks again and best regards,

Alex

otacke's picture

otacke

Thu, 03/26/2020 - 23:10

Hi Alex!

You're welcome.

Greetings from Hamburg,

Oliver