Results 1 to 9 of 9

Thread: DHTML Ticker Script: Manual controls too?

  1. #1
    Join Date
    Aug 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation DHTML Ticker Script: Manual controls too?

    1) Script Title: DHTML Ticker script
    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...eneraltick.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?

  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

    This version will do what you are asking:

    Code:
    <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).disabled=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>
    - John
    ________________________

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

  3. #3
    Join Date
    Aug 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Awesome, John - thanks for the help... How about a bit of troubleshooting?

    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)


    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!

  4. #4
    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 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.
    - John
    ________________________

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

  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

    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:

    Code:
    <!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>
    Last edited by jscheuer1; 08-11-2006 at 08:46 AM. Reason: add refinement
    - John
    ________________________

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

  6. #6
    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

    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.
    - John
    ________________________

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

  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

    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:

    Code:
    <!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>
    - John
    ________________________

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

  8. #8
    Join Date
    Aug 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Simply awesome, John... You rock!

    Works great. Thanks!

  9. #9
    Join Date
    Jun 2007
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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
    Last edited by sol07; 06-28-2007 at 10:08 PM. Reason: spelling

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
  •