Type writing effect

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?

Give me a min…

any time you need:blush:

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

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

No Problem,

Here is one with a cursor.

Simple_Type_Text_Keydown_blinking_Cursor.hypetemplate.zip (47.2 KB)

2 Likes

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

2 Likes

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

Hi,

Can you post yyou version with your setup…

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

That works. Thank you so much!

1 Like

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

1 Like

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

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

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

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.

Where do I have to place the lines?

In the head file…

Hi Mark and of course all of the forum,
now there is another question regarding to the same topic…
Is there an option to get this effect on mobiles?
Problem, how can i force mobile keyboard to pop up and use for this fancy effect?
I tried several fakes but still unsatisfied.
Any ideas

It can be done… sort of. My idea of how ( so far )

You can place a new rectangle behind the typing Rectangle with

<textarea rows="4" id="textbox" cols="1" style="font-size: 48px "> 
</textarea>

As it’s innerHTML

It is important to keep the font size of the text area above 16px. If you do not the page will zoom when the textArea comes into focus.

You then add a Touch down Action in the Action inspector on the typing rectangle.

The action should trigger a new javascript function with this.

$("#textbox").focus();

Now the problem we have though is I have not found how to hide the flashing cursor for the textArea. with still shows through the element layers!.