PDA

View Full Version : DHTML Ticker Script: Manual controls too?



azdude
08-09-2006, 09:17 PM
1) Script Title: DHTML Ticker script
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex2/generaltick.htm
3) Describe problem:

Can anyone help me add "Previous" and "Next" buttons to the tickers in this script?

We need:

1) Two independently rotating content areas (which this script does)
2) That rotate at time intervals (which this script does)
3) That pause on mouseover (which this script does)
4) That can also be automatically advanced or reversed... the problem.

I'm minimally capable in JS, but the DOM parts of the code have me confused -- in my tinkering, I've been unable to make any sort of Prev/Next buttons be able to access the tickers. How do you call/identify the two tickers, and advance or reverse them?

jscheuer1
08-10-2006, 08:53 AM
This version will do what you are asking:


<script type="text/javascript">

/***********************************************
* DHTML Ticker script- Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
* Modified in http://www.dynamicdrive.com/forums by jscheuer1
* for Wider Cross Browser Fade effects and Manual Controls
***********************************************/

function domticker(content, divId, divClass, delay, fadeornot){
this.content=content
this.tickerid=divId //ID of master ticker div. Message is contained inside first child of ticker div
this.delay=delay //Delay between msg change, in miliseconds.
this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over ticker (and pause it if it is)
this.pauseBol=0
this.pauseBol2=0
this.pointer=1
this.opacitystring=(typeof fadeornot!="undefined")? "width: 100%; filter:progid:DXImageTransform.Microsoft.alpha(opacity=100); -moz-opacity: 1" : ""
if (this.opacitystring!="") this.delay+=500 //add 1/2 sec to account for fade effect, if enabled
this.opacitysetting=0.2 //Opacity value when reset. Internal use.
document.write('<div id="'+divId+'" class="'+divClass+'"><div style="'+this.opacitystring+'">'+content[0]+'</div></div>')
document.write('<div id="d'+divId+'" align="center"><input type="button" value="pause" id="l1'+divId+'"> <input title="Next" style="font-weight:bold;" disabled type="button" value="+" id="l2'+divId+'">')
document.write(' <input title="Previous" style="font-weight:bold;" disabled type="button" value="-" id="l3'+divId+'"> <input disabled type="button" value="resume" id="l4'+divId+'"></div>')
document.getElementById('d'+this.tickerid).style.width=document.getElementById(this.tickerid).offsetWidth+'px';
document.getElementById('l2'+this.tickerid).style.width=document.getElementById('l3'+this.tickerid).offsetWidth+'px';
var instanceOfTicker=this
setTimeout(function(){instanceOfTicker.initialize()}, delay)
}

domticker.prototype.initialize=function(){
var instanceOfTicker=this
this.contentdiv=document.getElementById(this.tickerid).firstChild //div of inner content that holds the messages
document.getElementById(this.tickerid).onmouseover=function(){instanceOfTicker.mouseoverBol=1}
document.getElementById(this.tickerid).onmouseout=function(){instanceOfTicker.mouseoverBol=0}
document.getElementById('l1'+this.tickerid).onclick=function(){instanceOfTicker.pauseBol=instanceOfTicker.pauseBol2=this.disabled=1;document.getElementById('l2' +instanceOfTicker.tickerid).disabled=document.getElementById('l4'+instanceOfTicker.tickerid).disabled=document.getElementById('l3'+instanceOfTicker.tickerid).di sabled=0;}
document.getElementById('l2'+this.tickerid).onclick=function(){instanceOfTicker.pauseBol=0;instanceOfTicker.rotatemsg()}
document.getElementById('l3'+this.tickerid).onclick=function(){instanceOfTicker.reversemsg()}
document.getElementById('l4'+this.tickerid).onclick=function(){instanceOfTicker.pauseBol=instanceOfTicker.pauseBol2=0;instanceOfTicker.rotatemsg();this.disabled =document.getElementById('l2'+instanceOfTicker.tickerid).disabled=document.getElementById('l3'+instanceOfTicker.tickerid).disabled=1;document.getElementById('l1 '+instanceOfTicker.tickerid).disabled=0;}
this.rotatemsg()
}

domticker.prototype.rotatemsg=function(){
var instanceOfTicker=this
if (this.mouseoverBol==1) //if mouse is currently over ticker, do nothing (pause it)
setTimeout(function(){instanceOfTicker.rotatemsg()}, 100)
else if (this.pauseBol==0){
this.fadetransition("reset") //FADE EFFECT- RESET OPACITY
this.contentdiv.innerHTML=this.content[this.pointer]
this.fadetimer1=setInterval(function(){instanceOfTicker.fadetransition('up', 'fadetimer1')}, 100) //FADE EFFECT- PLAY IT
this.pointer=(this.pointer<this.content.length-1)? this.pointer+1 : 0
if (this.pauseBol2==0)
setTimeout(function(){instanceOfTicker.rotatemsg()}, this.delay) //update container
}
}

domticker.prototype.reversemsg=function(){
var instanceOfTicker=this
this.fadetransition("reset") //FADE EFFECT- RESET OPACITY
this.pointer=(this.pointer>1)? this.pointer-2 : this.content.length+this.pointer-2
this.contentdiv.innerHTML=this.content[this.pointer]
this.fadetimer1=setInterval(function(){instanceOfTicker.fadetransition('up', 'fadetimer1')}, 100) //FADE EFFECT- PLAY IT
this.pointer=(this.pointer<this.content.length-1)? this.pointer+1 : 0
}

// -------------------------------------------------------------------
// fadetransition()- cross browser fade method for IE5.5+ and Mozilla/Firefox
// -------------------------------------------------------------------

domticker.prototype.fadetransition=function(fadetype, timerid){
var contentdiv=this.contentdiv
if (fadetype=="reset")
this.opacitysetting=0.2
if (contentdiv.filters && contentdiv.filters[0]){
if (typeof contentdiv.filters[0].opacity=="number") //IE6+
contentdiv.filters[0].opacity=this.opacitysetting*100
else //IE 5.5
contentdiv.style.filter="alpha(opacity="+this.opacitysetting*100+")"
}
else if (typeof contentdiv.style.MozOpacity!="undefined" && this.opacitystring!=""){
contentdiv.style.MozOpacity=this.opacitysetting
}
else if (typeof contentdiv.style.opacity!="undefined" && this.opacitystring!="" &&!contentdiv.filters){
contentdiv.style.opacity=this.opacitysetting
}
else
this.opacitysetting=1
if (fadetype=="up")
this.opacitysetting+=0.2
if (fadetype=="up" && this.opacitysetting>=1)
clearInterval(this[timerid])
}

</script>

azdude
08-10-2006, 07:17 PM
Awesome, John - thanks for the help... How about a bit of troubleshooting? :rolleyes:

We had your version of the script installed and running. Works great, as you've written it.

Then, we decided we'd rather do away with the Pause/Resume buttons, and allow the "+"/"-" buttons to control the rotation directly, even "while it's live."

After our modifications, we have two issues which ought to be easy to clear up.
(Test Page (http://dev.ilounge.com/index.php/ilounge/rand_test/))


PROBLEM 1:
-------------
The buttons don't work until after one switch has gone through.

PROBLEM 2:
--------------
So, for example, say the delay is set to 8 seconds. If someone gets impatient, and wants to read ahead, they hit the "+" button, at which point the delay resets to 8 seconds. Unfortunately, that's not exactly what's happening with what we have.

If you play with the above test page a bit, you'll find that your "+" and "-" inputs are actually being "recorded" and played back later... an irritating bug. Try hitting "+" twice in rapid succession, and watch it play back when the content rolls around.


Any help would be appreciated. You've given us an awesome starting point, so thank you!

jscheuer1
08-11-2006, 03:30 AM
There really is too much going on with this script to do this with two buttons. The pause and resume buttons could be combined. When you hit pause, it could become the resume button and visa versa. The + and - buttons need to be disabled during regular play for the very reason you mention. I think I will write up a new version with the three buttons, if for no other reason than my own amusement, and when I do, I'll publish it here.

jscheuer1
08-11-2006, 04:18 AM
Here's my new version. I added a bottom margin (in the style section) to both tickers to give a little separation between a ticker and its controls. This is totally optional. You can now style the controls using a style hook as shown in the style section for the second ticker's styles. The controls for the first ticker are the default style that the script creates. Since I noticed that using the controls with the fade option can give rise to a situation where the fade gets lost if the + and/or - buttons are clicked too rapidly, I've corrected for that. The controls are now optional, see the slightly new method for calling the ticker at the bottom of the demo page:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>DHTML Ticker script w/optional Manual Controls - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

/*Example CSS for the two demo tickers*/

#domticker{
width: 200px;
height: 100px;
border: 1px dashed black;
padding: 5px;
background-color: #FFFFCA;
margin-bottom:1ex;
}

#domticker div{ /*IE6 bug fix when text is bold and fade effect (alpha filter) is enabled. Style inner DIV with same color as outer DIV*/
background-color: #FFFFCA;
}

#domticker a{
font-weight: bold;
}

#domticker2{
width: 350px;
height: 1.2em;
border: 1px solid black;
padding: 3px;
margin-bottom:1ex;
}

#ddomticker2 { /*Style for 2nd ticker's controls*/
text-align:left;
}

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

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

</script>


<script type="text/javascript">

/***********************************************
* DHTML Ticker script- Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
* Modified in http://www.dynamicdrive.com/forums by jscheuer1
* Wider Cross Browser Fade effects and optional Manual Controls
***********************************************/

function domticker(content, divId, divClass, delay, controls, fadeornot){
this.content=content
this.tickerid=divId //ID of master ticker div. Message is contained inside first child of ticker div
this.delay=delay //Delay between msg change, in miliseconds.
this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over ticker (and pause it if it is)
this.pauseBol=0
this.pauseBol2=0
this.pointer=0
this.controls=typeof controls=="number"? controls : null;
this.opacitystring=typeof fadeornot!="undefined"||(typeof controls!="undefined"&&typeof controls!="number")? document.body.filters? "width: 100%; filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);" : "width: 100%;-moz-opacity: 1;opacity:1;" : ""
if (this.opacitystring!="") this.delay+=500 //add 1/2 sec to account for fade effect, if enabled
this.opacitysetting=0.2 //Opacity value when reset. Internal use.
document.write('<div id="'+divId+'" class="'+divClass+'"><div style="'+this.opacitystring+'">'+content[0]+'</div></div>')
if (this.controls) {
document.write('<div id="d'+divId+'" align="center"><input type="button" value="resume" id="l1'+divId+'"> <input title="Next" style="font-weight:bold;" disabled type="button" value="+" id="l2'+divId+'">')
document.write(' <input title="Previous" style="font-weight:bold;" disabled type="button" value="-" id="l3'+divId+'"></div>')
document.getElementById('d'+this.tickerid).style.width=document.getElementById(this.tickerid).offsetWidth+'px';
document.getElementById('l1'+this.tickerid).style.width=document.getElementById('l1'+this.tickerid).offsetWidth+'px';
document.getElementById('l1'+this.tickerid).value='pause';
document.getElementById('l2'+this.tickerid).style.width=document.getElementById('l3'+this.tickerid).offsetWidth+'px';
}
this.initialize();
}

domticker.prototype.initialize=function(){
var instanceOfTicker=this
this.contentdiv=document.getElementById(this.tickerid).firstChild //div of inner content that holds the messages
document.getElementById(this.tickerid).onmouseover=function(){instanceOfTicker.mouseoverBol=1}
document.getElementById(this.tickerid).onmouseout=function(){instanceOfTicker.mouseoverBol=0}
if (this.controls) {
document.getElementById('l1'+this.tickerid).onclick=function(){
var contentdiv=instanceOfTicker.contentdiv;
if (contentdiv.filters && contentdiv.filters[0]){
if (typeof contentdiv.filters[0].opacity=="number") //IE6+
contentdiv.filters[0].opacity=100
else //IE 5.5
contentdiv.style.filter="alpha(opacity=100)"
}
else if (typeof contentdiv.style.MozOpacity!="undefined" && this.opacitystring!=""){
contentdiv.style.MozOpacity=1
}
else if (typeof contentdiv.style.opacity!="undefined" && this.opacitystring!="" &&!contentdiv.filters){
contentdiv.style.opacity=1
}
if(instanceOfTicker.fadetimer1){clearInterval(instanceOfTicker.fadetimer1)};
if(instanceOfTicker.repeat){clearTimeout(instanceOfTicker.repeat)};
if(this.value=='pause'){
instanceOfTicker.pauseBol=instanceOfTicker.pauseBol2=1;
document.getElementById('l2'+instanceOfTicker.tickerid).disabled=document.getElementById('l3'+instanceOfTicker.tickerid).disabled=0;
this.value='resume';
}
else {
instanceOfTicker.pauseBol=instanceOfTicker.pauseBol2=0;instanceOfTicker.rotatemsg();
document.getElementById('l2'+instanceOfTicker.tickerid).disabled=document.getElementById('l3'+instanceOfTicker.tickerid).disabled=1;
this.value='pause';
}
}
document.getElementById('l2'+this.tickerid).onclick=function(){if(instanceOfTicker.repeat){clearTimeout(instanceOfTicker.repeat)};if(instanceOfTicker.fadetimer1 ){clearInterval(instanceOfTicker.fadetimer1)};instanceOfTicker.pauseBol=0;instanceOfTicker.rotatemsg()}
document.getElementById('l3'+this.tickerid).onclick=function(){if(instanceOfTicker.repeat){clearTimeout(instanceOfTicker.repeat)};if(instanceOfTicker.fadetimer1 ){clearInterval(instanceOfTicker.fadetimer1)};instanceOfTicker.reversemsg()}
}
this.rotatemsg()
}

domticker.prototype.rotatemsg=function(){
var instanceOfTicker=this
if (this.mouseoverBol==1) //if mouse is currently over ticker, do nothing (pause it)
setTimeout(function(){instanceOfTicker.rotatemsg()}, 100)
else if (this.pauseBol==0){
this.fadetransition("reset") //FADE EFFECT- RESET OPACITY
this.contentdiv.innerHTML=this.content[this.pointer]
this.fadetimer1=setInterval(function(){instanceOfTicker.fadetransition('up', 'fadetimer1')}, 100) //FADE EFFECT- PLAY IT
this.pointer=(this.pointer<this.content.length-1)? this.pointer+1 : 0
if (this.pauseBol2==0)
this.repeat=setTimeout(function(){instanceOfTicker.rotatemsg()}, this.delay) //update container
}
}

domticker.prototype.reversemsg=function(){
var instanceOfTicker=this
this.fadetransition("reset") //FADE EFFECT- RESET OPACITY
this.pointer=(this.pointer>1)? this.pointer-2 : this.content.length+this.pointer-2
this.contentdiv.innerHTML=this.content[this.pointer]
this.fadetimer1=setInterval(function(){instanceOfTicker.fadetransition('up', 'fadetimer1')}, 100) //FADE EFFECT- PLAY IT
this.pointer=(this.pointer<this.content.length-1)? this.pointer+1 : 0
}

// -------------------------------------------------------------------
// fadetransition()- cross browser fade method for IE5.5+ and Mozilla/Firefox
// -------------------------------------------------------------------

domticker.prototype.fadetransition=function(fadetype, timerid){
var contentdiv=this.contentdiv
if (fadetype=="reset")
this.opacitysetting=0.2
if (contentdiv.filters && contentdiv.filters[0]){
if (typeof contentdiv.filters[0].opacity=="number") //IE6+
contentdiv.filters[0].opacity=this.opacitysetting*100
else //IE 5.5
contentdiv.style.filter="alpha(opacity="+this.opacitysetting*100+")"
}
else if (typeof contentdiv.style.MozOpacity!="undefined" && this.opacitystring!=""){
contentdiv.style.MozOpacity=this.opacitysetting
}
else if (typeof contentdiv.style.opacity!="undefined" && this.opacitystring!="" &&!contentdiv.filters){
contentdiv.style.opacity=this.opacitysetting
}
else
this.opacitysetting=1
if (fadetype=="up")
this.opacitysetting+=0.2
if (fadetype=="up" && this.opacitysetting>=1)
clearInterval(this[timerid])
}

</script>
</head>
<body>
<script type="text/javascript">

