Responsive Layout Changes from ver 3 to 4 Pro?

Hello,
I recently upgraded to the Pro version 4. I noticed that my page layouts created in Beta 4 have the proper switching between layouts (iPhone break point 568 --> iPad break point 1024). As I increase and decrease the size of the Safari preview, the page shifts between the desired layouts based on the break points. I noticed that my other earlier project that was created in version 3+ does not function this way. I confirmed that the settings were the same as far as Flexible Layout, Scale behavior, & Zoom contents. I began to wonder if there is some sort of conversion or update needed to an earlier project file/code to get newer Responsive Layout settings??? Thanks for your help!

Examples…
*iPhone Layout (Page Group selected) Scene settings


*iPad Layout (Page Group selected) Scene settings

*iPad Layout (Page Group selected) Metrics settings

*iPhone Layout (Page Group selected) Metrics settings

Do you think you could send a zip of your .hype document to support@tumult.com? I'd like to investigate this further.

There was one change that has (unintentionally) affected documents where the default shown layout is the largest size on v4 and was the smallest on v3. We found this can affect which layout is shown when the document is embedded in an iframe and shown on an iphone, but it sounds like you may be hitting a different case.

Can you also elaborate on this so we have specific steps to reproduce? This is on the mac, correct? Is this via command-plus/minus, or are you using responsive design mode?

Thanks!

Hype Version 3+ Project…

Hype Version 4 Project…

To reproduce the issue…

  1. Load the project in Hype
  2. Preview the project from Hype using the “Preview Current Layout in Browser” option which opens my project in Safari
  3. From there, I manually drag the corner of the Safari window to manipulate the window size.

The newer project will automatically change sizes as I approach the Break Point. The older project will either stay in the “iPad Layout” (if that is where I loaded the preview from) or it’ll switch from the “iPhone Layout” to the "iPad Layout and never switch back.

These are pretty different projects; the “ver2” has a lot of scripts/css added to the head which seems to change how the document is sized:

	<script type="text/javascript" src="LCC-Hype-ver2%20.hyperesources/__settings__.js"></script>
	<script type="text/javascript" src="LCC-Hype-ver2%20.hyperesources/audio.js"></script>
	<script type="text/javascript" src="LCC-Hype-ver2%20.hyperesources/background.js"></script>
	<script type="text/javascript" src="LCC-Hype-ver2%20.hyperesources/bootloader.js"></script>
	<script type="text/javascript" src="LCC-Hype-ver2%20.hyperesources/jquery-2.0.0.min.js"></script>
	<script type="text/javascript" src="LCC-Hype-ver2%20.hyperesources/jquery-ui-1.10.3.custom.min.js"></script>
	<script type="text/javascript" src="LCC-Hype-ver2%20.hyperesources/jquery.ui.touch-punch.min.js"></script>
	<script type="text/javascript" src="LCC-Hype-ver2%20.hyperesources/lang.js"></script>
	<script type="text/javascript" src="LCC-Hype-ver2%20.hyperesources/styles.js"></script>
	<link rel="stylesheet" type="text/css" href="LCC-Hype-ver2%20.hyperesources/widget.css" />
	<script type="text/javascript" src="LCC-Hype-ver2%20.hyperesources/widget.js"></script>
	<script type="text/javascript" src="LCC-Hype-ver2%20.hyperesources/__settings__5.js"></script>
	<script type="text/javascript" src="LCC-Hype-ver2%20.hyperesources/background5.js"></script>
	<script type="text/javascript" src="LCC-Hype-ver2%20.hyperesources/bootloader5.js"></script>
	<script type="text/javascript" src="LCC-Hype-ver2%20.hyperesources/lang5.js"></script>
	<link rel="stylesheet" type="text/css" href="LCC-Hype-ver2%20.hyperesources/slidergame.min.css" />
	<script type="text/javascript" src="LCC-Hype-ver2%20.hyperesources/widget5.js"></script>

These lines are the result of adding files to the Resources Library. I don’t know which specifically causes the issue, but deleting them all seems to fix the problem (I tested against an export and just modified the .html).

The expected behavior from Hype is that the layout will change automatically when the window is resized.

Thanks Jonathan! I have similar scripts in the other project as well (if you search .js in the Resource Library). The funny thing is that they do not appear in the in it’s “Head HTML” like what you provided above. I’m not sure why in the “LLD…” file they all show up in the “Head HTML” but not in the “LMS…” file?

I was looking through my project files and I thought it might be a good feature to add the ability to turn on and off Scenes and Layouts like Layers in Photoshop. I think this could help for debugging purposes. :smiley:

Update… I removed the check in the check box for Include in document < head >. The resizing now seems to work and the Bookry activities still run properly. Thanks!

1 Like

These are files that you would have included in one document at some point, but not the other.

Do you know if they are in use or referenced in your document? If not you can just remove them, as unchecking "Include in document <head>" would already have them not be active in the export.