TypeIt
-
See the Project on GitHub.
@@ -276,7 +275,7 @@ There are plenty of settings to tweak how you desire:
| typeSpeed |
The speed (milliseconds) at which you want to type. |
- 500 |
+ 250 |
@@ -306,7 +305,7 @@ There are plenty of settings to tweak how you desire:
| delayStart |
The amount of time before the plugin begins typing after initializing. |
- 100 |
+ 250 |
diff --git a/package.json b/package.json
index bcca14db..3b806845 100644
--- a/package.json
+++ b/package.json
@@ -1,10 +1,10 @@
{
"name": "typeit",
+ "version": "1.0.4",
"license": "GPL-2.0",
- "author": "Alex MacArthur",
- "description": "jQuery animated typing plugin that types text for you.",
+ "author": "Alex MacArthur ",
+ "description": "A lightweight, easy-to-implement jQuery animated typing plugin that types text for you.",
"license": "General Public License",
- "version": "1.0.3",
"repository": {
"type": "git",
"url": "https://github.com/alexmacarthur/typeit.git"
diff --git a/src/scripts.js b/src/scripts.js
index 020b71df..f7c93265 100644
--- a/src/scripts.js
+++ b/src/scripts.js
@@ -57,9 +57,9 @@ $('section').on('click','.btn-example4',function() {
(function() {
- $('#iTypeSpeed').val('100');
- $('#iBreakWait').val('100');
- $('#iDelayStart').val('100');
+ $('#iTypeSpeed').val('250');
+ $('#iBreakWait').val('500');
+ $('#iDelayStart').val('250');
$('#TIInput').on('click','#TISubmit', function(e){
diff --git a/src/scripts.min.js b/src/scripts.min.js
index 0fc8a8aa..da3d69d0 100644
--- a/src/scripts.min.js
+++ b/src/scripts.min.js
@@ -1 +1 @@
-$(".typeit-box").typeIt({whatToType:["A jQuery plugin that types stuff for you."],typeSpeed:100}),$(".example1").typeIt({whatToType:"You've just initialized this bad boy.",typeSpeed:100}),$("section").on("click",".btn-example1",function(){$(".example1").data().typeit.stopTyping(),$(".example1").html(""),$(".example1").typeIt({whatToType:"You've just initialized this bad boy.",typeSpeed:100})}),$(".example2").typeIt(),$("section").on("click",".btn-example2",function(){$(".example2").data().typeit.stopTyping(),$(".example2").html(""),$(".example2").typeIt()}),$(".example3").typeIt({whatToType:["This is a string!","And here's another one."],typeSpeed:100}),$("section").on("click",".btn-example3",function(){$(".example3").data().typeit.stopTyping(),$(".example3").html(""),$(".example3").typeIt({whatToType:["This is a string!","And here's another one."],typeSpeed:100})}),$(".example4").typeIt({whatToType:["This is a great string.","But here is a better one."],typeSpeed:100,breakLines:!1}),$("section").on("click",".btn-example4",function(){$(".example4").data().typeit.stopTyping(),$(".example4").html(""),$(".example4").typeIt({whatToType:["This is a great string.","But here is a better one."],typeSpeed:100,breakLines:!1})}),function(){$("#iTypeSpeed").val("100"),$("#iBreakWait").val("100"),$("#iDelayStart").val("100"),$("#TIInput").on("click","#TISubmit",function(e){e.preventDefault(),$.hasData($(this))&&$(this).data().typeit.stopTyping(),$("#TIOutput").html("");var t,a=[];if(""===$("#stringTI").val())a="You didn't enter a string!";else{t=$("#stringTI").val().split("\n");for(var i=0;i');
}
+ // add .active-container to the first .ti-text-container so the cursor starts blinking before a string is printed
+ theElement.find('.ti-container:first-child').find('.ti-text-container').addClass('active-container');
+
// if breakLines is false, then we for sure only need ONE ti-container even if there multiple strings, so make sure of that
if(this.settings.breakLines === false) {
theElement.find('.ti-container').remove();
theElement.append('');
}
- theElement.css('display','inline-block');
-
// if showCursor is false, then remove the ti-cursor class
if(this.settings.showCursor === false) {
$(this.theElement).find('.ti-text-container').removeClass('ti-cursor');
@@ -113,10 +115,13 @@
// append the string of letters to the respective .ti-text-container
// use find() so that we select the class only for the element on which we're instantiated
+ characterToAppend = this.mergedStrings[this.typeCount+this.stringPlaceCount];
+
+ // if breakLines is set to true, add the 'active-container' class to the next .ti-text-container in the list.
if(this.settings.breakLines === true) {
- $(this.theElement).find('.ti-text-container:eq('+ this.stringCount +')').addClass('active-container').append(this.mergedStrings[this.typeCount+this.stringPlaceCount]);
+ $(this.theElement).find('.ti-text-container:eq('+ this.stringCount +')').addClass('active-container').append(characterToAppend);
} else {
- $(this.theElement).find('.ti-text-container').addClass('active-container').append(this.mergedStrings[this.typeCount+this.stringPlaceCount]);
+ $(this.theElement).find('.ti-text-container').addClass('active-container').append(characterToAppend);
}
this.typeCount++;
diff --git a/src/typeit.scss b/src/typeit.scss
index 255c6401..28bf2585 100644
--- a/src/typeit.scss
+++ b/src/typeit.scss
@@ -20,6 +20,15 @@
display: inline;
font-size: inherit;
+ // :before pseudo element is necessary so that when lines with no text hold the cursor, the cursor stays in the correct space on the screen
+ &:before {
+ content: '';
+ display: inline-block;
+ width: 1px;
+ height: 1em;
+ position: relative;
+ }
+
&.active-container {
&.ti-cursor {
@@ -37,8 +46,10 @@
display: none;
content: '|';
bottom: .05em;
- position: relative;
- vertical-align: baseline;
+ right: -.25em;
+ position: absolute;
+ line-height: normal;
+ font-size: inherit;
animation: blink 1s infinite;
}
}