Help with typing text effect.

**Edgecrusher** · 12-29-2009, 02:16 PM

Hi there.

New to the forums and web design in general but just wondered if you could help me with the news ticker type "Typing Effect" found here?

All I want to do, is rather than add a line break (instead of each line adding to the top of the next), I just want it, so after each item, it clears, and starts a line again, with a different piece of text. Much like the top of the BBC website here.

Can this be achieved by just slightly changing the original code, or is there a bit more to it?

Any help would be greatly appreciated.

**jscheuer1** · 12-29-2009, 04:15 PM

Here's one way:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.typer {
display: none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="TypingText.js">
/****************************************************
* Typing Text script- By Twey @ Dynamic Drive Forums
* Visit Dynamic Drive for this script and more: http://www.dynamicdrive.com
* This notice MUST stay intact for legal use
****************************************************/
</script>
<script type="text/javascript">
jQuery(function($){
	var typrs = $('.typer'), tl = typrs.length, typr = 0;
	function typeThem(){
		typr = typr % tl;
		typrs.hide();
		new TypingText($(typrs.get(typr++)).show().get(0), 100, '_', delayType).run();
	}
	function delayType(){
		setTimeout(typeThem, 3000);
	}
	typeThem();
});
</script>
</head>
<body>
<div>
<span class="typer">Thanks for &infin; visiting <a href="http://www.dynamicdrive.com/">Dynamic Drive!</a> 
Wow, HTML gets properly typed out too!</span>
<span class="typer">This text has a <b>Bold Section</b> and <br>a line break thanks to the &lt;br&gt; tag.</span>
<span class="typer">This is yet another typer you may place in this series.</span>
</div>
</body>
</html>

**Edgecrusher** · 12-29-2009, 05:14 PM

Thanks for replying so quick.

I've tried it, and it works really well.

I really do appreciate what you done for me there.

Thanks again!

**jscheuer1** · 01-02-2010, 06:29 AM

As a side note, I've found a more efficient way to set this up:

Code:

jQuery(function($){
	var typrs = $('.typer'), typng = [], tl = typrs.length, typr = 0;
	typrs.each(function(i){
		typng[i] = [$(this), new TypingText(this, 100, '_', delayType)];
	});
	function typeThem(){
		typrs.hide();
		typng[typr = typr % tl][0].show();
		typng[typr++][1].run();
	}
	function delayType(){
		setTimeout(typeThem, 3000);
	}
	typeThem();
});

This way only one TypingText instance is created for each 'typer' and much less use of the $(selector/element) creation process is required as well. The original created an instance and a $(selector/element) object each time a 'typer' was run.

**Edgecrusher** · 01-08-2010, 03:10 PM

Ok, I shall give it a go later.

Thanks again for your help!!!

Brilliant stuff.

Thread: Help with typing text effect.

Thread Tools

Search Thread

Help with typing text effect.

Bookmarks

Bookmarks

Posting Permissions