//new domticker(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds, optionalcontrols[0 or 1], optionalfadeswitch["fadeit"])

new domticker(tickercontent, "domticker", "someclass", 3000, 1, "fadeit")
document.write("<br />")
new domticker(tickercontent2, "domticker2", "someclass", 3000, 1)
</script>
</body>
</html>

jscheuer1
08-11-2006, 05:36 AM
After adding the refinements to the above, I found I no longer had room for these additional comments:

Notes: Unused in the above demo, each individual button has a style hook if you should choose to use it. The id for the first button is l1CSS_ID, where l1 is literally l1 and CSS_ID is the id for that ticker, the second and third buttons are l2CSS_ID and l3CSS_ID respectively.

jscheuer1
08-11-2006, 06:14 AM
Oddly enough, after refining my three button approach above, which has its own charms, I came up with this two button approach which suddenly seemed self evident. There is no longer any pausing except onmouseover:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>DHTML Ticker script w/optional Manual Controls - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

/*Example CSS for the two demo tickers*/

#domticker{
width: 200px;
height: 100px;
border: 1px dashed black;
padding: 5px;
background-color: #FFFFCA;
margin-bottom:1ex;
}

#domticker div{ /*IE6 bug fix when text is bold and fade effect (alpha filter) is enabled. Style inner DIV with same color as outer DIV*/
background-color: #FFFFCA;
}

#domticker a{
font-weight: bold;
}

#domticker2{
width: 350px;
height: 1.2em;
border: 1px solid black;
padding: 3px;
margin-bottom:1ex;
}

#ddomticker2 { /*Style for 2nd ticker's controls*/
text-align:left;
}

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

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

</script>


<script type="text/javascript">

/***********************************************
* DHTML Ticker script- Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
* Modified in http://www.dynamicdrive.com/forums by jscheuer1
* Wider Cross Browser Fade effects and optional Manual Controls
***********************************************/

function domticker(content, divId, divClass, delay, controls, fadeornot){
this.content=content
this.tickerid=divId //ID of master ticker div. Message is contained inside first child of ticker div
this.delay=delay //Delay between msg change, in miliseconds.
this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over ticker (and pause it if it is)
this.pointer=0
this.controls=typeof controls=="number"? controls : null;
this.opacitystring=typeof fadeornot!="undefined"||(typeof controls!="undefined"&&typeof controls!="number")? document.body.filters? "width: 100%; filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);" : "width: 100%;-moz-opacity: 1;opacity:1;" : ""
if (this.opacitystring!="") this.delay+=500 //add 1/2 sec to account for fade effect, if enabled
this.opacitysetting=0.2 //Opacity value when reset. Internal use.
document.write('<div id="'+divId+'" class="'+divClass+'"><div style="'+this.opacitystring+'"></div></div>')
if (this.controls) {
document.write('<div id="d'+divId+'" align="center"><input title="Next" style="font-weight:bold;" type="button" value="+" id="l2'+divId+'">')
document.write(' <input title="Previous" style="font-weight:bold;" type="button" value="-" id="l3'+divId+'"></div>')
document.getElementById('d'+this.tickerid).style.width=document.getElementById(this.tickerid).offsetWidth+'px';
document.getElementById('l2'+this.tickerid).style.width=document.getElementById('l3'+this.tickerid).offsetWidth+'px';
}
this.initialize()
}

domticker.prototype.initialize=function(){
var instanceOfTicker=this
this.contentdiv=document.getElementById(this.tickerid).firstChild //div of inner content that holds the messages
document.getElementById(this.tickerid).onmouseover=function(){instanceOfTicker.mouseoverBol=1}
document.getElementById(this.tickerid).onmouseout=function(){instanceOfTicker.mouseoverBol=0}
if (this.controls) {
document.getElementById('l2'+this.tickerid).onclick=function(){instanceOfTicker.onclickinit();instanceOfTicker.rotatemsg()}
document.getElementById('l3'+this.tickerid).onclick=function(){instanceOfTicker.onclickinit();instanceOfTicker.reversemsg()}
}
this.rotatemsg()
}

