⌨️ Lightweight $.Hypertext.Typewriter

Any idea why this might not run on iPhone (version 13.3.1)? I thought it was my JS script but I tried your page, mntn-dev.github.io/t.js, and noticed the same behavior. Locked cursor that does not move. Runs great with desktop browsers, good job btw.

I Realize you have better ways to spend your time but if you could share a couple ideas for me to pursue that would be great. Thanks.

Hi, I hope to explain corretcly, this is what happen:

• have a t.js manually added to a project [OK]
• create a new project download/install with bower
• check all path files (new project with same files of old one)
• javascript error "t is not a function" [ERROR]
• copy manually the old t.js overwriting the new one from bower in the new project [OK]

line of my code code where is first call to library

function writecell(cellindex, text, fast)
	{
		if (fast){
			$(".tableresult td").eq(cellindex).html(text);	
		}
		else
		{
			$(".tableresult td").eq(cellindex).html("").t(text,{
				speed:40,
				speed_vary:true,
				blink: 400,
				fin:function(){
					window.setTimeout(function()
					{
						$(".tableresult td").eq(cellindex).html(text);
					},1000);
					
				}
			});
		}
	}

first lines of your t.js (old and new from bower, hope could be useful to understand what I'm using)

START OF NEW ONE

/*
		 _     _
		| |   (_)
		| |_   _ ___
		| __| | / __|
		| |_ _| \__ \
		 \__(_) |___/
		     _/ |
		    |__/

	t.js
	a micro-templating framework in ~400 bytes gzipped

	@author  Jason Mooberry <[email protected]>
	@license MIT
	@version 0.1.0

*/
!function(){function n(n){this.t=n}function r(n){return new Option(n).innerHTML.replace(/"/g,"&quot;")}function t(n,r)

START OF OLD ONE /*t.js-0.5;(c)2014 Mntn(r) <http://mn.tn/> c/o Benjamin Lips <g--AT--mn.tn>;Licensed under the MIT License <http://mit-license.org/>;For documentation see http://github.com/mntn-dev/t.js or http://mn.tn/dev/t.js*/(function(d){d.fn.t=function(v,w){return this.each(function(){var a=w,h=v,b=d(this),n,q,k=!1,p="12qwertyuiop[]asdfghjkl;zxcvbnm,./~!@#$%^&*()_+:1234567890-=op"

tried old version too same error.

`

$(function(){
    $('#t').t({
       delay:1, // start delay in seconds [default:0]
        speed:50, // typing speed (ms) [default:50]
        speed_vary:false, // 'human like' speed variation [default:false]
        beep:false, // beep while typing (Web Audio API) [default:false]
        locale:'en', // keyboard layout (to fit mistype); supported: 'en' (english) or 'de' (german) [default:'en']

        caret:'\u2589', // caret content; can be html too [default:true (\u258e)]
        blink:true, // blink-interval in ms; if TRUE, speed*3  [default:true]
        blink_perm:false, // permanent blinking? if FALSE, caret blinks only on delay/pause/finish [default:false]
        repeat:0, // repeat typing: if TRUE, infinite or N times [default:0]
        tag:'', // wrapper tag (.t-container, .t-caret) [default:'span']
        pause_on_click:false, // pauses/continues typing on click/tap (elm) [default:false]
        pause_on_tab_switch:true, // pauses typing if window is inactive (Page Visibility API) [default:false]

        // init callback (ready-to-type)
        init:function(elm){},
        // typing callback
        typing:function(elm, chr_or_elm, left, total){},
        // finished callback
        fin:function(elm){}

  });
});`

Hi Benjamin, is there a way that the typing doesnt stop in the background while I change tabs within the browser? I synced audio to the typewriting manually (hard coded), and when I change tabs for a while, my audio continues which is fine. But when I go back to my page, the typewriting paused and everything (audio + typewriting) is out of snyc. Is there a way to solve that? Thanks

Hi,

Is there a way to update the speed at runtime (just like 'beep'), so that we can make the typing faster or slower while typing is going on?

Thanks

Hi, could be possible add the feature of nested ?

(I add an example based on the demo code)

<div id="t"><del><strong>Hello.</strong><ins>0.5</ins> This is <em><!--<del style="color:red;text-decoration:underline;">d</del>-->t.js</em>, a<del> heavy <ins>3</ins>...sorry I mean <ins>1</ins><s>black,white</s></del><kbd> lightweight</kbd> jQuery typewriter script. <br/><button id="btn1">Learn more</button></del>

I'd like to run all and at the end delete everything, to start in the same space with other text.

I am absolutely new to the JS promise solution, so please forgive me if i am missing here something. The following code just shows the first two t.js texts - the third does not appear though all Alerts (if uncommented) do work. Am i misusing the 'add' function of t.js ?

          new Promise(function(resolve, reject) {
            $('#logger').t('Starting import function.<br>',{
              beep: true,
              speed:20,
              repeat:false
            });
            setTimeout(() => resolve(1), 2000);
          }).then((result) => {
            $('#logger').t('add','Starting import function.<br>');
            //alert(result);
            return result + 2;
          }).then((result) => {
            $('#logger').t('add','Another text.<br>');
            //alert(result);
            return result + 2;
          }).then((result) => {
            $('#logger').t('add','yet antoher text.<br>');
            ///alert(result);
            return result + 2;
          });

Hey, I really like this library compared to others. Just wanted to mention that it makes screen readers unusable, because the text gets separated into individual letters. For some reason the screen reader reads the text normally if placed in a p-tag, but then the t-caret is placed below on the next line.

A workaround that I might try is to wait until everything is written and then join each separate letter back together.

But I think it would be nice if:

1. t.js could create semantic html
2. the caret would go inside child elements

Dear Team, Kindly let us know the device compatibility for this script. Also which browser features are must or browser versions are must?

Thanks in advance

Hi, this is the code (modify from the demo)

<div id="t"><strong>Hello.</strong><ins>0.5</ins> This is <em><!--<del style="color:red;text-decoration:underline;">d</del>-->t.js</em>, a<del> heavy <ins>3</ins>...sorry I mean <ins>1</ins><s>black,white</s></del><kbd> lightweight</kbd> jQuery typewriter script. <br/><button id="btn1">Learn more</button>

I'd like a delay of 3 seconds after "heavy" word, and then 1 second delay before delete all the sentence "heavy ...sorry I mean".

The code write all sentence, keep only 3 seconds before deleting everything.

P.S. Have you got a more "readable" code so to contribute?

Hi,

I love the typewriter. However, I have just received the MS update to Edge and it seems to have broken the typewriter code. Tags are now appearing in the output. I have checked the examples provided here as well and the same thing seems to be happening. Fine in all other browsers I have tried including IE.

More specifically, the opening tags (such as ins, p, strong ) are being printed to the screen with the exception of the first p tag and the closed tabs are not showing at all. The font seems to be re-set as well.

I am using Microsoft Edge 40.15063.0.0, Microsoft EdgeHTML 15.15063.

Website is www.portfoliophilosophy.com - works fine in previous version of Edge and other browsers (ie 11, Chrome, etc.), I have the same issue in the demo files.

Thanks, Ian.