<!--- Associate this tag with CF_Ticker --->
 <cfassociate BASETAG="cf_NewsScroll">
 
 

Listing 2: The Parent Tag, NewsScroll.cfm

<!--- Only process in END execution mode --->
<CFIF ThisTag.ExecutionMode IS "END">

 <!--- Create Ticker placement variables (required attributes) --->
 <CFSET NewsX=#Attributes.NewsX#>
 <CFSET NewsY=#Attributes.NewsY#>
 <CFSET NewsW=#Attributes.NewsW#>
 <CFSET NewsH=#Attributes.NewsH#>
 
<cfif ParameterExists(Attributes.FontFace)>
 <CFSET TheFontFace=#Attributes.FontFace#>
<cfelse>
 <CFSET TheFontFace="Arial,Helvetica">
</cfif>
<cfif ParameterExists(Attributes.FontColor)>
  <CFSET TheFontColor=#Attributes.FontColor#>
<cfelse>
 <CFSET TheFontColor="black">
</cfif>
<cfif ParameterExists(Attributes.FontSize)>
  <CFSET TheFontSize=#Attributes.FontSize#>
<cfelse>
 <CFSET TheFontSize="3">
</cfif>
<cfif ParameterExists(Attributes.BGColor)>
  <CFSET TheBGColor=#Attributes.BGColor#>
<cfelse>
 <CFSET TheBGColor="CCCCCC">
</cfif>
<cfif ParameterExists(Attributes.BorderColor)>
  <CFSET TheBorderColor=#Attributes.BorderColor#>
<cfelse>
 <CFSET TheBorderColor=TheBGColor>
</cfif>
 
 
<cfset NumberOfNewsItems = #ArrayLen(ThisTag.AssocAttribs)#>
<cfset ForNumber = NumberOfNewsItems - 1>
 

<script language="JavaScript">
<!--
 

// BrowserCheck
ns = (document.layers)? true:false
ie = (document.all)? true:false

function NewsScrollBuild(TheX, TheY, TheW, TheH) {

 document.write('<STYLETYPE="text/css">\n')

// Layer for each item
<!--- Loop through items --->
<CFLOOP INDEX="i" FROM="0" TO="#ForNumber#">
 document.write('#NewsScrollItem<cfoutput>#i#</cfoutput>{position:absolute;left:<cfoutput>#NewsX#</cfoutput>px;')
 document.write('top:'+TheY+'px;')
 document.write('width:' + TheW + 'px;')
 document.write('height:' + TheH + 'px;')
 document.write('visibility:hidden;')
 document.write('background:#<cfoutput>#TheBGColor#</cfoutput>;')
 document.write('background-color:#<cfoutput>#TheBGColor#</cfoutput>;')
 document.write('color:#<cfoutput>#TheBGColor#</cfoutput>;')
 document.write('border : thinsolid#<cfoutput>#TheBorderColor#</cfoutput>;')
 document.write('padding : 2;')
 
 document.write('}\n')
</CFLOOP>

 document.write('</STYLE>\n')

//Now, write the DIV tags
<CFLOOP INDEX="i" FROM="1" TO="#NumberOfNewsItems#">
 <cfset NumOfLayer = i - 1>
 document.write('<DIVid="NewsScrollItem<cfoutput>#NumOfLayer#</cfoutput>">')
 
 //Here's where we write the CF items
 
 <CFIF StructKeyExists(ThisTag.AssocAttribs[i], "Link")>
 document.write('<ahref="<cfoutput>#ThisTag.AssocAttribs[i].Link#</cfoutput>">')
 </cfif>
 document.write('<cfoutput><font face= "#TheFontFace#"color="#TheFontColor#"size="#TheFontSize#">#ThisTag.AssocAttribs[i].NewsItem#</cfoutput></font>')
 
 <CFIF StructKeyExists(ThisTag.AssocAttribs[i], "Link")>
 document.write('</a>')
 </cfif>
 
 document.write('</DIV>')
</CFLOOP>

 
 // Finally, start the timer
 TheItem = 0
 startclock(TheItem)
 
}

function ShowItems(TheItem){

visibility = (ns)? "show" : "visible"
hidden = (ns)? "hide" : "hidden"

LastItem = TheItem-1
 
  //show layer TheItem
 if (ns){
   document.layers['NewsScrollItem'+TheItem].visibility = visibility
  if (TheItem !=0) {
  document.layers['NewsScrollItem'+LastItem].visibility = hidden
  } else {
  //back at the beginning, hide the top layer
 document.layers['NewsScrollItem<cfoutput>#ForNumber#</cfoutput>'].visibility = hidden
  }
 } else {
 
 eval('NewsScrollItem' + TheItem + '.style.visibility = visibility')
  if (TheItem !=0) {
   eval('NewsScrollItem' + LastItem + '.style.visibility = hidden')
  } else {
  //back at the beginning, hide the top layer
  eval('NewsScrollItem<cfoutput>#ForNumber#</cfoutput>.style.visibility = hidden')
  }
 
 }

  if (TheItem<<cfoutput>#ForNumber#</cfoutput>){
    TheItem++
 } else {
  TheItem=0
 }
 
  timerID = setTimeout("ShowItems("+TheItem+")",3000)
  timerRunning = true
}

//Timer Functions
var timerID = null
var timerRunning = false

function stopclock(){
  if(timerRunning)
   clearTimeout(timerID)
    timerRunning = false
}
function startclock(TheItem){
  // Make sure the clock is stopped
  stopclock()
  ShowItems(TheItem)
 

}

<cfoutput>
NewsScrollBuild(#NewsX#,#NewsY#,#NewsW#,#NewsH#)
</cfoutput>
//-->
</script>

</CFIF>
 

Listing 3: The Finished Wrapper Called in a Coldfusion Page

<cfquery name="News" datasource="NewsDatabase" dbtype="ODBC">
SELECT Item, URL
FROM NewsItems
</cfquery>

<cf_NewsScroll NewsX="180" NewsY="70" NewsW="250" NewsH="40" FontFace="Arial"
FontSize="2" FontColor="Blue" BGColor="FFFFCC" BorderColor="006600">
<cfoutput query="News">
<cf_NewsItem NewsItem="#Item#" Link="#URL#">
</cfoutput>
</cf_NewsScroll>