Problems with Flexible Rectangle element behavior

Responsive
1

Am having a few small problems with this otherwise successful Hype slider at this URL while in development:
http://www.peterlaundy.com/iroquois-valley/index.html

The two problems are:
1–If the div containing the iframe that contains the 1200Wx500D Hype document is too deep a proportion when the Hype file loads, the rectangle element at the left edge of the document extends down into the extra space between the bottom of the Hype document and bottom of the containing div. Note that as soon as the user begins to change the viewport size the Javascript kicks in to correct the problem and the rectangle jumps up to the same height as the rest of the items in the animation. Note also that I’ve got the rectangle and the group that it is part of pinned top, bottom and left and flexible vertically. Finally, note that I am using the github iframe and javascript code referenced in several other post replies to get the bottom of the Hype’s container div to conform to the height of the Hype file.

Is there a way around this problem? For example, is there a way to get the javascript to be triggered on loading, not just triggered on viewport resizing?

2–I am also using a 2px wide vertical rectangle butting up to the rectangle mentioned above to give the user info on timing of each slide. It works fine if the iframe is full size but not when it is less than full size because the rectangle does not scale down as the viewport scales down, so the timer reaches the culminating edge of the viewable file before time is up and then completes its animation outside the frame. I’ve tried this both animating a 500px deep rectangle to move and animating a rectangle to change depth from 1px to 500px. Again, they are pinned left, top and bottom, and flexible vertically.

Again, any solutions here? Perhaps there is a way to use CSS “vh” viewport height percentages so that at the beginning of the main animation timeline its length or bottom position is at vh: 0 and at the end of the animation it is vh: 100?

2

didn’t get in depth, but if onload fixes your prob:

window.onload = window.onresize = function (evt) {
///...
        }
3

That did the trick on the first issue. Many thanks, Hans!

The second issue, as I understand it, is about getting a rectangle element set to be flexible only in its vertical dimension to shrink down from its given size, not just expand up.

Can this be done in Hype?

Or do I need to create my largest layout at the smallest width it will work (around 480px) and depend on it to expand up to its largest width (1200px)? And if I do this, will jpg image quality suffer? I would import images that are the full 1200px wide (or 2400px wide for retina displays)?

4

you could get around if using layouts and flexible settings for elements instead of scaling all together via script though it’ll be much more effort on building the slider …

5

This technique? This demonstrates a flexible document placed within an iframe. The iframe will resize based on the dimensions of the <div> that it is placed within. This has the effect of closing any space above and below the iframe. · GitHub

One thing that might work is if you use standard CSS to expand a line to fit the maximum height of its container:

When you want the timer to start, you would add a class (as a timeline action):

var lineElement = document.getElementById("line");

// Optionally reset the class on the line element
// lineElement.className = "";

lineElement.className = lineElement.className + "expanding";

And then the CSS would be something like:

#line {
max-height: 0;
transition: max-height 5s linear;
width: 2px;
background: #FCFDFF;
}

#line.expanding {
max-height: 500px;
transition: max-height 5s linear;
}
6

Yes.

Daniel,
Thank you for the javascript and CSS. Looks like they would work. Is there a tutorial or sample file or something that would guide me in writing the full javascript timeline action function and inserting the CSS in the proper places within Hype, and show me whether the code accompanies a rectangular element drawn and animated within Hype or stands alone? Adding code to a Hype document will be a first for me.

7

Hi @Laundy

I haven’t looked into what you’re discussing but regarding your last post,

flexRect.hype.zip (14.0 KB)

This should help you.

D

8

DBear:

Thank you so much for taking the time to make this!
Exactly what I was looking for.

After studying it and playing around with it, I still don’t understand how:

  • You accessed the field in which you were able to enter the Head HTML
  • What connects the Javascript timeline actions specifically to “Rectangle” (I added another rectangle to the timeline and the Javascript had no effect on it)
9

Coming back to this after a break, I was able to answer my last two questions about the much appreciated file DBear sent me. And to also see that what I am trying to do can be achieved without using code when I run it horizontally. So the issue is getting what works horizontally to work vertically.

Jumping to what I think the solution is. I suspect I need to:

  • Check the vertical scale box in the scene inspector, rather than leaving it unchecked, to activate vertical scaling
  • Use some other way to preserve the aspect ratio of the file than the github iframe and associated javascript noted earlier in this set of posts, which seems to break when vertical scaling is checked. I think this is where I need help.

I've built a page explaining the goals and identifying and showing the problems I am having in reaching them.

FWHypeFlexibleTimerTest

Here's hoping this clarifies my issue and request.

10

Sent this out late Friday, so it is pretty deep in the inbox on Monday morning. Hope that’s the reason for no feedback.