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:


(stephane wagner) #4

Hello, have the same problem but cannot invoke relayoutNecessary function … seems to call an typeError as function is not recognised by the navigator !

I first click on a call to action that open a modal contain the HYPE file.js


(Jonathan Deutsch) #5

I’d guess you are either calling too soon (before the hype document has loaded) or you are not using the correct reference to the hype document object. It’d be helpful to see your code, preferably as a zip of your .hype document to know what you’re trying to do.