Results 1 to 3 of 3

Thread: Changing Text and Background Color

  1. #1
    Join Date
    Jan 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Changing Text and Background Color

    I'm trying to use the script from http://www.dynamicdrive.com/dynamici...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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    Use this version of the script:

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

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jan 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank You, I've been working on this for last 4 hours and it was making me crazy.

    Steve

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •