Nesting Scenes / files with html widget


#1

Hi,

for a page with quite a few scenes and somewhere around 10 hype files we would like to put elements like the header in to a separate hype file and integrate this in the different files and scenes inside of an html widget.

Any experience with something like this?


#2

I figured query would help. Found this topic:

Also, this video may help:


#3

Thanks, but that’s not really what I am talking about. What we are doing is embedding hype output within another hype file. Theoretically this allows us to build and maintain items that are used in multiple locations only once.

Our first try looks pretty good, but we’re not done yet :wink:


(Gerfried) #4

Can you explain what you’re trying to do exactly? The question is so general, it’ll be hard to find a solution for your use case. You say your first try looks pretty good. What was your first try, and what isn’t working? Provide an example file?


#5

OK … the project is www.schwabenwelt.de and what we are trying to do is to build the banner with interactive logos on top only once and reuse it in all scenes and all hype files. This would make the maintenance very easy and quick. However. the basic concept works for display only. In other words the embedded content does not react to mouseovers anymore. ;-(

So no we have to use persistent symbols which we have to set up again in each hype file of the project and each scene and Layout has to be modified. :frowning:

Any ideas?


(Gerfried) #6

Well, it’s still hard to know what kind of other constraints you have, but the first idea would be to put the banner in it’s separate file, and then include it with html. bannersplit.zip (225.8 KB)


#7

Excellent thinking … should have thought of that myself! So that is definitely a solution to use reusable interactive content. In this case we have another problem. The Logos have a mouse over action where text comes down in a black transparent box. In other words content would be overlapping :frowning:
Too bad … but thanks might help in other projects


(Trey Yancy) #8

I’ve created a number of sites comprised of stacked inline Hype animations. These serve as a mix-and-match solution for our local dealers, combining personalized headers and “about” content combined with standard product and feature components.

The only headaches have been that I couldn’t get relative links to work in the menus and had to use the full URLs for the pages (a total of three per site), and that the lack of load timers for the multiple animations make for slow page loads (twelve components total). If I could force the top two components to load first, followed by off-screen components (and load the other two pages into memory while the first is being viewed), that would solve some problems. As the menus are extremely concise, the former is not a huge issue.

local dealer site


(Gerfried) #9

@ernesto, is that (black box stuff) already showing on the current page? I don’t see what you mean.
Is the box supposed to push other content away?

I’ve modified my example to delay loading of the content section. Is something like this what you’re looking for?


#10

@TYancy - The issue with the relative links I know well :wink: … Mixing and matching … I like that … so even though the content may be mixed the navigation is always the same?


#11

@gxxr - Oh … sorry the public page does not show our experiments, we’ve only done those locally. We are improving this project even though we had to go online already. Since we could not get it to work the way we wanted it to we’ve switched to using persistent symbols. A LOT more work but I haven’t seen the light as of yet.


#12

@gxxr - tried to duplicate your idea and somehow I can’t get it to work by simply merging the html. Tried also the fixed dimension (ours is set to 100%) but that was not it. Are you changing anything in hype that I did not see?


(Trey Yancy) #13

We are introducing a new product option. In order to change the websites for all the dealers, we simply edit one of the modules, then swap it out.

Another thing we are doing is creating responsive “ship in a bottle” content that can be dropped into divs on existing dealer sites (dealers who also carry competing product lines). This is basically a “mini-site” with integrated navigation. It makes it possible for us to create something that is media-rich, that covers the bases, and in which we have control over the content. Before this, dealers would cobble together a second-rate page. Now they have everything, including gallery, interactive shutter designer with preview, video and more, and, as the mini-site resides on our server, we can change the content for all dealers simultaneously. All they have to do is to drop in a line of code.

The downside is that Google does not like “ship in a bottle” content. The Hype HTML file provides non-display text that can be inserted on the site, but Google prefers text and images to be on the actual page and visible, so the search ranking is lower. You have to do a good job with keyword and description tags to try to counter this. As for the mini-site approach, we provide dealers with text and images that their web designers can place on the page for the benefit of search engines.

Our next stage will involve Hype overlays on top of inline text and image content – inline background photo layer under an inline layer with text at the top and at the side, with Hype content floating at the opposite side. It makes things more complicated, but generates a higher ranking.


(Gerfried) #14

bannersplit2.zip (226.2 KB) (just noticed I forgot the file)


(Gerfried) #15

@ernesto, not really, it’s just copied together in index.html
The index.html is basically one of hype’s generated htmls, with another div (from a second generated html) copied in.

<div id="banner_hype_container" style="margin:auto;position:relative;width:600px;height:102px;overflow:hidden;" aria-live="polite">
	<script type="text/javascript" charset="utf-8" src="banner.hyperesources/banner_hype_generated_script.js?1590"></script>
</div>
<div id="content_hype_container" style="margin:auto;position:relative;width:600px;height:102px;overflow:hidden;" aria-live="polite">
	<script type="text/javascript" charset="utf-8" src="content.hyperesources/content_hype_generated_script.js?1590"></script>
</div>

I guess for a more complex scene there could be any number of things interfering, but there should also be ways of getting it to work.


#16

@gxxr - thx … I feared as much … but we will see if we can find out.