Dynamic text element


(Christophe) #1

I am using Hype to build complete dynamic websites using WebDNA as scripting language and database. WebDNA just processes .js and replaces WebDNA tags with database content. It works fine. However I have a small problem with TEXT ELEMENTS: once exported in html5 format, the Hype text element has a fixed size, particularely a fixed height, while the WebDNA tag has a variable size once replaced with the real thing (example when browsing at http://www.sarachaga.com.ar)
Is there a way to make the text element dynamically adapt to text content size, after an export to html5?


(Hans-Gerd Claßen) #2

not out of the box -> so it’s a featurerequest :slight_smile:


(Jonathan Deutsch) #3

The answers are no, kinda, sort of, yes, and that’s a good feature requeset:

  • no: Element sizes are set by the editor, and their contents is not currently used for setting width/height.
  • kinda: depending on your needs, if it is a box that can be scrollable, you could set the Content Overflow to show scrollbars which would allow it to grow arbitrarily in height but let the user scroll to those locations.
  • sort of: If you make a new text element in Hype, it will not actually define the width and height values unless you manually resize. This would allow you to set the innerHTML of these elements via JavaScript and they would be as big as they need to be. However, this is an implementation detail, so I consider it unsupported and it is subject to change in a future release (though honestly is not likely to do so). We do this as a measure to help text look the same across browsers where metrics might be different.
  • yes: Hype elements that have widths/heights could also have those changed via JavaScript. You could look at the text, use libraries that can calculate sizes (I don’t know of any but assume they exist), and then change the size manually.
  • that’s a good feature request: just like @h_classen said :smile:.

(Hans-Gerd Claßen) #4

not tested, but what about setting a class to those and apply …style.height = null;


(Freelancer) #5

@KrissBill - Not sure if this is what you’re talking about but I did something similar by setting the CSS style to ‘auto’ for the width and height of the element. Take a look at this site (not one of my best, but it’s what the client wanted): http://berger-engr.com/

After the intro animation there’s a U.S. map with locations. When you rollover or click the dots, a text box appears with names of cities and projects. This is a single Hype rectangle that gets populated dynamically with text from an array. It grows and shrinks horizontally and vertically based on the text contents. I can’t remember why now but I ended up using a rectangle element’s innerHTML instead of a text element (probably an issue with one of the browsers).

This is done with the following JS, roughly:

hypeDocument.getElementById("Text-Popup").style.width = "auto";
hypeDocument.getElementById("Text-Popup").style.height = "auto";

var temDotText = Text_Array[dotSelected];

hypeDocument.getElementById("Text-Popup").innerHTML = tempDotText;

Not sure if this will work in your case, but it might be worth looking into. ~ John


(Christophe) #6

Thank you for your replies! John, I built a basic test with your JS, with a single Hype rectangle ID named “Text-Popup” to stick with your JS , exported to html5, manually edited the text in untitled_hype_generated_script.js to increase its length but the rectangle kept the original size. I must have done something wrong.

Searching the “rectangle size” in the untitled_hype_generated_script.js code I finally found it: it will allow me to dynamically change the values using WebDNA, after a small calculation related to the number of words in the text.

So, if I have

{G:"#000000",aU:8,c:233,aV:8,d:225,r:“inline”,s:“Helvetica,Arial,Sans-Serif”,t:16,g:"#AAAAAA",Z:“break-word”,w:“New Text”,j:“absolute”,x:“visible”,k:“div”,y:“preserve”,z:2,aS:8,aT:8,a:408,b:166}

I change it with

{G:"#000000",aU:8,c:[height1],aV:8,d:[width1],r:“inline”,s:“Helvetica,Arial,Sans-Serif”,t:16,g:"#AAAAAA",Z:“break-word”,w:"[text1]",j:“absolute”,x:“visible”,k:“div”,y:“preserve”,z:2,aS:8,aT:8,a:408,b:166}


(Jonathan Deutsch) #7

I don’t typically recommend editing the output in the _hype_generated_script.js; you not only have to do this every time, but it could also lead to unexpected results since Hype requires a very specific format.

The JavaScript that @johnapurdy recommended should work; it just needs to happen after an On Scene Load event. If it is too early than Hype will write over the value.


(Christophe) #8

Hi Jonathan! this is the beauty of WebDNA: the very specific format requested by the hype_generated_script.js is fully respected. Hype is not even aware that the code it reads is dynamically generated. What is between the brackets is replaced by its value before the web page is loaded. So if I modify hype_generated_script.js like this

{G:"#000000",aU:8,c:[height1],aV:8,d:[width1],r:“inline”,s:“Helvetica,Arial,Sans-Serif”,t:16,g:"#AAAAAA",Z:“break-word”,w:"[text1]",j:“absolute”,x:“visible”,k:“div”,y:“preserve”,z:2,aS:8,aT:8,a:408,b:166}

I give the values
[height1]=233
[width1]=225
[text1]=New Text

and the page is loaded with this

{G:"#000000",aU:8,c:233,aV:8,d:225,r:“inline”,s:“Helvetica,Arial,Sans-Serif”,t:16,g:"#AAAAAA",Z:“break-word”,w:“New Text”,j:“absolute”,x:“visible”,k:“div”,y:“preserve”,z:2,aS:8,aT:8,a:408,b:166}

which is exactly what Hype is expecting.