PDA

View Full Version : 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 (http://www.dynamicdrive.com/dynamicindex10/text5.htm)?

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 (http://news.bbc.co.uk/).

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:


<!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:


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.