we are having a div problem with its basic width. The inStyle options that are set to the hype_container is somewhat of a problem. When we have a Banner that has a size of 300x600px and when the scene and timeline divs get injected inside the hype_container the container has a width of 100%. And when we send out Banners for Adform.com they generate anclickTagbefore or around thehype_container. This results that the click-area is not the width of the banner, but of thehype_container` and that is often too wide, as it is set to 100% width.
From what I can tell by looking at the screenshot, the Hype container div is using Flexible Layout (the scene width/height scale settings in the Scene Inspector are set to 100%), but it looks like your ad is just meant to only be 300x600? If so can you disable the flexible layout?
Otherwise it’d be great to get a copy of your .hype document and instructions on how you’ve setup the ad on adform to reproduce and take a closer look.
thank you for replying. I would like the banner to scale freely as it is an Sitebar Banner. But only the Banner and I can only set it to scale when I activate the layout to be flexible.
If there is an other way I would like to know about it.
you can try to set scene- and documentwidth accordingly to the layoutratio.
keep responsivelayoutsettings and run the script On Prepare For Display:
let sceneEl = element;
window.addEventListener('resize', setWidth)
setWidth(e)
function setWidth(e){
let currLayout = hypeDocument.layoutsForSceneNamed(hypeDocument.currentSceneName())[0]; //works only if there is just one layout ...
const ratio = currLayout.width/currLayout.height;
const windowHeight = window.innerHeight;
let absoluteWidth = ratio*windowHeight;
//console.log(absoluteWidth); console.log(windowHeight); console.log('')
hypeDocument.setElementProperty(sceneEl, 'width', absoluteWidth);
let hypeDoc = document.getElementById(hypeDocument.documentId());
hypeDoc.style.width = absoluteWidth + "px";
hypeDoc.style.position = 'absolute';
}
Everytime you write something with code Hans-Gerd, I am like this little kid looking the stars for the first time and I don’t know what I am seeing but it is magical.