Codenstuff.com

Posted: **Fri Dec 20, 2013 9:10 pm**

ASSLAM-O-ALAIKUM | HELLO

I need help in Javascript text typer

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. :(

Posted: **Sat Dec 21, 2013 3:40 am**

You should try learning javascript.

Posted: **Sat Dec 21, 2013 9:46 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;

Posted: **Sat Dec 21, 2013 11:02 am**

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;

Posted: **Sat Dec 21, 2013 4:36 pm**

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

Codenstuff :| KKK

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

clapper; clapper; goofy;

Posted: **Sat Dec 21, 2013 6:13 pm**

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>

Posted: **Sat Dec 21, 2013 7:20 pm**

MIKE, Thank you

It really helped, I just took out random Code and see

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

TY SO MUCH

Posted: **Sat Dec 21, 2013 7:31 pm**

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.

Posted: **Sat Dec 21, 2013 9:17 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 :?

Posted: **Sun Dec 22, 2013 5:29 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.

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.

Codenstuff.com

JavaScript Text Typer HELP :|

JavaScript Text Typer HELP :|

Re: JavaScript Text Typer HELP :|

Re: JavaScript Text Typer HELP :|

Re: JavaScript Text Typer HELP :|

Re: JavaScript Text Typer HELP :|

Re: JavaScript Text Typer HELP :|

Re: JavaScript Text Typer HELP :|

Re: JavaScript Text Typer HELP :|

Re: JavaScript Text Typer HELP :|

Re: JavaScript Text Typer HELP :|