Forcing to a new Layout outside of Hype document

Using JavaScript with Hype
1

Hi all,

So I'm working on a homepage takeover which I'm almost finishing up with Hype although i'm running into a small issue.

Since I'm going for an adaptive approach I've made 3 layouts for the side skins of 150px width, 200px width and 250 px width. And for the height I've made a different scene per per height (600, 700 & 800) that contain these 3 width layouts.

The build in breakpoint feature in Hype for Layouts with the width and a small function to measure the height let h = document.documentElement.clientHeight; works great to call the scenes with the correct height

if (h > 751){
    HYPE.documents['Default'].showSceneNamed('right_800');
    } else if (h > 501 && h < 750){
    HYPE.documents['Default'].showSceneNamed('right_700');
    } else if (h < 500){
HYPE.documents['Default'].showSceneNamed('right_600');
    }

However, here is where the issue begins, this works great for the right skin. but for some reason the left skin template doesn't read any default width or height values. The developers of these takeover templates pointed me to use their methods.

    var totalVisibleHeight = (screenad.browserheight < totalHeight) ? screenad.browserheight : totalHeight;
    var totalHeight = document.body.getBoundingClientRect().height;
    let w = (Math.ceil(screenad.browserwidth * screenad.zoom) - parseInt(siteObject.width)) / 2 + parseInt(siteObject.skins_offsetx);
    let h = totalVisibleHeight = (screenad.browserheight < totalHeight) ? screenad.browserheight : totalHeight;

And this works perfect, it displays the correct height and width now, but the problem is that the default Hype breakpoints don't work with the way this is used. So for the left skin I've typed out a huge if else statement tree for every combination of width and height I'm using.

function resizeTimeline(){
  // let w = document.documentElement.clientWidth;
  // let h = document.documentElement.clientHeight;
  var totalVisibleHeight = (screenad.browserheight < totalHeight) ? screenad.browserheight : totalHeight;
  var totalHeight = document.body.getBoundingClientRect().height;
  let w = (Math.ceil(screenad.browserwidth * screenad.zoom) - parseInt(siteObject.width)) / 2 + parseInt(siteObject.skins_offsetx);
  let h = totalVisibleHeight = (screenad.browserheight < totalHeight) ? screenad.browserheight : totalHeight;
  if (w > 251 && h > 801){
    //Layout 250
    //Scene 800
    console.log('Layout 250 and Scene 800');
    HYPE.documents['Default'].showSceneNamed('right_800');
    HYPE.documents['Default'].showLayoutNamed('right_250_800');
} else if (w > 200 && w < 250 && h > 801 ){
    //Layout 200
    //Scene 800
    console.log('Layout 200 and Scene 800');
    HYPE.documents['Default'].showSceneNamed('right_800');
    HYPE.documents['Default'].showLayoutNamed('right_200_800');
} else if (w < 200 && h > 801){
    //Layout 150
    //Scene 800
    console.log('Layout 150 and Scene 800');
    HYPE.documents['Default'].showSceneNamed('right_800');
    HYPE.documents['Default'].showLayoutNamed('right_150_800');
} else if (w > 251 && h > 701 && h <800){
    //Layout 250
    //Scene 700
    console.log('Layout 250 and Scene 700');
    HYPE.documents['Default'].showSceneNamed('right_700');
    HYPE.documents['Default'].showLayoutNamed('right_250_700');
} else if (w > 200 && w < 250 && h > 701 && h <800){
    //Layout 200
    //Scene 700
    console.log('Layout 200 and Scene 700');
    HYPE.documents['Default'].showSceneNamed('right_700');
    HYPE.documents['Default'].showLayoutNamed('right_200_700');
} else if (w < 200 && h > 701 && h <800){
    //Layout 150
    //Scene 700
    console.log('Layout 150 and Scene 700');
    HYPE.documents['Default'].showSceneNamed('right_700');
    HYPE.documents['Default'].showLayoutNamed('right_150_700');
} else if (w > 251 && h < 700){
    //Layout 250
    //Scene 600
    console.log('Layout 250 and Scene 600');
    HYPE.documents['Default'].showSceneNamed('right_600');
    HYPE.documents['Default'].showLayoutNamed('right_250_600');
} else if (w > 200 && w < 250 && h < 700){
    //Layout 200
    //Scene 600
    console.log('Layout 200 and Scene 600');
    HYPE.documents['Default'].showSceneNamed('right_600');
    HYPE.documents['Default'].showLayoutNamed('right_200_600');
} else if(w < 200 && h < 700){
    //Layout 150
    //Scene 600
    console.log('Layout 150 and Scene 600');
    HYPE.documents['Default'].showSceneNamed('right_600');
    HYPE.documents['Default'].showLayoutNamed('right_150_600');
}
}

The console log shows the correct desired outcome of layout and scene, the scenes change also to the correct height. However, the width doesn't seem to update.

Hence my question: Is the HYPE.documents['Default'].showLayoutNamed('right_150_600'); correctly used like this? Or is there something else that I need to add in to force it into this layout, as I suspect the reason that I don't see any changes are that it is automatically changing to the biggest layout?

Hopefully someone has the magic tip to forcefully change the layout from outside a Hype document.

2

On each Hype Layout Request event, the regular breakpoint engine takes over and resets changes you made. Reverting your layout to what it thinks should be displayed. You can take complete control over the layout engine by registering an event handler for Hype Layout Request:

Put this in Head HTML:

function HypeLayoutRequest(hypeDocument, element, event) {
	// depending on your logic return the layoutname you want to force
}

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

not shure if this'll help ...Responsive layouts, distinguish portrait and landscape - #3 by h_classen

should serve the best fitting Hypelayout to the given space

3 Likes
4

I'm not quite sure if i'm doing it right, i've added all the if/else statements and the variables regarding the layout change in this function, but it doesn't give any effect. I think I'm doing something wrong, as for now I keep the scene changes in the old function I had above, but moved the Layout statements to this function.

5

Amazing!, after I adjusted the widht and height variables to the ones from the takeover template it works like a charm!

1 Like
6

i'm a bit unclear :slight_smile: on which approach worked for this task

7

The piece of code that you send me was the solution I ended up going with :+1:

Much appreciated!

1 Like
8

that's great :slight_smile: especially as it is a general approach and simply reusable... thx for answering :slight_smile: :+1:

1 Like