Responsive hype object not working in bootstrap modal


(raph) #1

Hello!

I am wondering if anyone could help solve this problem. I have a hype file set to scale responsively, however I am using this hype file inside a bootstrap modal window. When the modal displays, the hype file is invisible until the browser window is resized slightly. You can see the problem at the below link, if you let the page load then click ‘Preparing for study’ then resize the browser window.

https://content.une.edu.au/2019/media-showcase/index.html

I have tried resizing the modal window after it is displayed via javascript, to see if this would trigger the object to appear, however this has not helped.

Hype file and bootstrap code are both attached. Thanks all!

Archive.zip (2.0 MB)


(Hans-Gerd Claßen) #2

try to edit your modal code like this:

$(function(){
    
    $('#modal-preparing').on('shown.bs.modal', function (e) {
        
         $(".respondy").css("width", "800px");
         $(".respondy").css("height", "600px");
HYPE.documents['time_management_tool_responsive'].relayoutIfNecessary();
    });
    
    $('.closer').click(function(){     
             $('iframe').contents().find('video').each(function () 
            {
                this.pause();
            });
    });    
});

explanation is here: https://tumult.com/hype/documentation/3.0/#relayoutIfNecessary

to make a more robust setup you can also use hypes event callback system:
https://tumult.com/hype/documentation/3.0/#invoking-api-from-outside-oftumult-hype


(raph) #3

Wonderful! Thank you! :grinning: