Is it possible to embed Hype HTML inside another Hype document?

Exporting & Previewing
1

The question is kinda dumb, but is it possible to embed a Hype HTML into an element inside another Hype document other than the HTML widget?

In short, can I put this html code inside a RECTANGLE innerHTML?

<div id="widgetads21_hype_container" style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;" aria-live="polite">
	<script type="text/javascript" charset="utf-8" src="assets/widgetads21_hype_generated_script.js?32993"></script>
</div>

I’m trying but doesn’t seems to work. Is there a way to make it work?

Thank you.

2

Yes, but i have no idea why one would want too. But still

Get the files from the exported HYPE doc:

Add them to the resources of the new HYPE Doc:

Add a HTML Widget, the Doc needs its own environment, and add the following snippet:

Screen Shot 2015-05-19 at 14.53.05.png807×798 216 KB

<script type="text/javascript" src="${resourcesFolderName}/jquery-2.1.3.js"></script>

<div id="itemcartproj_hype_container" style="margin:auto;position:relative;width:600px;height:400px;overflow:hidden;">/div>
	<script type="text/javascript" charset="utf-8" src="${resourcesFolderName}/itemcartproj_hype_generated_script.js">        </script>

And thats it :smile:

2 Likes
3

Thanks for replying MrAddy.

I want to do this because my project is about widgets in a dashboard. In this case, I created the widgets in separated Hype documents because which one will behave differently and they need to be treated differently because of the responsiveness. Being said, in the beginning I tried to do everything in a single document, but not only the responsiveness wasn’t good enough, the project became SO heavy that it was taking ages to interact with the elements and to load it in any browser. While generating more resources for the browsers to load, my solution is still acting a LOT more faster and to be honest, I really don’t know why.

I don’t know if you notice in my last topic but that innerHTML inside that rectangle had a lot of iframes which they were loading the widgets I created in separated Hype files. It works, but I don’t want to use the iframe because iframes are causing me a lot of headache in terms of browser compatibility.

So, instead of using this code below…

<div id="freewall_container" class="dwrapper">
	<div class="layout">
		<div class="free-wall">
			<div class="widget aspect22">
				<iframe width="100%" height="100%" src="widget-corporate-news-43.html" style="border: 0px; position: absolute; overflow: hidden;"></iframe>
			</div>
			<div class="widget aspect22">
				<iframe width="100%" height="100%" src="widget-ride-22.html" style="border: 0px; position: absolute; overflow: hidden;"></iframe>
			</div>
			<div class="widget aspect22">
				<iframe width="100%" height="100%" src="widget-weather-22.html" style="border: 0px; position: absolute; overflow: hidden;"></iframe>
			</div>
			<div class="widget aspect22">
				<iframe width="100%" height="100%" src="widget-corporate-documents-22-2.html" style="border: 0px; position: absolute; overflow: hidden;"></iframe>
			</div>
			<div class="widget aspect21">
				<iframe width="100%" height="100%" src="widget-birthdays-21.html" style="border: 0px; position: absolute; overflow: hidden;"></iframe>
			</div>
			<div class="widget aspect22">
				<iframe width="100%" height="100%" src="widget-corporate-calendar-22.html" style="border: 0px; position: absolute; overflow: hidden;"></iframe>
			</div>
			<div class="widget aspect22">
				<iframe width="100%" height="100%" src="widget-corporate-videos-22.html" style="border: 0px; position: absolute; overflow: hidden;"></iframe>
			</div>
			<div class="widget aspect22">
				<iframe width="100%" height="100%" src="widget-poll-22.html" style="border: 0px; position: absolute; overflow: hidden;"></iframe>
			</div>
			<div class="widget aspect21">
				<iframe width="100%" height="100%" src="widget-ads-21.html" style="border: 0px; position: absolute; overflow: hidden;"></iframe>
			</div>
		</div>
	</div>
</div>
<div style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #929292; width: 100%; height: 140px;">
  <hr style="background-color: #DFDFDF; width: 97%; height: 2px; display: block; margin: 0 auto; border: 0px;">
  <div style="width: 100%; height: 46px; text-align: center; line-height: 54px;">
      <span>Copyright © 2015 <strong>Empresa.</strong></span>
  </div>
  <div style="width: 100%; height: 46px; text-align: center; line-height: 40px;">
      <a href=""><span>Termos de Uso</span></a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href=""><span>Regras e Condutas</span></a>
  </div>
  <div style="width: 100%; height: 46px; text-align: center; line-height: 34px;">
    <span style="margin-right: 5px;">powered by</span><img style="vertical-align: middle;" src="assets/logo-upoint-2x.png" width="64px" height="20px">
  </div>
