onMouseOver Effect

[calebarchie]

Hi guys,

Firstly like to say thanks for this awesome script. I am a total programming noobie but I am trying to achieve a certain effect with the typewriter where you hover over an element and will write something out.

I have got it working for the most part where it will make a new instance using the js mouseenter event but its susceptible to glitching and spazzing out when it is spammed. It will just keep firing a new instance and pile up tying gibberish (due to delays, combined strings etc). I have attempted to set a timerOut/Clear on it but couldn't get it going.

I realise this isn't issue directly with the script, just wondering if there is a better way to go about it (eg argument to kill/restart current typewriter) again sorry I am a total noob learning as I go. Thanks in advance!

[tameemsafi]

@calebarchie Please see the fiddle with link below. You will need to create a variable to store the typewriter instance. That way when mouse enters, you can create the instance and assign the it to the variable. Then once mouse leaves, you can stop the typewriter animation and clear the variable and contents.

https://jsfiddle.net/yp32rosa/

[calebarchie]

Hi, I think I understand however I am having a little difficulty working it into the project with my limited knowledge.

Basically, I'd like the typewriter to function normally on load then on mouseover (on a logo next to typewriter div) write a string THEN on mouseout restart the original typewriter function on load. It is just a contact button, see website here:
https://www.thecontainerlab.com/
p/w = arcifa

I think my problems stem from the process to clear the variable:
typewriterElement.innerHTML = '' "

Whereas I'd like to to restart, I have modified it so that is will function but it just keeps creating extra divs on each event. I think what I need is an event to remove div then make new one. Sorry these dynamic divs are new to me and confusing.

[tameemsafi]

@calebarchie Please look at the fiddle link below and let me know if that helps you.

https://jsfiddle.net/cxvugsry/

[calebarchie]

Thanks! I think that is something I can work with, this is as far as I got with the other code:
https://www.dropbox.com/s/jv0n2oyevxigqxw/the-container-lab.zip?dl=0

I'll have a fiddle with the new one and let you know how I go.

[calebarchie]

OK I got it working however something with the fiddle I noticed the originalTypewriter won't actually loop in the fiddle despite being set to loop?

It would be good to combine the one I posted and the fiddle eg; rather than just hide/show those two typewriters, fire originalTypewriter from first string on mouseout instead. I really do need to learn JS properly at some point.

Thanks again!

[tameemsafi]

@calebarchie np, good to hear.

[calebarchie]

OK I must be going mad as I seem to be going in circles. The pause() does not seem to work for me? Only works if I change it to a stop() which is not really what I'm after.

Could this be because, for some reason I am using the first version of the script?

[calebarchie]

Updated to latest version, working fine. Can't see how to change cursor blink speed and keep write/delete speed speed the same like in V1.