Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: Changing Font

  1. #1
    New to the CF scene
    Join Date
    Dec 2004
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Changing Font

    Hi,
    I have no experience in JavaScript but I have the following code for a scrolling news box. How would I:
    (a) change the color of the text and the link?
    (b) have the text vertically centered? (it appears at the top right now)
    (c) add a border to the box?
    Thank you for your help!

    -Albert Chang

    =================(code below)=======================

    var scrollerdelay='3000' //delay between msg scrolls. 3000=3 seconds.
    var scrollerwidth='165px'
    var scrollerheight='60px'
    var scrollerbgcolor=''
    //set below to '' if you don't wish to use a background image
    var scrollerbackground='wolf.gif'

    //configure the below variable to change the contents of the scroller
    var messages=new Array()
    messages[0]="<font face='Arial'><a href=''>Sign-Up for the Next Build!</a></font>"
    messages[1]="<font face='Arial'><a href=''>Penny War Begins in 2005</a></font>"
    messages[2]="<font face='Arial'><a href=''>Pick-up H4H T-Shirts</a></font>"
    messages[3]="<font face='Arial'><a href=''>Looking for an officer?</a></font>"
    messages[4]="<font face='Arial'><a href=''>Help improve Plano West Habitat!</a></font>"

    ///////Do not edit pass this line///////////////////////

    var ie=document.all
    var dom=document.getElementById

    if (messages.length>2)
    i=2
    else
    i=0

    function move1(whichlayer){
    tlayer=eval(whichlayer)
    if (tlayer.top>0&&tlayer.top<=5){
    tlayer.top=0
    setTimeout("move1(tlayer)",scrollerdelay)
    setTimeout("move2(document.main.document.second)",scrollerdelay)
    return
    }
    if (tlayer.top>=tlayer.document.height*-1){
    tlayer.top-=5
    setTimeout("move1(tlayer)",25)
    }
    else{
    tlayer.top=parseInt(scrollerheight)
    tlayer.document.write(messages[i])
    tlayer.document.close()
    if (i==messages.length-1)
    i=0
    else
    i++
    }
    }

    function move2(whichlayer){
    tlayer2=eval(whichlayer)
    if (tlayer2.top>0&&tlayer2.top<=5){
    tlayer2.top=0
    setTimeout("move2(tlayer2)",scrollerdelay)
    setTimeout("move1(document.main.document.first)",scrollerdelay)
    return
    }
    if (tlayer2.top>=tlayer2.document.height*-1){
    tlayer2.top-=5
    setTimeout("move2(tlayer2)",25)
    }
    else{
    tlayer2.top=parseInt(scrollerheight)
    tlayer2.document.write(messages[i])
    tlayer2.document.close()
    if (i==messages.length-1)
    i=0
    else
    i++
    }
    }

    function move3(whichdiv){
    tdiv=eval(whichdiv)
    if (parseInt(tdiv.style.top)>0&&parseInt(tdiv.style.top)<=5){
    tdiv.style.top=0+"px"
    setTimeout("move3(tdiv)",scrollerdelay)
    setTimeout("move4(second2_obj)",scrollerdelay)
    return
    }
    if (parseInt(tdiv.style.top)>=tdiv.offsetHeight*-1){
    tdiv.style.top=parseInt(tdiv.style.top)-5+"px"
    setTimeout("move3(tdiv)",25)
    }
    else{
    tdiv.style.top=parseInt(scrollerheight)
    tdiv.innerHTML=messages[i]
    if (i==messages.length-1)
    i=0
    else
    i++
    }
    }

    function move4(whichdiv){
    tdiv2=eval(whichdiv)
    if (parseInt(tdiv2.style.top)>0&&parseInt(tdiv2.style.top)<=5){
    tdiv2.style.top=0+"px"
    setTimeout("move4(tdiv2)",scrollerdelay)
    setTimeout("move3(first2_obj)",scrollerdelay)
    return
    }
    if (parseInt(tdiv2.style.top)>=tdiv2.offsetHeight*-1){
    tdiv2.style.top=parseInt(tdiv2.style.top)-5+"px"
    setTimeout("move4(second2_obj)",25)
    }
    else{
    tdiv2.style.top=parseInt(scrollerheight)
    tdiv2.innerHTML=messages[i]
    if (i==messages.length-1)
    i=0
    else
    i++
    }
    }

    function startscroll(){
    if (ie||dom){
    first2_obj=ie? first2 : document.getElementById("first2")
    second2_obj=ie? second2 : document.getElementById("second2")
    move3(first2_obj)
    second2_obj.style.top=scrollerheight
    second2_obj.style.visibility='visible'
    }
    else if (document.layers){
    document.main.visibility='show'
    move1(document.main.document.first)
    document.main.document.second.top=parseInt(scrollerheight)+1
    document.main.document.second.visibility='show'
    }
    }

    window.onload=startscroll

    </script> <ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight}; bgColor=&{scrollerbgcolor}; background=&{scrollerbackground}; visibility=hide>
    <layer id="first" left=0 top=1 width=&{scrollerwidth};>
    <script language="JavaScript1.2">
    if (document.layers)
    document.write(messages[0])
    </script>
    </layer>
    <layer id="second" left=0 top=0 width=&{scrollerwidth}; visibility=hide>
    <script language="JavaScript1.2">
    if (document.layers)
    document.write(messages[dyndetermine=(messages.length==1)? 0 : 1])
    </script>
    </layer>
    </ilayer>
    <script language="JavaScript1.2">
    if (ie||dom){
    document.writeln('<div id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hidden;backgroun d-color:'+scrollerbgcolor+' ;background-image:url('+scrollerbackground+')">')
    document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0px;top:0px">')
    document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:1px;">')
    document.write(messages[0])
    document.writeln('</div>')
    document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:0px;visibility:hidden">')
    document.write(messages[dyndetermine=(messages.length==1)? 0 : 1])
    document.writeln('</div>')
    document.writeln('</div>')
    document.writeln('</div>')
    }
    </script>
    Last edited by albert611; 12-23-2004 at 10:01 PM.

  • #2
    Regular Coder
    Join Date
    Jan 2004
    Location
    Port Huron, MI, U.S.A.
    Posts
    280
    Thanks
    0
    Thanked 0 Times in 0 Posts
    (a) change the color of the text and the link?
    (b) have the text vertically centered? (it appears at the top right now)
    (c) add a border to the box?
    Thank you for your help!



    A)
    for all links:
    <style>
    a:hover {color:lime}
    a:link {color:blue}
    </style>
    for specific link color adjust
    <a onmouseover="this.style.color='lime'" onmouseout="this.style.color='gold'" style="color:white">~#~</a>
    for text
    <font color=tan>~#~$</font>


    B)
    text-align:center center
    not sure if it'll do vertical alignments, though....
    C)
    in style tag or tylesheet (see above):
    border-
    [left/right/top/bottom]-
    [color/width/style]:
    [aColor/aNumber/solid,double,dotted,dashed,ridge,groove,inset,ORoutset];
    choose one thing in the brackets for each adjustment ex.:
    border-left-color:blue;border-top-style:ridge
    or combine 'em ex.:
    border-right:groove 3px white;border-top-width:7px

    if width doesn't work, try size
    Oh, was I supposed to put something here? ........


  •  

    Posting Permissions

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