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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Highlighter Roller Script

    I have this script working and would like to center the output since not all the text arrays take up the full alloted space. I tried playing around with the <span style> & <div> tags with no luck. Can anyone help with this ?

    <div style="position:relative;left:0px;top:0px">
    <span id="highlighter" style="position:absolute;left:0;top:0;font-size:18px;font-family:Verdana;background-color:yellow;clip:rect(0px 0px auto 0px)"></span>
    </div>

    <script type="text/javascript">

    /*
    Highligher Scroller script- By JavaScript Kit
    For this and over 400+ free scripts, visit http://www.javascriptkit.com/
    This notice must stay intact
    */

    var tickercontents=new Array()
    tickercontents[0]='Looking for free Java applets and resources? Visit <a href="http://freewarejava.com">Freewarejava.com</a>!'
    tickercontents[1]='Hop on over to <a href="http://www.codingforums.com">Coding Forums</a> to get help on web coding!'
    tickercontents[2]='This scroller\'s brought to you by <a href="http://www.javascriptkit.com">JavaScript Kit</a>'

    var tickdelay=3000 //delay btw messages
    var highlightspeed=10 //10 pixels at a time.

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

    var currentmessage=0
    var clipwidth=0

    function changetickercontent(){
    crosstick.style.clip="rect(0px 0px auto 0px)"
    crosstick.innerHTML=tickercontents[currentmessage]
    highlightmsg()
    }

    function highlightmsg(){
    var msgwidth=crosstick.offsetWidth
    if (clipwidth<msgwidth){
    clipwidth+=highlightspeed
    crosstick.style.clip="rect(0px "+clipwidth+"px auto 0px)"
    beginclip=setTimeout("highlightmsg()",20)
    }
    else{
    clipwidth=0
    clearTimeout(beginclip)
    if (currentmessage==tickercontents.length-1) currentmessage=0
    else currentmessage++
    setTimeout("changetickercontent()",tickdelay)
    }
    }

    function start_ticking(){
    crosstick=document.getElementById? document.getElementById("highlighter") : document.all.highlighter
    crosstickParent=crosstick.parentNode? crosstick.parentNode : crosstick.parentElement
    if (parseInt(crosstick.offsetHeight)>0)
    crosstickParent.style.height=crosstick.offsetHeight+'px'
    else
    setTimeout("crosstickParent.style.height=crosstick.offsetHeight+'px'",100) //delay for Mozilla's sake
    changetickercontent()
    }

    if (document.all || document.getElementById)
    window.onload=start_ticking

    </script>

    <p align="left">This free script provided by<br />
    <a href="http://javascriptkit.com">JavaScript Kit</a></p>

  • #2
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    One solution

    If you change the <span> into a <p> and add the following to the style...
    Code:
    width: 100%;text-align: center;
    so that it looks like the following, then I believe you will get what you are asking for.

    Code:
    <div style="position:relative;left:0px;top:0px;">
    <p id="highlighter" style="width: 100%;text-align: center;position:absolute;left:0;top:0;font-size:18px;font-family:Verdana;background-color:yellow;clip:rect(0px 0px auto 0px)"></p>
    </div>
    Jeremy Snyder
    http://snydersoft.com

  • #3
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Yep

    Works perfectly FF, IE, OP. Thanks so much.
    Never thought of the "<p> tag.

  • #4
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    oops

    now the text is centered but goes blank between messages instead of going from one message to the next without a gap like it did before. Is there another way to center the message ?


  •  

    Posting Permissions

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