Setting a Hype-Widget to full Browser

Hello Community,

as I am using Hype more and more as Widgets only I was wondering about a “Fullscreen”. Not in the sense of getting rid of the Browser-Frame but rather expanding a Hype-Widget that is in the flow of a regular HTML-Page to be fixed and 100% on width and height.

I wipped up this example to improve on. I ran into te issue that if I initially don’t set the site in the Hype-Edditor to 100% scale it won’t work as hype is doing some manual width/height stuff on the Hype-Element-Class level that get turned of if a Hype-Widget is posted with fixed dimensions. @jonathan : Is there a way to trigger the render engine to switch the internal calculations mode from 100% to fixed size?

So this example uses a 100% scale version… I boxed it with some margin so you can see the change :slight_smile:

Feedback/Suggestions welcome.

Todo: Smooth Animation. Selfcontained CSS.

hypeexpand.zip (98,9 KB)

2 Likes

What is your need for the toggle function? What situations compared to not having the toggle?

Very simple: imagine having a Hype-Widget embeded in a regular HTML-Page (from a CMS for example) displaying a graph, animation, map or something else. After clicking expand the space gets maximized to interact with the content. For a graph this could mean more data or better filters. An map about an archeological site could show extended information or images etc. the idea is to use the maximized space for an interactive version of an widget that in the small version is more of an Call To Action and not distracting to much from the surrounding text/content.

The answer is basically no currently. You have a nice (and simple) solution.

I think to achieve this Hype would need:

  1. To allow switching from absolute positioning to fixed positioning (this has been a very long standing request!)
  2. To have that switching be an animatable property
  3. For flexible layout to not look at the element's container sizing but to look at the document (viewport) sizing when in fixed mode

The padding would be accomplishable as the action that changes positioning can also change the top/left/width/height (or even padding properties) at the same time.

This solution would be on the elements. You'd just make a top-level group most likely with the flexible layout options. Maybe there's also a way I could have this work at the document level too. (It has been another long-standing request that flexible layout work for the whole doc)

I understand now what the application of it is. Thanks!

1 more vote!

1 Like

Actually I just realized there is an upcoming project that your idea will be useful for.