Results 1 to 8 of 8

Thread: Pausing up-down Scroller (Geico)

  1. #1
    Join Date
    Mar 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Pausing up-down Scroller (Geico)

    Hello,

    Sript: Pausing up-down Scroller
    http://www.dynamicdrive.com/dynamicindex2/crosstick.htm

    I wanted to set up a scrolling box that is similar to the one used on the Geico home page:

    http://www.geico.com

    I am using the following script, but I can't seem to figure out how to slow it down and make it continuous like the Geico example, as well as have different font colors and type for words in the same sentence. Any help would be appreciated. Any help would be greatly appreciated. There are 2 examples in this code, but scroller 1 is the most similar to the one I am trying to emulate. Also, I've been able to speed it up, but cant seem to get it close to what I am trying to replicate. Thank you..

    HTML>
    <HEAD>
    style type="text/css">

    /*Example CSS for the two demo scrollers*/

    #pscroller1{
    font-family:bold 100% Arial;
    font-size: 1em;
    color:navy;
    width: 256px;
    height: 56px;
    border: 1px blue;
    padding: 5px;
    background-color: white;
    background:#d0d0d0;
    }

    #pscroller2{
    width: 350px;
    height: 20px;
    border: 1px solid black;
    padding: 3px;
    }

    #pscroller2 a{
    text-decoration: none;
    }

    .someclass{ //class to apply to your scroller(s) if desired
    }

    </style>

    <script type="text/javascript">

    /*Example message arrays for the two demo scrollers*/

    var pausecontent=new Array()
    pausecontent[0]='<a href="http://www.javascriptkit.com">JavaScript Kit</a><br />Comprehensive JavaScript tutorials and over 400+ free scripts!'
    pausecontent[1]='<a href="http://www.codingforums.com">Coding Forums</a><br />Web coding and development forums.'
    pausecontent[2]='<a href="http://www.cssdrive.com" target="_new">CSS Drive</a><br />Categorized CSS gallery and examples.'

    var pausecontent2=new Array()
    pausecontent2[0]='<a href="http://www.news.com">News.com: Technology and business reports</a>'
    pausecontent2[1]='<a href="http://www.cnn.com">CNN: Headline and breaking news 24/7</a>'
    pausecontent2[2]='<a href="http://news.bbc.co.uk">BBC News: UK and international news</a>'

    </script>

    <script type="text/javascript">

    /***********************************************
    * Pausing up-down scroller- Dynamic Drive (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for this script and 100s more.
    ***********************************************/

    function pausescroller(content, divId, divClass, delay){
    this.content=content //message array content
    this.tickerid=divId //ID of ticker div to display information
    this.delay=delay //Delay between msg change, in miliseconds.
    this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause it if it is)
    this.hiddendivpointer=1 //index of message array for hidden div
    document.write('<div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"><div class="innerDiv" style="position: absolute; width: 100%" id="'+divId+'1">'+content[0]+'</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'2">'+content[1]+'</div></div>')
    var scrollerinstance=this
    if (window.addEventListener) //run onload in DOM2 browsers
    window.addEventListener("load", function(){scrollerinstance.initialize()}, false)
    else if (window.attachEvent) //run onload in IE5.5+
    window.attachEvent("onload", function(){scrollerinstance.initialize()})
    else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 sec
    setTimeout(function(){scrollerinstance.initialize()}, 500)
    }

    // -------------------------------------------------------------------
    // initialize()- Initialize scroller method.
    // -Get div objects, set initial positions, start up down animation
    // -------------------------------------------------------------------

    pausescroller.prototype.initialize=function(){
    this.tickerdiv=document.getElementById(this.tickerid)
    this.visiblediv=document.getElementById(this.tickerid+"1")
    this.hiddendiv=document.getElementById(this.tickerid+"2")
    this.visibledivtop=parseInt(pausescroller.getCSSpadding(this.tickerdiv))
    //set width of inner DIVs to outer DIV's width minus padding (padding assumed to be top padding x 2)
    this.visiblediv.style.width=this.hiddendiv.style.width=this.tickerdiv.offsetWidth-(this.visibledivtop*2)+"px"
    this.getinline(this.visiblediv, this.hiddendiv)
    this.hiddendiv.style.visibility="visible"
    var scrollerinstance=this
    document.getElementById(this.tickerid).onmouseover=function(){scrollerinstance.mouseoverBol=1}
    document.getElementById(this.tickerid).onmouseout=function(){scrollerinstance.mouseoverBol=0}
    if (window.attachEvent) //Clean up loose references in IE
    window.attachEvent("onunload", function(){scrollerinstance.tickerdiv.onmouseover=scrollerinstance.tickerdiv.onmouseout=null})
    setTimeout(function(){scrollerinstance.animateup()}, this.delay)
    }


    // -------------------------------------------------------------------
    // animateup()- Move the two inner divs of the scroller up and in sync
    // -------------------------------------------------------------------

    pausescroller.prototype.animateup=function(){
    var scrollerinstance=this
    if (parseInt(this.hiddendiv.style.top)>(this.visibledivtop+5)){
    this.visiblediv.style.top=parseInt(this.visiblediv.style.top)-5+"px"
    this.hiddendiv.style.top=parseInt(this.hiddendiv.style.top)-5+"px"
    setTimeout(function(){scrollerinstance.animateup()}, 50)
    }
    else{
    this.getinline(this.hiddendiv, this.visiblediv)
    this.swapdivs()
    setTimeout(function(){scrollerinstance.setmessage()}, this.delay)
    }
    }

    // -------------------------------------------------------------------
    // swapdivs()- Swap between which is the visible and which is the hidden div
    // -------------------------------------------------------------------

    pausescroller.prototype.swapdivs=function(){
    var tempcontainer=this.visiblediv
    this.visiblediv=this.hiddendiv
    this.hiddendiv=tempcontainer
    }

    pausescroller.prototype.getinline=function(div1, div2){
    div1.style.top=this.visibledivtop+"px"
    div2.style.top=Math.max(div1.parentNode.offsetHeight, div1.offsetHeight)+"px"
    }

    // -------------------------------------------------------------------
    // setmessage()- Populate the hidden div with the next message before it's visible
    // -------------------------------------------------------------------

    pausescroller.prototype.setmessage=function(){
    var scrollerinstance=this
    if (this.mouseoverBol==1) //if mouse is currently over scoller, do nothing (pause it)
    setTimeout(function(){scrollerinstance.setmessage()}, 100)
    else{
    var i=this.hiddendivpointer
    var ceiling=this.content.length
    this.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1
    this.hiddendiv.innerHTML=this.content[this.hiddendivpointer]
    this.animateup()
    }
    }

    pausescroller.getCSSpadding=function(tickerobj){ //get CSS padding value, if any
    if (tickerobj.currentStyle)
    return tickerobj.currentStyle["paddingTop"]
    else if (window.getComputedStyle) //if DOM2
    return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top")
    else
    return 0
    }

    </script>
    </HEAD>

    BODY>
    <script type="text/javascript">

    //new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds)

    new pausescroller(pausecontent, "pscroller1", "someclass", 100)
    document.write("<br />")
    new pausescroller(pausecontent2, "pscroller2", "someclass", 2000)

    </script>
    </HTML>

    </BODY>

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Try:

    http://home.comcast.net/~jscheuer1/side/marquee.htm

    To slow it down even more, find this line:

    Code:
    setTimeout('lefttime=setInterval("scrollmarquee()",20)',initPause)
    Make the red 20 40 or 50.
    - John
    ________________________

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

  3. #3
    Join Date
    Mar 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    awesome, thank you for that tip. it works great.

  4. #4
    Join Date
    Mar 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Also, forgot to ask. Would you know how to change the font color of words that are in the same sentence. Essentially, I wanted to bold the 1st 4 words and have them a different color than the rest of the sentence. thanks again.

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    There are many ways to do this, the easiest to explain and use is not the best but works:

    HTML Code:
    This text is default <b style="color:red;">This text is Bold and Red</b> This text is default
    - John
    ________________________

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

  6. #6
    Join Date
    Mar 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Sorry John, i am struggling. would you mind pointing specifically in the code below where it would go? Below you will see "MIKE IS RUNNING TO THE STORE" and "BOB IS WALKING VERY QUICKLY".

    How would I bold and change the color and font type of "MIKE IS RUNNING" to something different than the rest of the sentence..."TO THE STORE".

    THANK YOU!


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html dir="ltr" lang="en">
    <head>
    <title>Continuous Content Vertical Marquee - Demo</title>
    </head>
    <body>
    <script type="text/javascript">
    /*
    Cross browser Marquee II- Dynamic Drive (www.dynamicdrive.com)
    For full source code, 100's more DHTML scripts, and TOS, visit http://www.dynamicdrive.com
    Modified by jscheuer1 for continuous content. Credit MUST stay intact for use
    */

    //Specify the marquee's width (in pixels)
    var marqueewidth="430px"
    //Specify the marquee's height
    var marqueeheight="50px"
    //Specify the marquee's marquee speed (larger is faster 1-10)
    var marqueespeed=1
    //Pause marquee onMousever (0=no. 1=yes)?
    var pauseit=1

    //Specify the marquee's content
    //Keep all content on ONE line, and backslash any single quotations (ie: that\'s great):

    var marqueecontent='<span class=name> MIKE IS RUNNING</span> saved <span class=amount> TO</span> <br> THE STORE<br> <br> <span class=name> BOB IS WALKING</span> saved <span class=amount> VERY</span> <br> QUICKLY<br> <br></p>'



    ////NO NEED TO EDIT BELOW THIS LINE////////////

    marqueespeed=(document.all)? marqueespeed : Math.max(1, marqueespeed-1) //slow speed down by 1 for NS
    var copyspeed=marqueespeed
    var pausespeed=(pauseit==0)? copyspeed: 0
    var iedom=document.all||document.getElementById
    var actualheight=''
    var cross_marquee, ns_marquee

    function populate(){
    if (iedom){
    cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarquee
    cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
    cross_marquee.innerHTML=marqueecontent
    actualheight=cross_marquee.offsetHeight
    }
    else if (document.layers){
    ns_marquee=document.ns_marquee.document.ns_marquee2
    ns_marquee.top=parseInt(marqueeheight)+8
    ns_marquee.document.write(marqueecontent)
    ns_marquee.document.close()
    actualheight=ns_marquee.document.height
    }
    lefttime=setInterval("scrollmarquee()",80)
    }
    window.onload=populate

    function scrollmarquee(){

    if (iedom){
    if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))
    cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
    else
    cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
    }
    else if (document.layers){
    if (ns_marquee.top>(actualheight*(-1)+8))
    ns_marquee.top-=copyspeed
    else
    ns_marquee.top=parseInt(marqueeheight)+8

    }
    }

    if (iedom||document.layers){
    with (document){
    if (iedom){
    write('<div style="position:relative;width:'+marqueewidth+';height:'+marqueeheight+';overflow:hidden" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">')
    write('<div id="iemarquee" style="position:absolute;left:0px;top:0px;width:100%;">')
    write('</div></div>')
    }
    else if (document.layers){
    write('<ilayer width='+marqueewidth+' height='+marqueeheight+' name="ns_marquee">')
    write('<layer name="ns_marquee2" width='+marqueewidth+' height='+marqueeheight+' left=0 top=0 onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"></layer>')
    write('</ilayer>')
    }
    }
    }
    </script>
    </body>
    </html>

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Well, this is a slightly different question.

    How would I bold and change the color and font type of "MIKE IS RUNNING" to something different than the rest of the sentence..."TO THE STORE".
    than:

    Essentially, I wanted to bold the 1st 4 words and have them a different color than the rest of the sentence.
    The first quote appears to only want bold text and a different color. The second appears to want those two things and a different font type (font family is the official term).

    Now, where you have:

    Code:
    <span class=name> MIKE IS RUNNING</span> saved <span class=amount> TO</span> <br> THE STORE
    You basically have the right idea of how this really should be done. However, 'name' is a reserved word and should be avoided as a class designation. Also, class designations should be quoted. And, there is no reason to use a new span and class unless you actually want the text to change from the page's default in some way (simply closing the previous span will end its influence). Finally for your classes to have any effect, they must be defined in a stylesheet. For example, you could put this style in the head of the page:

    Code:
    <style type="text/css">
    .item {
    font-weight:bold;
    color:red;
    font-family:sans-serif;
    }
    
    .amount {
    definitions if any for amount text
    }
    </style>
    Leave out the green and red part if the default style for the page is good enough for the amount text:

    Now, you can do like so in the HTML portion:

    HTML Code:
    <span class="item">MIKE IS RUNNING TO THE STORE</span> <span class="amount">BOB IS WALKING VERY QUICKLY</span>
    If you have no definitions for .amount then it can be as simlpe as:

    HTML Code:
    <span class="item">MIKE IS RUNNING TO THE STORE</span> BOB IS WALKING VERY QUICKLY
    - John
    ________________________

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

  8. #8
    Join Date
    Mar 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    john, thank you for the help. this works awesome. i am a beginner and really appreciated the guidance. thanks again.

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
  •