Type writing effect

Using JavaScript with Hype
1

hi there, i´m looking for a solution for the following scenario:
user is typing any key on his keyboard but a pre-given text appears in the textfield.
this feature is needed for a movie production where actors just hit any keys on the keyboard an the right text appears.
any ideas folks, would be very happy about it

2

Do you need a flashing cursor?

3

that would be step 2 :wink: but my major problem is how to type a pre-given text while hitting any key. i.e. the text is “hello world” but your keystrokes are like "hvhjergogöjrlthjlg."
you get what i mean?

4

Give me a min…

5

any time you need:blush:

6

Here is a simplified version of one I put up on the site a while ago. I have stripped it down as it was all auto type and blinking cursor.

I would need to redo the cursor to suit this version…

Simple_Type_Text_KeyDOWN.hype.zip (46.4 KB)

2 Likes
7

you saved my day, great work thank´s a lot.
this is really what i need:-)

8

No Problem,

Here is one with a cursor.

Simple_Type_Text_Keydown_blinking_Cursor.hypetemplate.zip (47.2 KB)

2 Likes
9

you´r the one:+1: thank´s a million times

2 Likes
10

Dear Mark,
I am not very familiar with Hype yet and I need some help with the “simple type text…blinking cursor” file.
I found out how to change sizes, colors etc.
Now I tried to fill out a rectrangle box with a longer text by activating the scroll function.
If the cursor reaches the bottom of the box it leaves the box and the box content does not scroll automatically to where the cursor position is. I can of course scroll manually.
Is there existing any solution or any script to scroll automatically?
Kind regards
Björn

11

Hi,

Can you post yyou version with your setup…

12

Actually found it.

Using the last file I posted…

Add this as the last line in the type() function

document.getElementById("blinker").scrollIntoView()

1 Like
13

That works. Thank you so much!

1 Like
14

@MarkHunte Didn't know this existed - thanks for yet another useful tip!

1 Like
15

Dear Mark,
one more question concerning the type function:
is it possible to add a fixed passage of text before the actual typing starts.
Kind regards
Björn

16

Yes,
You have not said how you want the text added, So I will assume you add your text to the rectangle’s innerHTML using the editor.

Then in the startBlinker() function change the line,

window.textElement.innerHTML = window.blinker

to

window.textElement.innerHTML += window.blinker
17

Thanks again. Just one more thing before Easter holiday: how can I hide the scrollbar at all?
Best
Björn

18

No prob…

Do a search for it on google. You will most likely need to use css to do it. There may be something on the site already but not 100%.

Have a good one…

–

EDIT.

Just thought and tested. if you set the overflow to hidden the text will still show because you have the .scrollIntoView()

But note you will not be able to scroll manually using a scroll wheel. But selecting inside the text and arrow keys allow to scroll…

Edit 2

Scroll on Auto ( in example above at least )

css style.

#text{


  padding-right: 30px;
 
}

Increaase ofr decrease as needed.

19

Where do I have to place the lines?

20

In the head file…