Type writing effect

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!.

Ok I have it working now.

I changed the innerHTML of the new rectangle to:

	<input id="Input" style="font-size: 48px " value="">
	
	<label class="foo_Label" for="Input">_</label>

I then placed this above and out of scene. Making it’s opacity also 0.

We leave the touch down action but change the function slightly to:

$(".foo_Label").focus();

This seems to work well.

The one thing to note is the Auto text will go under the keyboard depending on length.

Above in other posts is one fix for this but it may not work well for all displays. I am sure there is a better fix like scroll to a position rather than into view but I only have the one iPhone size to test on so it is not worth me really looking at this.
i.e cannot be arsed :smiling_imp:

iOS_Auto_Type.hype.zip (46.7 KB)

2 Likes

really good work:-) i guess i will find a solution with this, thank´s for now, will let you know if i´m succeeding with my project

1 Like

Hi Mark,
work never stops so is there an option to use this effect on different scenes within one document?
Cheers
Achim

Because I’m just an amateur in programming, I’m very happy occasionally to be able using a script as shown in the forum. I then adapt it to my own wishes. For example, I used type writing effect to (fake-)challenge students typing a piece of text by head.
The lesson I made is about color and high school students can use it on their computer. When using an iPad, they can not use the type writing effect because a keyboard is required. Is it possible changing the script to show a keyboard on the iPad page as with other apps that use a keyboard? (I’m afraid asking too much now…)
The type writing effect is done on page 3 ‘Verf’ (paint)

https://www.janmac.nl/Kleur2/Kleur2.html

Another amazing effect, unfortunately I forgot the name of it and the creator, is on page 5 ‘printen’ (printing). Children can play the game to learn complementary colors.

The lesson is not ready yet, but I want to thank all the forum participants who helped me in the past with their amazing scripts and ideas.

This post in the thread (above) is an adaption to get the type writer effect to work on iOS.
It was for the auto type but I expect it can be further adapted with the older code.

It works! Thank you so much for your contribution to my hobby.
Mark Hunte for president!
https://www.janmac.nl/Kleur/Kleur.html

1 Like