Width/high ratio based document/layouts

Responsive
1

Hi. I’d like to create a project with two layouts per scene (Landscape and Portrait). Layouts should switch based on width/high ratio and not the breakpoint. For example for 4/3 or more W/H window ratio project should use ‘Landscape’ layout and for W/H ratio smaller than 4/3 project should use Portrait layout.
Is it possible in Hype? I attach layout example.

test_W-H_ratio.hype.zip (27.4 KB)

2

you may try this in your documents head:

<script>

function layoutRequest(hypeDocument, element, event) {

var width = window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth);
var height = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);
var ratio = width/height;

if(ratio >= (4/3)){
return 'Landscape';
}else{
return 'Portrait';
}
}


  if("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
  }
  window.HYPE_eventListeners.push({"type":"HypeLayoutRequest", "callback":layoutRequest});
</script>
5 Likes
3

Wow so speedy. It looks it works perfectly.
Thanks so much.