mntn-dev / t.js Goto Github PK
View Code? Open in Web Editor NEW⌨️ Lightweight $.Hypertext.Typewriter
Home Page: https://mntn-dev.github.io/t.js
License: MIT License
⌨️ Lightweight $.Hypertext.Typewriter
Home Page: https://mntn-dev.github.io/t.js
License: MIT License
On safari version 11.1.2 t.js is crashing because safari cant find audioContext .
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.
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
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,
Unless I'm misunderstanding this requires jQuery. Do you know of any versions without that dependency?
Best,
Lewis
Would be useful!
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,
I hope to explain corretcly, this is what happen:
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,""")}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"
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;
});
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.
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){}
});
});`
Is possible write in plain text? I would like write html code. Thanks.
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?
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
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:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.