Using flexible layouts within Wordpress

1

Hello

I am trying to work out how to use Hype’s flexible layouts feature to create content that scales proportionally within Wordpress pages. I have managed to get the content to scale proportionally (without distortion) by setting the Hype Scene to be 100% Width, then using the “shrink to fit” behaviour on the contents of the scene. The problem is that while the content scales down nicely, the hype Scene container DIV retains the same height.

As per example below, there is a large gap between the hype content and the Wordpress paragraph (“the quick brown fox”) that appears as you scale the browser window down.
http://dypp.lihdev.com/?page_id=19

Setting the scene Height to 100% (in addition to the width) causes the hype file to cover the entire page (over the top of Wordpress menus etc).

Is there a way to make the height of the scene scale down to the the same height as the flexible group contained within the scene contents?

Hype file attached in case this may help. Thanks in advance!

topics_menu.hype.zip (41.3 KB)

2

Hi raph,

set a class attribute of ‘heightSizer’ to your group, then run the script on sceneload. it’ll resize the hypecontainer.

window.onload = window.onresize = function(){

var hypeContainer = document.getElementById(hypeDocument.documentId())

var currScene = document.querySelector('#'+ hypeDocument.documentId()+' > .HYPE_scene[style*="block"]');
//https://forums.tumult.com/t/extend-tumult-hype-with-javascript-hypedocument-extensions/6847/19

var heightSizer = currScene.querySelector('.heightSizer');
var requestedHeight = heightSizer.getBoundingClientRect().height;
hypeContainer.style.height = requestedHeight + 'px'
}

topics_menu.hype.zip (26.5 KB)

if you do a forumsearch you’ll find several simular requests and a bunch of different solutions …

5 Likes
3

Worked perfectly, thank you!

4

Hello again!

I have been using the above solution now for many project, thank you! However, I currently can not use this solution because my container div is floated.

I have arrived at a workable solution (below) however this relies on my hard-coding the original width and height of the scene as specified in the hype GUI.

var hypeContainer = document.getElementById(hypeDocument.documentId());
hypeContainer.style.border = ‘2px solid red’;

window.onload = window.onresize = function(){

var original_height = 620;
var original_width = 674;	

var current_width = document.getElementById(hypeDocument.documentId()).offsetWidth;
var current_height = document.getElementById(hypeDocument.documentId()).offsetHeight;

var new_height = current_width * original_height / original_width;
hypeContainer.style.height = new_height + 'px';

I am wondering if there is any way to fetch the original height&width (specified in the GUI) via javascript?

I have tried this:

var currScene = document.querySelector(’#’+ hypeDocument.documentId()+’ > .HYPE_scene[style*=“block”]’);
var actualWidth = hypeDocument.getElementProperty(currScene, ‘width’);

…however this gives me the calculated width of the scene rather than the original width.

Here is my file:

vuca-v2.hype.zip (161.8 KB)

5

https://tumult.com/hype/documentation/3.0/#hypeDocument.layoutsForSceneNamed

:slight_smile:

6 
	var layoutsOfScene = hypeDocument.layoutsForSceneNamed(hypeDocument.currentSceneName());
	var currLayoutObj = layoutsOfScene.find(arrayElement => arrayElement.name == hypeDocument.currentLayoutName());
	var UIWidth = currLayoutObj.width;
	var UIHeight = currLayoutObj.height;
console.log(UIWidth)
console.log(UIHeight)
2 Likes
7

Once again Hans-Gerd, you have helped myself and my team immensely. We are singing your praises in the corridors. Much appreciated!

8

As much as Hans likes music :notes: - how about sending a check? :tada:

9

@raphroberts nice metaphor :slight_smile:

10

Hello, i have the same problem and the script works perfectly with one hype document on a Wordpress page. But i have 5 different documents on one Wordpress page and only one of the documents shows right. I have no experience with scripts. What need to change in the script to work?

11

Hello!

I ran into a similar issue. If you have multiple hype objects on a single wordpress page, this code should help you out. It uses the solutions from Hans (thank you Hans!), but swaps listeners instead of window.onload.

The script needs to be run on scene load, and change the “max-width” value to set the maximum width the file can scale up to. Hope this helps!

Raph

document.getElementById(hypeDocument.documentId()).style["max-width"] = "600px"; 

var hypeContainer = document.getElementById(hypeDocument.documentId());

var layoutsOfScene = 
hypeDocument.layoutsForSceneNamed(hypeDocument.currentSceneName());

var resizeScene = function() {	
	var currLayoutObj = layoutsOfScene.find(arrayElement => arrayElement.name == 
hypeDocument.currentLayoutName());
	var UIWidth = currLayoutObj.width;
	var UIHeight = currLayoutObj.height;		
    var current_width = document.getElementById(hypeDocument.documentId()).offsetWidth;
    var new_height = current_width * UIHeight / UIWidth;
	hypeContainer.style.height = new_height + 'px';
};

if (window.addEventListener) {
    window.addEventListener('load', resizeScene, false); 
    window.addEventListener('resize', resizeScene, false); 
} else if (window.attachEvent) {
    window.attachEvent('onload', resizeScene);
    window.attachEvent('onresize', resizeScene);
}

In some instances you may also need to call resizeScene() on scene load, add this right at the bottom on a new line:

resizeScene();
3 Likes
12

thanks @raphroberts, works great!

1 Like