Link from a text box

I have a scrolled TextBox with many lines of text (about 100): I want to make every line a LINK to other scenes. Is it possibile?
Alternatively, I can import an HTML widget with a long list of words: which is the function to add in “a href” tag to make a link to another scene of the hype file?
Thank you for any help.

You say lines but then mention words.

Can you clarify by posting an example project. Which will hopefully show us how your lines/words are formed.

The text could have any structure and we would have to guess.

For example if the text was like this

We could possibly do a quick and dirty transform of the text.

	var textBox_ = hypeDocument.getElementById('textBox')
	
	var textFromBox = textBox_.innerText
	
	var array =  textFromBox.split(/\r\n|\r|\n/)

var newText = ""
for (i = 0; i < array.length; i++) { 
var thisNewText = '<span>' + array[i]+ '</span><br>'
newText+=thisNewText
}

textBox_.innerHTML = newText

var textSpans = textBox_.querySelectorAll('span')

for (i = 0; i < textSpans.length; i++) { 
textSpans[i].onclick = function(e) {  hypeDocument.showSceneNamed(e.target.innerText, hypeDocument.kSceneTransitionCrossfade, 1.1)   };
}

Text onclick.hype.zip (43.0 KB)

The above is just a quick example, But as I say post a doc and we may be able to help better…

1 Like

Yes, the text is exactly like in your sample.
And I want that “text1” would be a link to a scene1, the “text2” would be a link to a scene 2, and so on…

Again, post an example project…

here you are…
Copia di iperParole 2.hype.zip (1.1 MB)

Here you go.

New code.

	//--get all scene names in an array, arrays items number starts from 0  not 1
	
	var scenNmes = hypeDocument.sceneNames()
	
	
	
	 //-- get athe text Symbol by display name. We want the first one in the array which is at index 0. ( should only be one anyway)
	 
	var textBox_Symbol = hypeDocument.getSymbolInstancesByName('textBox')[0]
	
	
	 //-- get the symbols DOM element
	var textBox_Element = textBox_Symbol.element()
	
	 //-- get the text
	var textFromBox = textBox_Element.innerText
	
	 //-- split the text into an array by new lines 
	var array =  textFromBox.split(/\r\n|\r|\n/)

var newText = ""
//-- go over each line and change it to a span with a data attribute and the text on the line.
//-- because the arrays start with 0 and not 1, we + 1 here to match the numbers of the text.
for (i = 0; i < array.length; i++) { 
var thisNewText = '<span data-index="'+ (i + 1) + '">' + array[i]+ '</span><br>'
newText+=thisNewText
}


//-- replace the old text/html with the new text/html

textBox_Element.innerHTML = newText


//-- put refs of the new spans in a new array
var textSpans = textBox_Element.querySelectorAll('span')

console.log(textSpans);

/* go over the array and add an on click to each span,  when a span is clicked we read it's data attribute which is an index number and go to the 
corrospnding item by index in the scenNmes array
*/
for (i = 0; i < textSpans.length; i++) { 
textSpans[i].onclick = function(e) {  hypeDocument.showSceneNamed(scenNmes[e.target.dataset.index], hypeDocument.kSceneTransitionCrossfade, 1.1)   };
}

Copia di iperParole 2_MHv1.hype.zip (1.1 MB)

1 Like

Ok, thank you so so much.
I understand that I need Hype PRO to apply functions and customize, so I can’t tell now you if it’s working (I’m gonna upgrade just today) . I’ll let you know.
Thanks again.

Yes, it seems working… I have to study hardly the world of java function…
Thanks a lot.