Link from a text box


#1

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.


(Mark Hunte) #2

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…


#3

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…


(Mark Hunte) #4

Again, post an example project…


#5

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


(Mark Hunte) #6

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)


#7

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.


#8

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