Pausing up-down Scroller (Geico)

**mberell** · 03-24-2006, 01:36 PM

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>

**jscheuer1** · 03-24-2006, 03:45 PM

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.

**mberell** · 03-24-2006, 04:02 PM

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

**mberell** · 03-24-2006, 04:11 PM

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.

**jscheuer1** · 03-24-2006, 04:33 PM

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

**mberell** · 03-24-2006, 09:09 PM

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>

**jscheuer1** · 03-24-2006, 11:03 PM

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

**mberell** · 03-25-2006, 01:48 AM

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

Thread: Pausing up-down Scroller (Geico)

Thread Tools

Search Thread

Pausing up-down Scroller (Geico)

Bookmarks

Bookmarks

Posting Permissions