Max-width in Hype Preview in Browser

Responsive Flexible Layouts
1

I’m a new Hype user, coming over from Edge Animate. So far it’s going great!

One issue: I’m embedding my flexible-layout Hype project in a web page. I’ve figured out how to give my document a max-width by going to Edit Head HTML… and adding this css (and replacing with the actual name of my document):

#_hype_container { max-width: 600px; }

The max-width works perfectly when I export as html and open the resulting file in a browser. It also works perfectly when I embed the Hype-generated div in a container page and manually include the max-width style in the page.

But the max-width does not work when I do Preview in Browser from Hype.

Is there another way I can apply max-width to my group that will work Preview in Browser from Hype? I know this is a minor issue, but I’d like to get it right.

Thanks!

bartmc

3

yes, you can apply the max_widht directly in the project, just add the class to the main group with my CSS

.max_widht {
	margin-right: auto !important;
	margin-left: auto !important;
	padding: 0 !important;
	max-width: 1200px !important;
	right: 0 !important;
	left: 0 !important; 
}

Screen Shot 18.png849×124 114 KB

With this code you can add another virtual layout!
Sometime you get an incorrect preview but the output is ok

max_widht.hype.zip (330.6 KB)

1 Like
4

Thank you - this does seem to produce ok output, but so does my simpler method above.

My problem is to get both an accurate preview and good html on export.

BTW, I don’t know how to properly insert code in this forum, so my code block got a little messed up. That code block should look like this:

#filename_hype_container {
max-width: 600px;
}

Any other ideas?

bartmc

5

not the same

add CSS code hype is a forcing, the preview respects the rules of hype and not the external code.

good luck :slight_smile:

6

This makes sense, thank you!

bartmc

7

take a look, this is another example with custom CSS, incorrect preview but very useful in the responsive web development

8

My best solution for this, as a newcomer to Hype, was to design my Hype project at the largest size I want it to appear at, and set the scene’s scaling to width only. This effectively gives my embedded Hype project a max-width the same as its size in Hype. This way I get a preview in Hype that matches the project’s behavior after exporting as html, which is important to me for this particular project. I can then edit the css for the container after export, if I need to do that.

Michelangelo, thanks for your help!

bartmc

9

You could add some javascript code to the HTML Head that would set the max-width property:


<script>

  function myCallback(hypeDocument, element, event) {
    document.getElementById(hypeDocument.documentId()).style["max-width"] = "600px";
  }

  if("HYPE_eventListeners" in window === false) {
    window.HYPE_eventListeners = Array();
  }
  window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":myCallback});

</script>
3 Likes
10

This is just what I needed, thank you!

Can you tell me how to add a min-width to this function? To start, I tried just changing “max-width” to “min-width” in your example, but it doesn’t seem to work, and I don’t understand how to add additional properties to the basic function you gave me.

Any help is much appreciated!

bartmc

11

Just add

document.getElementById(hypeDocument.documentId()).style["min-width"] = "whatever";

under the similar line for max-width

12

Hi DBear - I tried that, but min-width is not working for me. Maybe I’m misunderstanding something fundamental about Hype. I’ll attach my test file below.

Here’s my code with that line added:

function myCallback(hypeDocument, element, event) { document.getElementById(hypeDocument.documentId()).style["max-width"] = "600px"; document.getElementById(hypeDocument.documentId()).style["min-width"] = "400px"; }

if(“HYPE_eventListeners” in window === false) {
window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({“type”:“HypeDocumentLoad”, “callback”:myCallback});

max_width_js.hype.zip (50.4 KB)

bartmc

13

The code you sent appears to work for me when I test in Safari/Chrome, with the caveat that nether let you resize a window to less than 400px anyways! When I change your values to something like 600px min, 800px max, I can see that it will show a scroll bar when the window is less than 600px, scale the item from 600-800, and then get no bigger at > 800.

14

Jonathan, you’re absolutely correct. I am now very embarrassed.

Thank you for a great product and great support!

And a big thanks to Michelangelo and DBear for their help as well.

bartmc

1 Like