</div>
<script type="text/javascript">
	$(function() {
		$(".free-wall").each(function() {
			var lwidth = $('#freewall_container').width();
			var wall = new freewall(this);
			wall.reset({
				selector: '> div',
				animate: true,
				cellW: 320,
				cellH: 160,
				onResize: function() {
					var cwidth = wall.container.width();
					wall.container.find('.full-width')
					.each(function(index, item){
						wall.fixSize({
							block: item,
							width: cwidth
						});
					});
					wall.fitWidth();
				},
			});
			wall.fitWidth();
		});
		$(window).trigger("resize");
	});
</script>

I want to use like this:

<div id="freewall_container" class="free-wall">
	<div class="widget aspect22">
		<div id="widgetcorporatenews43_hype_container" style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;" aria-live="polite">
			<script type="text/javascript" charset="utf-8" src="assets/widgetcorporatenews43_hype_generated_script.js?81318"></script>
		</div>
	</div>
	<div class="widget aspect22">
		<div id="widgetride22_hype_container" style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;" aria-live="polite">
			<script type="text/javascript" charset="utf-8" src="assets/widgetride22_hype_generated_script.js?38308"></script>
		</div>
	</div>
	<div class="widget aspect22">
		<div id="widgetweather22_hype_container" style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;" aria-live="polite">
			<script type="text/javascript" charset="utf-8" src="assets/widgetweather22_hype_generated_script.js?39768"></script>
		</div>
	</div>
	<div class="widget aspect22">
		<div id="widgetcorporatedocuments222_hype_container" style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;" aria-live="polite">
			<script type="text/javascript" charset="utf-8" src="assets/widgetcorporatedocuments222_hype_generated_script.js?45955"></script>
		</div>
	</div>
	<div class="widget aspect21">
		<div id="widgetbirthdays21_hype_container" style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;" aria-live="polite">
			<script type="text/javascript" charset="utf-8" src="assets/widgetbirthdays21_hype_generated_script.js?76835"></script>
		</div>
	</div>
	<div class="widget aspect22">
		<div id="widgetcorporatecalendar22_hype_container" style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;" aria-live="polite">
			<script type="text/javascript" charset="utf-8" src="assets/widgetcorporatecalendar22_hype_generated_script.js?86926"></script>
		</div>
	</div>
	<div class="widget aspect22">
		<div id="widgetcorporatevideos22_hype_container" style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;" aria-live="polite">
			<script type="text/javascript" charset="utf-8" src="assets/widgetcorporatevideos22_hype_generated_script.js?98187"></script>
		</div>
	</div>
	<div class="widget aspect22">
		<div id="widgetpoll22_hype_container" style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;" aria-live="polite">
			<script type="text/javascript" charset="utf-8" src="assets/widgetpoll22_hype_generated_script.js?75293"></script>
		</div>
	</div>
	<div class="widget aspect21">
		<div id="widgetads21_hype_container" style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;" aria-live="polite">
			<script type="text/javascript" charset="utf-8" src="assets/widgetads21_hype_generated_script.js?32993"></script>
		</div>
	</div>
</div>
<div style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #929292; width: 100%; height: 140px;">
  <hr style="background-color: #DFDFDF; width: 97%; height: 2px; display: block; margin: 0 auto; border: 0px;">
  <div style="width: 100%; height: 46px; text-align: center; line-height: 54px;">
      <span>Copyright © 2015 <strong>Empresa.</strong></span>
  </div>
  <div style="width: 100%; height: 46px; text-align: center; line-height: 40px;">
      <a href=""><span>Termos de Uso</span></a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href=""><span>Regras e Condutas</span></a>
  </div>
  <div style="width: 100%; height: 46px; text-align: center; line-height: 34px;">
    <span style="margin-right: 5px;">powered by</span><img style="vertical-align: middle;" src="assets/logo-upoint-2x.png" width="64px" height="20px">
  </div>
</div>
<script type="text/javascript">
	$(function() {
		$(".free-wall").each(function() {
			var lwidth = $('#freewall_container').width();
			var wall = new freewall(this);
			wall.reset({
				selector: '> div',
				animate: true,
				cellW: 320,
				cellH: 160,
				onResize: function() {
					var cwidth = wall.container.width();
					wall.container.find('.full-width')
					.each(function(index, item){
						wall.fixSize({
							block: item,
							width: cwidth
						});
					});
					wall.fitWidth();
				},
			});
			wall.fitWidth();
		});
		$(window).trigger("resize");
	});
</script>

But then, the widgets aren’t loading this way…

Can you help me out, please? Thanks a lot!

4

I cannot make it work, and free-wall will not put them in any position. I do not think its possible in Hype, but i could be wrong. Sorry though :frowning:

5

No problem man. Thanks a lot for helping me again! You rock! I will try to think into something else. :wink:

6

If I did rock then, not sure what I’ll be now :wink:

widgetTest.zip (181.0 KB)

widgetTest.hypetemplate.zip (103.0 KB)

This is a working example of what you are doing. I started from a blank canvas and created 3 small projects, and added them to a blank one. Then using the Free-Wall and Jquery, created the effect you wanted.

