Create Elements on the Fly

(Andrew) #1

I have tried a few ways in Jquery to create an element on the fly, then add a class to it, add it to a timeline, but they have all failed.

I have also tried to create a element, name it, put it off screen until needed. But using Jquery, it did not move the element upon request.

What would be the best approach, or should the latter, in theory, work without issue ?

(stephen) #2

Hype does not yet support creating elements on the fly. You should be able to use jquery to modify elements in the scene. You can add a unique element id in the Identity Inspector and reference the element that way.

(Trevor) #3

I think my problem is very similar; I’ve created a sybole, I can hide/show by jQuery but I can’t create many more on the scene. I’ve tried append, appendTo, clone etc but I couldn’t multiply my symbole :-/ is there any trip to get it work? Or do we have to wait for Hype update ?
My ex:

// test
function test(hypeDocument, element, event) {

		var m	=	 $('.module'); 

// symbol name and id was “module” than I tried class name not to have unique in DOM

			m.clone().appendTo( $("myHolder") );



(stephen) #4

You will need to wait for a Hype update. Creating symbols on the fly is not yet something Hype supports.

(Thomas Lundin) #5

Would it be possible to append an entire hype document to the DOM at runtime? Or to modify the innerHTML of an existing document, so that a hype document is added?

I experimented with those ideas a couple of days ago but didn’t succeed.

I reserved empty tags with unique IDs in the main HTML file. Then tried with ‘appendChild’ and ‘innerHTML’ as in the following script part of the main HTML file, got a DOM 8 something error…

‘appendChild’ seems not to be used this way.

(Thomas Lundin) #6

Here is my little test.

  function append_section_B(){
	var hypestring = "<div id='section_B_hype_container' ";
	hypestring += " style='margin:auto;position:relative;width:768px;height:21700px;overflow:hidden;-webkit-tap-highlight-color: rgba(0,0,0,0);'";
	hypestring += " aria-live='polite'><script type='text/javascript' charset='utf-8' src='section_B.hyperesources/section_B_hype_generated_script.js?13851'>";
	hypestring += "</";
	hypestring += "script></div>";
	//document.getElementById("main").innerHTML = hypestring;

(stephen) #7

I think you will want to use createElement and then set the innerHTML. (I didn’t include the part to set the innerHTML, you will need to add that)

var div = document.createElement("div");

(Thomas Lundin) #8

Thanks :smile:
Will try that, interesting!

(Mark Hunte) #9

Here is something I was working on. Every now and then a group of us do the lottery and we need an agreement form filled out.

So I just wrote this page so any of us can go and fill in details for everyone and print it out.
Each entry is a form or textarea that can be edited on the page.

The documents clones a group and adds it to the hype scene ( not the page body). Height adjustments are made to all the containers.

Everything below the names group is in it’s own group so they can be moved easier.

The main scene container will be called index_hype_container when previewing via hype and lowercase export name & _hype_container when exported.

The code takes care of this but you have to set your export name in the function addName() & removeName()

In mine it is synd2

 var hypeExportName = "synd2" (189.5 KB)

Getting the index container name
Dropdown menu covers breadcrumb menu

Mark thank you for your example, very interesting approach. Could be extended to some very interesting things.

@Stephen - I note you saying Hype does not yet support this feature. Can you give us an indication of when it might/will?

(stephen) #11

It isn’t something I have started working on yet, but it is definitely something we have talked about. At this time I can’t make any promises about when will add this feature.