How to centre hype doc in iframe when window is smaller than content

1

hey there,
I am creating a web banner for a homepage you can see my proof of concept build here proof_of_concept which incorporates some frame-by-frame animations and a parallax effect.
I am hoping to insert the hype file as an iframe. But because i will have titles positioned in the centre, I want the content to be centred at all times which is easy when the window size is larger than the hype document size. But as soon as the window is smaller than the hype width dimensions the content is stuck to the left of the screen (see diagram below) Is it possible to have the content “float” in the centre even when the window is smaller that the content? If someone could enlighten me it would be much appreciated.
Many thanks in advance
Dave

floating_iframe.jpg691×560 51.2 KB

2

Hi Dave (@macmonkey)

Have a look at making your hype project responsive that way it will adapt to it’s environment.

http://tumult.com/hype/documentation/3.0/#document-scaling

Here is the documentation on scaling.

D

3

onSceneload:

hypeWidth = parseInt(document.getElementById(hypeDocument.documentId()).style.width)
    
    window.onload = window.onresize = function (){
    var windowWidth = window.innerWidth||  (window.document.documentElement.clientWidth|| window.document.body.clientWidth);
    if(windowWidth < hypeWidth)
    {
    document.getElementById(hypeDocument.documentId()).style.left = '-' + (hypeWidth-windowWidth)/2 + 'px'
    }
    }

btw great banner!

1 Like
4

hi Hans-Gerd
Wow that’s perfect!! You sir are a kind and talented man. I and each and every one of my few remaining hairs thank you :slight_smile:

1 Like
5

Cheers DBear,
I did have a look at that but still couldn’t get it to behave. But that may very well be down to a lack of knowledge on my behalf :slight_smile:

6

bit of over the top :wink: but thx :slight_smile: