Text in Hype after exporting it to HTML

[haythamfarid (haytham)]

Is there a way that the text i wrote in hype to get it inside html file, so i can edit it after that in html without going back to hype

[jonathan (Jonathan Deutsch)]

Not really, you will need to edit from Hype.

In a pinch, you can edit the *_hype_generated_script.js file, as this contains all the inner HTML, but it is in a javascript form so you’ll have to be careful with quoting and I’d only do small changes. Since this is the export, changes won’t get propagated back and this isn’t recommended nor supported.

If this is something you need to do regularly (say often updating data), a more sophisticated solution would be to use javascript and your own data file that could read and insert into specific elements.

[haythamfarid (haytham)]

is the export, changes won’t get propagated back and this isn’t recommended nor supported.

Is there a hope to do it in future ?

[MarkHunte]

If this is something you need to do regularly (say often updating data), a more sophisticated solution would be to use javascript and your own data file that could read and insert into specific elements.

I think the suggestion @jonathan makes is not that hard to do but if you want possibley an even simpler way then you could use css - content to set the content of your text.

This has a couple of benefits.

Any css you place in the projects head file will normally be live in the Preview and Hype layout.

The styles also are exported in the html ( afaik).
Which means you can edit the html after exporting.

Here is an example. Also I would suggest you use class names for the elements/css rather than id.
This may save hassle later if you need to change things up and giving an element a class name especially just for css is just a simple to add and access as an id.

Note , to set content you can set it the be before or after existing content. The example below sets it before but the elements never have any original content.

testTextContent_mhv1.hype.zip (17.1 KB)

[haythamfarid (haytham)]

thank you so much, the point that if i give my client any project he asked to have ability to edit the text, which not logic by doing that in css, it seems there is no choice to do it in Normal HTML , But i appreciate your reply
best regards

[MarkHunte]

Well not really,

As mentioned above. You can have the text pulled from a .txt file. which they can edit.

Any complexity comes from how many elements and pointing to the right ones.

Can you put up an example project with some elements that have text you want to change.
Also an example of what you would change it to… in html

It would then be easier to possibly post an example that does this relative to you…

[h_classen (Hans-Gerd Claßen)]

get the text from a google sheet?

Ideas for populating or altering an element display from a PHP Array

Here is an example using the method of a public published to web google sheet. The sheet should only be for public data. See this post on how to set that up. A sheet can be shared with people/team who are the only ones who can edit it. Don via the normal google share options. You can see the sheet used in the example below here but I have turned editing off for obvious reasons. cabTest.hype.zip (937.2 KB) This is a quickly put together as I should be in bed…

or

What good uses to be found by search engines?

Yes, using an HTML-Widget is not the best solution. This are the solutions I can come up with from the top of my head: Hidden Content Just use the a hidden section on you page and insert all the information. Hype provides the words used in your Animation on export in your HTML. Apart of that you can also just enter the word you want to be found like so: <div style="display:none;"> <h1>My headline</h1> <p>Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna molli…

[MarkHunte]

Lol,

This does work, and I am using it a lot.
Incidentally I have just completed writing code to do similar to this but with a private (company domain) google share group using app-script as opposed to a public google jsonp. I can directly access the drive files. Works amazingly well actually.

But I was actually thinking they just need to use your XMLHttpRequest code to do this.

Load text from JSON

var request = new XMLHttpRequest(); request.open('GET', '/my/url/animation-text.json', true); request.onload = function() { if (request.status >= 200 && request.status < 400) { var obj = JSON.parse(request.responseText); var titleA = obj.mydata.block-a.title; hypeDocument.getElementById('yourHypeElementsId').innerHTML = titleA; } else { } }; request.onerror = function() { }; request.send();

Which means they just need external .txt file/s which the client will understand.

	 <script  type="text/javascript"> function myCallback(hypeDocument, element, event){ 
  

var request = new XMLHttpRequest();
request.open('GET', '/sometext.txt', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {

    var obj =  request.responseText 
 
 
 document.querySelector('.text1').innerHTML = obj

  } else {


  }
};

request.onerror = function() {

};

request.send();

  
  
   } 

if("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();

the text file can be text with html

<h1>line one</h1>
    <br>

    line  

or plain text.

[jonathan (Jonathan Deutsch)]

@haythamfarid

Is there a hope to do it in future ?

Not in the short term, but I do think it is a good feature request from the perspective of data-driven documents and supporting localization. In other words, if you need to do this please move forward with the excellent solutions above .