Using flexible layouts within Wordpress


(raph) #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)


(Hans-Gerd Claßen) #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 …


Retrofit a Responsive design?
(raph) #3

Worked perfectly, thank you!


(raph) #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)


(Hans-Gerd Claßen) #5

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

:slight_smile:


(Hans-Gerd Claßen) #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)

(raph) #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:


(Hans-Gerd Claßen) #9

@raphroberts nice metaphor :slight_smile: