JavaScript Text Typer HELP :|

11 posts Page 1 of 2
Contributors
User avatar
Master M1nd
Top Poster
Top Poster
Posts: 82
Joined: Thu Aug 15, 2013 7:51 pm

JavaScript Text Typer HELP :|
Master M1nd
ASSLAM-O-ALAIKUM | HELLO

I need help in Javascript text typer :D

My JS CODE
<html>
<head>
<style>
body {
background-color:black;
}

#writer{
font-family:Courier;
font-size:12px;
color:#24FF00;
background-color:black;

}

</style>
</head>
<body>
<script type="text/javascript">
var text = "Hello CnS, HELP :P";
var counter = 0;
var speed = 25;

function type(){
lastText =

document.getElementById("writer").innerHTML;
lastText+=text.charAt(counter);
counter++;
document.getElementById("writer").innerHTML =

lastText;
}

setInterval(function(){type()},speed);
</script>


<div id="writer"></div>

</body>
</html>

It's working perfect!
The only thing i want is that how would i skip a line (<br> Tag) in this code. :(
User avatar
zachman61
VIP - Donator
VIP - Donator
Posts: 1891
Joined: Wed Dec 16, 2009 9:56 pm

Re: JavaScript Text Typer HELP :|
zachman61
You should try learning javascript.
Nailing my feet to the floor is easier than using my own muscles to balance, but you don't see me doing that :)
User avatar
CodenStuff
Site Admin
Site Admin
Posts: 4389
Joined: Tue Aug 04, 2009 1:47 am

I think #mikethedj4 will be able to help you with this, he's good with javascript unlike me lol. Hopefully he will be able to help you when he comes online and sees this tag cooll;
Welcome to CodenStuff.com Learn Code, Love Code. Thank you for being a member of the community.
User avatar
comathi
Coding God
Coding God
Posts: 1242
Joined: Fri Mar 26, 2010 1:59 pm

Re: JavaScript Text Typer HELP :|
comathi
Add this at the end of your typer() function to add a line break once the line is written:
Code: Select all
if(counter==text.length-1){document.getElementById("writer").innerHTML+="<br>";}
When it detects that all of the text's been written to the screen, it adds "<br>", which will be parsed as a line break. This, by the way, is how you could add any HTML tag to your document cooll;
User avatar
Master M1nd
Top Poster
Top Poster
Posts: 82
Joined: Thu Aug 15, 2013 7:51 pm

zachman61, I am learning JS. From Codeacademy and have reached at the LOOP Chapter will again continue if i got time,

Codenstuff :| KKK :D BTW you should also learn JS -_- It's Good -_- -_- -_- fight; angel;


Comathi, Bro i added but it only puts the last word of the line at other line :|, I want that it works according to me. If i want a <br> after My Name Is Master M1nd. Then How could i do that :D
clapper; clapper; goofy;
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

NOTE: I haven't read the article as I'm just getting ready to leave for work. I logged in to edit a post.

If you're trying to create a typewriter effect, try this...
Code: Select all
<!DOCTYPE html>
<html>
<head>
<title>JQuery Typewriter Effect</title>
<meta http-equiv='Content-Type' charset='utf-8' content='text/html;charset=ISO-8859-1'>
<script src='http://code.jquery.com/jquery-1.9.1.min.js' type='text/javascript'></script>
<style type="text/css">
body {
	margin:0;
	padding:0;
	font-family:Arial, Sans-Serif;
	font-weight:none;
	font-size:12px;
	color:cyan;
	text-shadow:0em 0em 1em #fff;
	background:#0af;}

#caption {
	display:none;}
	
#shadow {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.75);}

#container {
	position:absolute;
	bottom:0em;
	left:50%;
	width:800px;
	margin-left:-400px;
	height:auto;
	padding:2em;
	z-index:1;}
	
div#indent {
	padding-left:1.5em;}
</style>
<script type="text/javascript">
$(document).ready(function() {
	function StickyScroll() {
		$(document).scrollTop($(document).height());
	}
	
	var ch = 0;
	var item = 0;
	var items = $('#caption li').length;
	var time = 0;
	var delay = 0;
	var wait = 0;
	var tagOpen = false;
	
	$('#showCaption').css('width', ($('#caption').width() + 20));
		
	function tickInterval() {
		if(item < items) {
			var text = $('#caption li:eq('+item+')').html();
			type(text);
			text = null;
			var tick = setTimeout(tickInterval, time);
			StickyScroll()
		} else {
			clearTimeout(tick);
		}
	}
	
	function type(text) {
		time = delay;
		ch++;
		if(text.substr((ch - 1), 1) == '<') {
			if(text.substr(ch, 1) == '/') {
				tagOpen = false;
			}
			var tag = '';
			while(text.substr((ch - 1), 1) != '>') {
				tag += text.substr((ch - 1), 1);
				ch++;
			}
			ch++;
			tag += '>';
			var html = /\<[a-z]+/i.exec(tag);
			if(html !== null) {
				html = html[0].replace('<', '</') + '>';
				tagOpen = html;
			}
		}
		if(tagOpen !== false) {
			var t = text.substr(0, ch) + tagOpen;
		} else {
			var t = text.substr(0, ch);
		}
		
		$('#showCaption').html(t);
		if(ch > text.length) {
			item++;
			ch = 0;
			time = wait;
		}	
	}
	
	var tick = setTimeout(tickInterval, time);
});
</script>
</head>
<body>
	<div id="shadow"></div>
	
	<div id="container">
		<ul id="caption">
			<li><!DOCTYPE html><br />
<html><br />
<head><br />
<title>Simple Example HTML Editor with Preview</title><br />
<meta http-equiv='Content-Type' charset='utf-8' content='text/html;charset=ISO-8859-1'><br />
<meta content='width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0' name='viewport'><br />
<link rel='stylesheet' href='http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css'><br />
<script src='http://code.jquery.com/jquery-1.9.1.min.js' type='text/javascript'></script><br />
<script src='http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js' type='text/javascript'></script><br />
<style type="text/css"><br />
body, .content {<br />
<div id="indent">
   background-color:#303030;<br />
   overflow:hidden;}<br /><br />
</div>
   
textarea#editor {<br />
<div id="indent">
   display:block;<br />
   margin:0px;<br />
   padding:.5em;<br />
   width:100%;<br />
   height:100%!important;<br />
   border:0px;<br />
   font-family:monospace;<br />
   line-height:1;<br />
   min-height:1.4em;<br />
   line-height:1.4em;<br />
   font-size:1em;<br />
   border-radius:0px;<br />
   resize:none;<br />
   outline:none;<br />
   background-color:#1c1c1c;<br />
   color:#a9a9a9;<br />
   box-shadow:0em 0em 0em #000, inset 0em 0em 1em #000;<br />
   text-shadow:.125em .125em .5em #000;}<br /><br />
</div>
   
::-webkit-input-placeholder { /* WebKit browsers */<br />
<div id="indent">
   color: #666;}<br /><br /></div>

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */<br />
<div id="indent">
   color: #666;}<br /><br />
</div>

::-moz-placeholder { /* Mozilla Firefox 19+ */<br />
<div id="indent">
   color: #666;}<br /><br />
</div>
    
:-ms-input-placeholder { /* Internet Explorer 10+ */<br />
<div id="indent">
   color: #666;}<br /><br />
</div>
   
div#preview {<br />
<div id="indent">
   width:100%;<br />
   height:100%;<br />
   overflow:auto;<br />
   background-color:#fff;}<br /><br />
</div>
   
.content .ui-grid-a {<br />
<div id="indent">
   display:inline-block;<br />
   width:100%;<br />
   height:100%;<br />
   overflow:auto;}<br /><br />
</div>
   
.content .ui-block-a {<br />
<div id="indent">
   display:inline-block;<br />
   height:100%;<br />
   overflow:auto;}<br /><br />
</div>
   
.content .ui-block-b {<br />
<div id="indent">
   display:inline-block;<br />
   height:100%;<br />
   overflow:auto;}<br />
</div>
</style><br />
<script type="text/javascript"><br />
$(function() {<br />   
<div id="indent">
	var fixgeometry = function() {<br />
<div id="indent">
     /* Some orientation changes leave the scroll position at something<br />
      * that isn't 0,0. This is annoying for user experience. */<br />
     scroll(0, 0);<br /><br />

     /* Calculate the geometry that our content area should take */<br />
     var header = $(".header:visible");<br />
     var footer = $(".footer:visible");<br />
     var content = $(".content:visible");<br />
     var viewport_height = $(window).height();<br /><br />
     
     var content_height = viewport_height - header.outerHeight() - footer.outerHeight();<br /><br />
     
     /* Trim margin/border/padding height */<br />
     content_height -= (content.outerHeight() - content.height());<br />
     content.height(content_height);<br />
</div>
   }; /* fixgeometry */<br /><br />
</div>

<div id="indent">
   $(document).ready(function() {<br />
<div id="indent">
      $(window).bind("orientationchange resize pageshow", fixgeometry);<br />
</div>
   });<br /><br />
</div>
   
<div id="indent">
	   // Indent using the TAB<br />
   $('textarea.tab').keydown(function(e) {<br />
<div id="indent">
	      if(e.keyCode == 9) {<br />
<div id="indent">
	        var start = $(this).get(0).selectionStart;<br />
        $(this).val($(this).val().substring(0, start) + "\t" + $(this).val().substring($(this).get(0).selectionEnd));<br />
        $(this).get(0).selectionStart = $(this).get(0).selectionEnd = start + 1;<br />
        return false;<br />
</div>
      }<br />
</div>
   });<br /><br />
</div>

<div id="indent">
   // Indent using Spaces<br />
   $('textarea.space').keydown(function(e) {<br />
<div id="indent">
      if(e.keyCode == 9) {<br />
<div id="indent">
         var start = $(this).get(0).selectionStart;<br />
         $(this).val($(this).val().substring(0, start) + "    " + $(this).val().substring($(this).get(0).selectionEnd));<br />
         $(this).get(0).selectionStart = $(this).get(0).selectionEnd = start + 4;<br />
         return false;<br />
</div>
      }<br />
</div>
   });<br /><br />
</div>
   
<div id="indent" style="font-style:italic; color:#fff;">
   var input = $('#editor'),<br />
<div id="indent">
      preview = $("[ID$=preview]");<br /><br />
</div></div>

<div id="indent" style="font-style:italic; color:#fff;">
   input.keyup(function(e) {<br />
<div id="indent">
      preview.html(input.val());<br />
</div>
   });<br />
</div>
});<br />
</script><br />
</head><br />
<body><br />
<div id="indent">
	<div class="content" data-role="content"><br />
<div id="indent">
		<div class="ui-grid-a"><br />
<div id="indent">
			<div class="ui-block-a"><br />
<div id="indent">
				<textarea class="space" id="editor" placeholder="NOTE: div#preview acts as your body (#editor is the main text editor of page. Any css applied to this will overwrite original css)"></textarea><br />
</div>
			</div><br />
			<div class="ui-block-b"><br />
<div id="indent">
				<div id="preview"></div><br />
</div>
			</div><br />
</div>
		</div><!-- /grid-a --><br />
</div>
	</div><br />
</div>
</body><br />
</html></li>
		</ul>
		<div id="showCaption"></div>
	</div>
</body>
</html>
User avatar
Master M1nd
Top Poster
Top Poster
Posts: 82
Joined: Thu Aug 15, 2013 7:51 pm

MIKE, Thank you :D
It really helped, I just took out random Code and see :D
Code: Select all
<!DOCTYPE html>
<html>
<head>
<title>WELCOME TO OMERIQBALBUTT</title>
<meta http-equiv='Content-Type' charset='utf-8' 

content='text/html;charset=ISO-8859-1'>
<script src='http://code.jquery.com/jquery-1.9.1.min.js' 

type='text/javascript'></script>
<style type="text/css">
body {
   margin:0;
   padding:0;
   font-family:courier;
   font-weight:none;
   font-size:12px;
   color:#18FF00;
   text-shadow:0em 0em 1em #18FF00;
   background:black;}
 
#shadow {
   position:absolute;
   top:0px;
   left:0px;
   width:100%;
   height:100%;
   background-color:rgba(0,0,0,0.75);} 



#caption {
   display:none;}

#container {
   position:absolute;
   
   
   width:100%;
  
   height:auto;
   padding:2em;
   z-index:1;}
   
div#indent {
   padding-left:1.5em;}
</style>

<script type="text/javascript">
$(document).ready(function() {
   function StickyScroll() {
      $(document).scrollTop($(document).height());
   }
   
   var ch = 0;
   var item = 0;
   var items = $('#caption li').length;
   var time = 0;
   var delay = 0;
   var wait = 0;
   var tagOpen = false;
   
   $('#showCaption').css('width', ($('#caption').width() + 20));
      
   function tickInterval() {
      if(item < items) {
         var text = $('#caption li:eq('+item+')').html();
         type(text);
         text = null;
         var tick = setTimeout(tickInterval, time);
         StickyScroll()
      } else {
         clearTimeout(tick);
      }
   }
   
   function type(text) {
      time = delay;
      ch++;
      if(text.substr((ch - 1), 1) == '<') {
         if(text.substr(ch, 1) == '/') {
            tagOpen = false;
         }
         var tag = '';
         while(text.substr((ch - 1), 1) != '>') {
            tag += text.substr((ch - 1), 1);
            ch++;
         }
         ch++;
         tag += '>';
         var html = /\<[a-z]+/i.exec(tag);
         if(html !== null) {
            html = html[0].replace('<', '</') + '>';
            tagOpen = html;
         }
      }
      if(tagOpen !== false) {
         var t = text.substr(0, ch) + tagOpen;
      } else {
         var t = text.substr(0, ch);
      }
      
      $('#showCaption').html(t);
      if(ch > text.length) {
         item++;
         ch = 0;
         time = wait;
      }   
   }
   
   var tick = setTimeout(tickInterval, time);
});
</script>
</head>
<body>
   <div id="shadow"></div>
   
   <div id="container">
      <ul id="caption">
         <li>Thanks Mike, It really helped :*, <br />
Thank you so much <br />

Master M1nd

   

   

   

</li>
      </ul>
      <div id="showCaption"></div>
   </div>
</body>
</html>
Any way to control the speed, BTW this is good, I like it fasttttttttt :D
TY SO MUCH :D
User avatar
XTechVB
VIP - Site Partner
VIP - Site Partner
Posts: 727
Joined: Thu May 20, 2010 10:32 am

Re: JavaScript Text Typer HELP :|
XTechVB
If you're planing to learn/use JavaScript, try not to rely on it for important functions, because in most browsers it can be easily turned off.
You can find me on Facebook or on Skype mihai_92b
User avatar
Master M1nd
Top Poster
Top Poster
Posts: 82
Joined: Thu Aug 15, 2013 7:51 pm

XTechVB wrote:
If you're planing to learn/use JavaScript, try not to rely on it for important functions, because in most browsers it can be easily turned off.
Didn't understand :?
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

XTechVB wrote:
If you're planing to learn/use JavaScript, try not to rely on it for important functions, because in most browsers it can be easily turned off.
He's right for the most part. A lot of people actually do turn off JS, but most don't as most people I find to be computer illiterate.

This effect can be done in CSS3 alone, but it's a long process and must be done using CSS3 transitions/animations via keyframes. Which most of the common browsers support.

Please do not rely on my code though as it's very important when getting into programming to learn and understand the terminology that way you can read and write your own scripts and make whatever it is you want to make a while lot easier and faster; otherwise you'll have a very hard time.
11 posts Page 1 of 2
Return to “Help & Support”