Using Codepress: Modifying Document Head

Using JavaScript with Hype
1

Hi EveryBody,

can i insert in my head Document something like CodePress Scripting Reference:
<script src=“http://www.crealscience.fr/codepress/codepress.js” type=“text/javascript”/> ?

I don’t understand the way Ids are adressed.

If i insert an HTML widget with <script src=“http://www.crealscience.fr/codepress/codepress.js” type=“text/javascript”/> ? into <head/> i have no problem for scripting.

If i do the same in my Document Head, nothing happens no more.

I believe this matters with Id’s and the way they are referenced in the web page where i insert my hypeDocument.

For codepress needs a lot og engines and css codes, i can’t insert it into my ressources. Is there any solution ?

tnak you Guys, and Bravo for that great App.

2

When you create an HTML widget, it is an isolated HTML document placed within your Tumult Hype document - an iframe. The URL above doesn't work -- what exactly is Codepress and what are you trying to do?

3

Thank you for being so “responsive”.
I deleted the JS (sorry).

My goal: i’m trying to use a Syntax Highlighter over a textarea placed inside a Rectangle of my Scene.

My rectangle is Id="box"
And inside my Rectangle, a Textarea with id=“txtdef”.

So first, i tried to use editArea (http://www.cdolivet.com/editarea/editarea/exemples/exemple_full.html) with success by inserting a piece of code in the main web page i insert my Hype Scene into :

<script language=“javascript” type=“text/javascript”>
editAreaLoader.init({
id : “txtdef” // Hype Scene Textarea id
});
</script>

I would like now using codepress (http://codepress.sourceforge.net/) or codemirror (http://codemirror.net/index.html)
It seems they work the same way : give an Id, a little JS code + CSS.
However it doesn’t work and my Firefox Console tells me "textarea.value is null"
But if i create a TextArea Directly into my main webPage with Teh same Id, that’ok: i can highlight Syntax.

So here is the situation:
If i try calling from my Main Web Page codemirror.js for styling a textarea inside my web page: ok, no problem.

if i do the same thing for my Hype Scene TextArea, value is null.

It seems getElementById does not see my Hype TextArea. Or something like that i do not understand. All my tries were done inside the Main Web Page: can i do something inside Hype Script Editor ?

Thank you for your great work and for attention.

4

You're going to want to run this function:

'On Scene Load' on the scene where you have an element with that ID. The issue is probably that the 'editAreaLoad' function is being fired before the element with that ID has been created, so it cannot find it.

5

Hi Daniel,

thank you for being so patient.
I feel a little bit confused: i did not succeed.
I thought you asked me to run a JavaScript function onLoad Scene, so i wrote a function:

But I got this result:

thank you for your help

6

So i decided to Run a personnal Behavior onLoad Scene, like this:

But got this message:

I’m sorry. I feel this is the problem: it’s fireup to early.

7

Can you share your Tumult Hype document?

Do you have a reference to the codepress library in the <head> area of your document?

8

Of course, Thank you :smile:
crealAppModif.zip (26.6 KB)

9

Hi Daniel,

I did it: you were right, the div was not loaded.

So i tried to listen to test document.changeState to check if document was complete and Bingo !

So here is the code you have to insert into the webMainPage calling codeMirror or whatever you want to apply AFTER it's ready:

document.onreadystatechange = function () {
if(document.readyState === "complete"){
/* your code /
var editor = CodeMirror.fromTextArea(document.getElementById("txtdef"), {
/ start codemirror */
});
}
}

For i had problems first with JS scripting (i'm new to that) i just would like to explain that the first line is very important: document.onreadystatechange = function ()
That's a kind of "while" listening every changes of the page.
I did not write it at first and nothing happened because it was checking "complete" state while page was "loading". So, nothing could happen....

Thank you for helping.

10

After A LOT of reading, i succeeded in integrating codeMirror in my site.

See on Isilex

I had to add the ressources to my Scene Head AND into my Main Web Page Head too and all the problems of CSS conflicting disappeared (it’s magic…).
Once done, i had to delay the codemirror fire up:

     document.onreadystatechange = function () {
        if(document.readyState === "complete"){ //CODEMIRROR FIREUP }}

And all is working fine now, except hints… Think ZIndex Problem.

Ty

1 Like
11

Can you share an example document so others can have a good starting point?

12

Here it is.
I deserve a new Badge !

Hype And codeMirror.zip (151.9 KB)

1 Like