PDA

View Full Version : Changing Text and Background Color



Steve Wilbanks
01-16-2010, 11:39 AM
I'm trying to use the script from http://www.dynamicdrive.com/dynamicindex2/typescroll.htm however I can't figure out how to change the text color to white and the background color to red so that I can use it in my webpage.

Steve

jscheuer1
01-16-2010, 12:19 PM
Use this version of the script:


<script type="text/javascript">
<!--

/*
Typing Scroller
Submitted by bengaliboy00@hotmail.com (hp: http://www.angelfire.com/nt/bengaliboy/)
With modifications by Dynamicdrive.com
For full source code, usage terms, and 100s more scripts, visit http://dynamicdrive.com
*/

//Secify scroller contents
var line=new Array()
line[1]="This is an awsome script"
line[2]="It brings up the text you want..."
line[3]="One letter at a time"
line[4]="You can add and subtract lines as you like."
line[5]="It\'s very cool and easy to use"

//--Don't edit below this line

var longestmessage=1
for (i=2;i<line.length;i++){
if (line[i].length>line[longestmessage].length)
longestmessage=i
}

//Auto set scroller width
var tscroller_width=line[longestmessage].length

lines=line.length-1 //--Number of lines

//if IE 4+ or NS6
if (document.all||document.getElementById){
document.write('<form name="bannerform">')
document.write('<input type="text" id="banner" name="banner" size="'+tscroller_width+'"')
document.write(' onfocus="blur()">')
document.write('</form>')
}

temp=""
nextchar=-1;
nextline=1;
cursor="\\"
function animate(){
if (temp==line[nextline] & temp.length==line[nextline].length & nextline!=lines){
nextline++;
nextchar=-1;
document.bannerform.banner.value=temp;
temp="";
setTimeout("nextstep()",1000)}
else if (nextline==lines & temp==line[nextline] & temp.length==line[nextline].length){
nextline=1;
nextchar=-1;
document.bannerform.banner.value=temp;
temp="";
setTimeout("nextstep()",1000)}
else{
nextstep()}}

function nextstep(){

if (cursor=="\\"){
cursor="|"}
else if (cursor=="|"){
cursor="/"}
else if (cursor=="/"){
cursor="-"}
else if (cursor=="-"){
cursor="\\"}


nextchar++;
temp+=line[nextline].charAt(nextchar);
document.bannerform.banner.value=temp+cursor
setTimeout("animate()",25)}

//if IE 4+ or NS6
if (document.all||document.getElementById)
window.onload=animate
// -->
</script>

Put this in the head of your page, or put its rules in your existing stylesheet:


<style type="text/css">
#banner {
color: white;
background-color: red;
font-family: verdana, sans-serif;
font-size: 100%;
font-weight: bold;
border: none;
}
</style>

Adjust/add/remove rules if/as desired.

Steve Wilbanks
01-16-2010, 01:10 PM
Thank You, I've been working on this for last 4 hours and it was making me crazy.

Steve