Responsive layout works in HTML, but embedding wordpress OAM doesn't detect resize

1

Ok I've got a responsive layout test working great. When viewing directly in the browser, when you resize the browser window the hype doc triggers window.onresize and it displays the correct layout as you drag the browser window.
However when I embed into wordpress as an OAM file, hype can no longer detect that the browser window has been resized and the page needs to be hard refreshed/loaded again to pick up the new browser size.

Working correctly (direct): responsive-test8

Wordpress embed (same document as above just inside wordpress as DIV code):
https://html5dev.art/hype-responsive/

This is the resize detection code in hype:

window.onresize = function(event) {
            var w = document.documentElement.clientWidth;
            var h = document.documentElement.clientHeight;



            if (w > 1200) {
                globaldoc.showSceneNamed('wide');
            } else if (w > 799 && w < 1200) {
                globaldoc.showSceneNamed('desk');
            } else {
                globaldoc.showSceneNamed('mobile');
            }
    }

How can I get hype to recognize it's been resized in the wordpress window and trigger the window.onresize function? Thank you

2

why don't you use layouts?

anyway ... quick and dirty you can add a blindscene in first place, add your code from the head to a sceneloadaction and switch to next scene

1 Like
3

Oh wow I did not know about layouts. I'm doing it the hard way... ok going to try layout and see if it works properly. Thank you.

1 Like
4

sceneloadaction just runs once the scene is loaded though, correct? So in the case of the Wordpress page, the scene is loaded and it detects for the right scene. But when I resize the window, nothing calls the sceneload again, unless I refresh the page.

What I need to figure out is how to get the document to load the correct scene as the browser window is being actively dragged around. Works perfectly in html directly. the problem im having is the wordpress embedding won't detect the window-resize actively, the whole page needs to be refreshed.

5

Ok the layout mode works in wordpress embed. so will go that route. thx!

1 Like
6

A couple of points that might help:

  • "On Scene Load" transforms to "On Layout Load" when you use multiple Responsive Layouts, and is run whenever there is a layout change. (Fundamentally, layouts are just scenes under-the-hood).

  • Hype's runtime installs a listener to the window's resize event, so anytime the window changes size it should try seeing if there's a better layout that fits. If it isn't changing sizes, then its parent div may be what is not adjusting properly. (Or there could be more rare scenarios, like this event listener somehow getting uninstalled).

  • If need be, you can manually call the hypeDocument.relayoutIfNecessary() API, which will invoke the layout change logic. If you don't have a hypeDocument object in that context you can use the global HYPE.documents["docNameHere"].relayoutIfNecessary() style of call.

Edit: looks like you got it figured out from the above post!

1 Like
7

Ok I'm back!

I'm having an issue with referencing the Unique Element IDs now in different layouts. The code I've written moves things around dynamically. With each layout, the Unique element IDs get erased... Is is possible for all the same images to have the same unique element ID across all layouts? thanks

Edit: I'm also seeing each layout is it's own timeline... looks like I have to remake and code each layout individually.

8

IDs must be unique. So, the moment you started using Layouts, Hype created an intermediary lookup and changed duplicate ids to references them internally through a lookup. You can only target the element by the old ID using hypeDocument.getElementById and not the document version. That is why I mostly only use class based targeting

2 Likes
9

if it's to much work switching to layouts ... your first attempt works too ... just make sure that you do not place your code in the hype-doc-head cause the OAM-DIV-Embed in wordpress will strip this code ...

...or use iFrame as embed

2 Likes
10

Ah thank you that's a great tip. I ended up creating my global variables in the wordpress header. Overall layouts worked much better than me trying to do it myself using scenes and my own listeners.

Thanks for the great tips. Will use layouts from the start next time.

2 Likes