Actions based on viewport size

Hi Tumult Forum,

Wondering if its possible (through “custom behaviour” or written javascript or css) to have elements react to actions based on viewport width and height. Open to solutions using only css pages and js functions, but would really like to find a way to make it work with waypoints.

e.g: when viewport changes to x height, reduce opacity of specified object by 10%

Not really clear how you want elements to ‘react’ but you can get the width of the Hype element in JS using:

var currentWidth = document.getElementById(hypeDocument.documentId()).offsetWidth

(offsetHeight is the height equivalent)

So then it would be a matter of creating if / then JavaScript statements to do different things based on these values.

if (currentWidth < 500 && currentHeight < 600 )
  { // do something here  

I’m desperately trying to make sense but I understand this probably sounds confusing.

A better example would be to do it using the “breakpoint width” value, so you could have an “action” called something like “on breakpoint” in the actions menu. So that when your viewport shrinks you have something to set off timelines and effects, you could use any of the options already available: “go to URL”, “start timeline”, “pause timeline”…

I’m basically trying to recreate a bootstrap effect, where all the elements rearrange themselves as your shrink your window/viewport.

What you’ve posted might work for me, but I was hoping to find a workaround that doesn’t require JS, or CSS.

Thanks for the quick reply!

The best equivalent to this is the ‘On Layout Load’ action, which occurs when that layout is loaded (whether on first load or when reducing or increasing the browser width to within that layout’s dimensions).

Sort of like masonry?

I can probably do it on layout load, can’t believe I didn’t think of that, and this Masonry plugin is pretty slick!

Thanks for the help.

1 Like