Disable automatic layout switching

Responsive Responsive Layouts
1

Hello!

I'll try to keep this one as simple as possible.

I have a project with 5 layouts:

  • desktop_landscape
  • tablet_landscape
  • tablet_portrait
  • mobile_landscape
  • mobile_portrait

I'm using JS to detect device and orientation, and due to the nature of the content, I need to manually trigger layout switching.

Specifically, when viewing the project on desktop, in no way should the layout switch - regardless of window width (the project scales up or down to match the window)

any ideas?

thank you!

2

That's pretty easy, just use the following hype event HypeLayoutRequest.

First, add this to your head HTML in a script tag. So, basically, where it says “your code goes here”, add your layout detection method and then return the layout name.

function HypeLayoutRequest(hypeDocument, element, event) {
	//your code goes here
}

if("HYPE_eventListeners" in window === false) { window.HYPE_eventListeners = Array(); }
window.HYPE_eventListeners.push({type:" HypeLayoutRequest", callback: HypeLayoutRequest});
2 Likes
3

Once again @MaxZieb saves the day! Thank you!!!!

4

I may have spoken a little too soon. Here is what I just tested (added to the head JS)

function HypeLayoutRequest(hypeDocument, element, event) {
	hypeDocument.showLayoutNamed('desktop-landscape');
}
if("HYPE_eventListeners" in window === false) { window.HYPE_eventListeners = Array(); }
window.HYPE_eventListeners.push({type:" HypeLayoutRequest", callback: HypeLayoutRequest});

So, it IS just showing the desktop layout, BUT, it's still attempting to refresh/redraw the layout, if that makes sense. In some cases when I resized the window, the tablet layout flashed for a second before reverting back to the desktop layout.

5

No just return the layout name.

function HypeLayoutRequest(hypeDocument, element, event) {
    // your logic here if/else etc.
    return 'desktop-landscape';
}
if("HYPE_eventListeners" in window === false) { window.HYPE_eventListeners = Array(); }
window.HYPE_eventListeners.push({type:" HypeLayoutRequest", callback: HypeLayoutRequest});
2 Likes