Let me know what you think and if it is as you wanted ?

1 Like
7

This is not using iframes, but the elements themselves (.HYPE_element), again with free-wall.js

floatingElements.hype.zip (98.5 KB)

It is a very good effect :smile:

8

Wow man! You’re awesome. Didn’t check the files yet but I’m 100% you probably solved my problem. LOL. Thanks a lot again. I will download the files now and study your solution. :smile:

9

Hi @MrAddy,
Your exemple works very well. I tried to add new elements. How would I choose the order in which the elements are aligned ?

10

Just change the order of the elements inside the timeline and not in the working space.

11

I get it.
Thanks Alexandre !
I added an image but it is slightly distorted when page size changes. Is there a way to constraint it to its proportions ?

12

Hey MrAddy, your files gave me great insight of further usage of freewall.js, but it didn’t quite solved my problem yet and I’ll explain why:

  • Chrome for Android is broken. This damn browser can’t scroll iframes at all, so that’s why I’m avoinding to use any kind of iframe. The HTML widget element generates an iframe and I can’t scroll it on any Chrome for Android. It does work on Chrome Beta app for Android, but then, the Beta it’s like Chrome Canary for desktop.
  • I also notice a “bug” in Safari for iOS because of the iframes. As I was inserting my widgets inside iframes, whenever I try to scroll the dashboard up or down while touching the widget inside the iframe, it won’t let me scroll at all. It behaves like if I’m trying to scroll the iframe and not the main area of the dashboard. The only way I can scroll is aiming my finger and touch the gaps between the iframes (in case, touching the dashboard background).

In short, I have two main problems: IF I use the HTML widget for the dashboard area, it won’t work on Chrome for Android because I can’t scroll at all. IF I use iframes to place my widgets across the dashboard, it will mess the scroll on iOS.

That’s the reason I want to use a RECTANGLE ELEMENT for the dashboard area and to use the exported hype html to place the widgets on it.

I know this may not be necessary at all, but my prototype has to work across all devices at multiple browsers, at least, to have a fluid navigation. I know this it’s not entirely possible, but I just need it to work seamlessly in Chrome for Android, iOS Safari, Chrome for iOS and Firefox for both versions (Firefox was the only browsers that didn’t show problems with the iframes during my tests).

You’ve been helping me a lot since I started hitting the wall with this problems, so if you could lend me some help again (if possible) I would be very grateful to you! :wink:

Thanks again!

13

You will have to tweak the freewall.js plugin. The only problem is that I don’t really know how it works and how to configure it properly because the developer didn’t make an in-depth documentation of it. So he basically didn’t make an awesome js grid plugin for javascript novices like me, LOL. I did manage to configure it to work the way I want in my project, but it took me quite a few time get it right.

Here is the website of freewall: http://vnjs.net/www/project/freewall/

It has some examples with images and you can do a LOT of stuff like activate dragging or filtering.
I believe MrAddy might be a lot more helpful with tweaking this plugin.

14

Have you tried to programmatically scroll down the page, rather than using auto scrolling ?

By this, i mean with a simple anchor points, or way points, are triggered on a swipe up, or down on the device. This would get round some of the issues i would think. This is assuming the elements are still drawn but just not seen.

I would try that.

15

I tried that and it does work at some extent, but using this means I need to sacrifice some usability and I didn’t want to reach this far. I know these are browsers issues regarding all this thread, but ever since I’ve started working as a web designer I notice that the usage of iframe would always lead to some problems at some point. :sob:

I was happy that everything was working fine when I started this project until I reached a point where I noticed I wouldn’t be able to finish it off without using some kind of embedding, The iframe would be great for me, but even in 2015, browsers and their engines still can’t comprehend the iframe, LOL. :joy:

16

But instead of reinventing the wheel, do you think this js plugin might help? http://cubiq.org/iscroll-5
If it does, then I could just still use iframe for displaying the widgets. I’m trying to see how it works. :wink:

17

You could try a plugin, if something like this does not work:

 var target = $('#scroll_to_'+element);
	 if (target.length) {
        $('iframe_name').animate({
          scrollTop: target.offset().top,
        }, 1000);
     }

Although I cannot think why it wouldn’t work ?

18

Or try this:

19

Hey MrAddy, thanks for replying again. Going to try your suggestions right now. How does this work? I create a javascript function and put ir on scene load? Also, the ‘iframe_name’ is a id? So I have to put an id on the HTML Widget?

Thanks again! :wink:

20

You would need to put it on a swipe action. Number the scroll to elements, and have logic so when they scroll it hits the next anchor.

Logic would be something like:

on swipe up : if currentAnchor = 3 then next anchor = 2

on swipe down : if currentAnchor = 1 then next anchor = 2

An name each anchor scrollAnchor_1, _2, _3 etc etc