domticker.prototype.onclickinit=function(){
var instanceOfTicker=this
var contentdiv=instanceOfTicker.contentdiv;
if (contentdiv.filters && contentdiv.filters[0]){
if (typeof contentdiv.filters[0].opacity=="number") //IE6+
contentdiv.filters[0].opacity=100
else //IE 5.5
contentdiv.style.filter="alpha(opacity=100)"
}
else if (typeof contentdiv.style.MozOpacity!="undefined" && this.opacitystring!=""){
contentdiv.style.MozOpacity=1
}
else if (typeof contentdiv.style.opacity!="undefined" && this.opacitystring!="" &&!contentdiv.filters){
contentdiv.style.opacity=1
}
if(instanceOfTicker.fadetimer1){clearInterval(instanceOfTicker.fadetimer1)};
if(instanceOfTicker.repeat){clearTimeout(instanceOfTicker.repeat)};
}

domticker.prototype.rotatemsg=function(){
var instanceOfTicker=this
if (this.mouseoverBol==1) //if mouse is currently over ticker, do nothing (pause it)
setTimeout(function(){instanceOfTicker.rotatemsg()}, 100)
this.fadetransition("reset") //FADE EFFECT- RESET OPACITY
this.contentdiv.innerHTML=this.content[this.pointer]
this.fadetimer1=setInterval(function(){instanceOfTicker.fadetransition('up', 'fadetimer1')}, 100) //FADE EFFECT- PLAY IT
this.pointer=(this.pointer<this.content.length-1)? this.pointer+1 : 0
this.repeat=setTimeout(function(){instanceOfTicker.rotatemsg()}, this.delay) //update container
}

domticker.prototype.reversemsg=function(){
var instanceOfTicker=this
this.fadetransition("reset") //FADE EFFECT- RESET OPACITY
this.pointer=(this.pointer>1)? this.pointer-2 : this.content.length+this.pointer-2
this.contentdiv.innerHTML=this.content[this.pointer]
this.fadetimer1=setInterval(function(){instanceOfTicker.fadetransition('up', 'fadetimer1')}, 100) //FADE EFFECT- PLAY IT
this.pointer=(this.pointer<this.content.length-1)? this.pointer+1 : 0
this.repeat=setTimeout(function(){instanceOfTicker.rotatemsg()}, this.delay) //update container
}

// -------------------------------------------------------------------
// fadetransition()- cross browser fade method for IE5.5+ and Mozilla/Firefox
// -------------------------------------------------------------------

domticker.prototype.fadetransition=function(fadetype, timerid){
var contentdiv=this.contentdiv
if (fadetype=="reset")
this.opacitysetting=0.2
if (contentdiv.filters && contentdiv.filters[0]){
if (typeof contentdiv.filters[0].opacity=="number") //IE6+
contentdiv.filters[0].opacity=this.opacitysetting*100
else //IE 5.5
contentdiv.style.filter="alpha(opacity="+this.opacitysetting*100+")"
}
else if (typeof contentdiv.style.MozOpacity!="undefined" && this.opacitystring!=""){
contentdiv.style.MozOpacity=this.opacitysetting
}
else if (typeof contentdiv.style.opacity!="undefined" && this.opacitystring!="" &&!contentdiv.filters){
contentdiv.style.opacity=this.opacitysetting
}
else
this.opacitysetting=1
if (fadetype=="up")
this.opacitysetting+=0.2
if (fadetype=="up" && this.opacitysetting>=1)
clearInterval(this[timerid])
}

</script>
</head>
<body>
<script type="text/javascript">

//new domticker(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds, optionalcontrols[0 or 1], optionalfadeswitch["fadeit"])

new domticker(tickercontent, "domticker", "someclass", 10000, 1, "fadeit")
document.write("<br />")
new domticker(tickercontent2, "domticker2", "someclass", 3000, 1)
</script>
</body>
</html>

azdude
08-11-2006, 02:01 PM
Simply awesome, John... You rock!

Works great. Thanks!

sol07
06-28-2007, 09:44 PM
Hey John, this is a great script, thanks for your hard work!

Would it be possible to call the content from a separate html or txt file? It would be great to be able to update one instance of content where it is being displayed over several pages.

I did have a go at this, but it broke the script!

Thanks again
Sol