Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: Fading Ticker

  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    Mumbai, India
    Posts
    218
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up Fading Ticker

    This is a Fading Javascript Ticker that can tick any number of messages. The Ticking message fades in while being displayed.

    Demo at :
    (1) http://www.qiksearch.com/javascripts/fading-ticker.htm
    (2) http://www.geocities.com/e_i_search/...ing-ticker.htm

    Code:
    <!--BEGIN FADING TICKER JAVASCRIPT-->
    <script language="JavaScript1.2">
    
    // Fading Ticker JavaScript
    //  Premshree Pillai
    // http://www.qiksearch.com
    
    //--------------------------------------CUTOMISE----------------------------------------------
    
    // Ticker Messages ( HTML Tags supported)
    var qiksearch_ticker_text = new Array ("Qiksearch.com", "FREE JavaScripts by Premshree Pillai", "Articles by Premshree Pillai", "Intellisearch Bar FREE Download");
    
    // Ticker Message URLs
    var qiksearch_ticker_URL = new Array ("http://www.qiksearch.com", "http://www.qiksearch.com/javascripts.htm", "http://www.qiksearch.com/articles.htm", "http://www.qiksearch.com/intellisearch.htm");
    
    // Ticker Message URLs' Target (1 for NEW WINDOW, 0 for SAME WINDOW)
    var qiksearch_ticker_target = new Array ("0", "0", "0", "1");
    
    var qiksearch_ticker_width = 390; // The width of the Ticker
    var qiksearch_ticker_height = 25; // The height of the Ticker
    var qiksearch_ticker_borderw=1; // Border width
    var qiksearch_ticker_borderc="#808080"; // Border Color
    var timeOutVal=200; // Delay in milliseconds
    var isPause=false; // true if you want pause on mouseover, else false
                       // setting to true is a bit buggy
    
    //--------------------------------------------------------------------------------------------
    
    //-----------------------------DO-NOT-MODIFY-BELOW-THIS---------------------------------------
    
    var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1;
    var ns6=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1;
    var ns4=document.layers;
    var qiksearch_tickerObj;
    var ticker_left_ns4=(screen.width/2-20)-Math.round(qiksearch_ticker_width/2);
    
    // Setting qiksearch_tickerObj depending on Browser
    function setTickerObj()
    {
     if(ie4)
     {
      qiksearch_tickerObj=document.all.qiksearch_js_ticker;
     }
     if(ns6)
     {
      qiksearch_tickerObj=document.getElementById("qiksearch_js_ticker");
     }
    }
    
    // isPause Content
    var isPauseContent;
    if(isPause)
    {
     isPauseContent=' onMouseOver="delay_timeOutVal();" onMouseOut="resume_timeOutVal();"';
    }
    else
    {
     isPauseContent='';
    }
    
    if(ie4||ns6)
    {
     document.write('<table' + isPauseContent + '  onMouseUp="goURL();" width="' + qiksearch_ticker_width + '" height="' +  qiksearch_ticker_height + '" style="cursor:pointer; background:#FFFFFF; border:' + qiksearch_ticker_borderw + 'px solid ' + qiksearch_ticker_borderc + '"><tr><td align="middle">');
     document.write('<div id="qiksearch_js_ticker">');
     document.write('</div>');
     document.write('</td></tr></table>');
    }
    
    var def_10='A',def_11='B',def_12='C',def_13='D',def_14='E',def_15='F';
    var colorVal=15;
    var div_count=0;
    
    // Fading Color code Generating function
    function qiksearch_fade_desat(getColorIntVal)
    {
     var returnVal;
     if(getColorIntVal>=10)
     {
      for(var i=0; i<=15; i++)
      {
       if((getColorIntVal==i))
       {
        returnVal = eval('def_' + i);
       }
      }
     }
     else
     {
      returnVal=getColorIntVal;
     }
     return(returnVal);
    } 
    
    // Main
    function writeDiv()
    {
     if(ie4||ns6)
     {
      qiksearch_tickerObj.innerHTML= '<font face="verdana,arial,helvetica" size="-1" color="#' +  joinColor(qiksearch_fade_desat(colorVal)) + '"><b>' + qiksearch_ticker_text[div_count] +  '</b></font>' ;
     }
     if(ns4)
     {
      qiksearch_tickerObj=document.qiksearch_ticker_ns4;
      qiksearch_tickerObj.document.write('<table border="1" bordercolor="' + qiksearch_ticker_borderc + '"width="100%"><tr><td align="center"><a href="javascript:void(0);"' + isPauseContent + '  onMouseUp="javascript:goURL();"><font face="verdana,arial,helvetica" size="-1" color="#' +  joinColor(qiksearch_fade_desat(colorVal)) + '"><b>' + qiksearch_ticker_text[div_count] +  '</b></font></a></td></tr></table>');
      qiksearch_tickerObj.document.close();
     }
     if((colorVal>0)  && (colorVal!=0))
     {
      colorVal--;
     }
     else
     {
      colorVal=15;
      if(div_count<qiksearch_ticker_text.length)
      {
       div_count++;
      }
      if(div_count==qiksearch_ticker_text.length)
      {
       setTimeout("resetAll()",timeOutVal);
       setTimeout("writeDiv()",timeOutVal);
      }
     }
    
     if(div_count<qiksearch_ticker_text.length)
     {
      setTimeout("writeDiv()",timeOutVal);
     }
    }
    
    // Generating Final Hex Color
    function joinColor(getColor)
    {
     return (getColor + '0' + getColor + '0' + getColor + '0');
    }
    
    // Reset
    function resetAll()
    {
     div_count=0;
     colorVal=15;
    }
    
    // URL Navigation function
    function goURL()
    {
     if(qiksearch_ticker_target[div_count]=="0")
     {
      location.href=qiksearch_ticker_URL[div_count];
     }
     else
     {
      if(qiksearch_ticker_target[div_count]=="1")
      {
       window.open(qiksearch_ticker_URL[div_count]);
      }
     }
    }
    
    // Setting Delay on MouseOver and MouseOut
    var temp_timeOutVal=timeOutVal;
    function delay_timeOutVal()
    {
     timeOutVal=100000000000000;
     setTimeout("writeDiv()",timeOutVal);
    }
    
    function resume_timeOutVal()
    {
     timeOutVal=temp_timeOutVal;
     setTimeout("writeDiv()",timeOutVal);
    }
    
    setTickerObj(); 
    window.onload=writeDiv;
    
    if(ns4)
    {
     document.write('<layer id="qiksearch_ticker_ns4" width="' + qiksearch_ticker_width + '" left="' + ticker_left_ns4 + '"></layer>');
    }
    </script>
    <!--END FADING TICKER JAVASCRIPT-->

  • #2
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    question

    I'm trying to set the background color for my javascript ticker to the same color as my page, and I keep getting a white box around it. Where do I add the color code?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •