Results 1 to 4 of 4

Thread: Script: Fading Scroller http://www.dynamicdrive.com/dynamicindex2/fadescroll.htm

  1. #1
    Join Date
    Jul 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Script: Fading Scroller http://www.dynamicdrive.com/dynamicindex2/fadescroll.htm

    Script: Fading Scroller
    http://www.dynamicdrive.com/dynamici...fadescroll.htm

    Want to modify script to positon scroller - center in page would be good.
    Last edited by Bullskinner; 07-01-2005 at 08:32 PM. Reason: improper wording

  2. #2
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    In all the <div> tags, add "margin-left:auto;margin-right:auto;" to the style.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  3. #3
    Join Date
    Jul 2005
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Just surround the JavaScript with center tags like:



    <center>
    <script type="text/javascript">

    /***********************************************
    * Fading Scroller- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/

    var delay = 2000; //set delay between message change (in miliseconds)
    var maxsteps=30; // number of steps to take to change from start color to endcolor
    var stepdelay=40; // time in miliseconds of a single step
    //**Note: maxsteps*stepdelay will be total time in miliseconds of fading effect
    var startcolor= new Array(255,255,255); // start color (red, green, blue)
    var endcolor=new Array(0,0,0); // end color (red, green, blue)

    var fcontent=new Array();
    begintag='<div style="font: normal 14px Arial; padding: 5px;">'; //set opening tag, such as font declarations
    fcontent[0]="<b>What\'s new?</b><br>New scripts added to the Scroller category!<br><br>The MoreZone has been updated. <a href='../morezone/index.htm'>Click here to visit</a>";
    fcontent[1]="Dynamic Drive has been featured on Jars as a top 5% resource, and About.com as a recommended DHTML destination.";
    fcontent[2]="Ok, enough with these pointless messages. You get the idea behind this script.</a>";
    closetag='</div>';

    var fwidth='150px'; //set scroller width
    var fheight='150px'; //set scroller height

    var fadelinks=1; //should links inside scroller content also fade like text? 0 for no, 1 for yes.

    ///No need to edit below this line/////////////////


    var ie4=document.all&&!document.getElementById;
    var DOM2=document.getElementById;
    var faderdelay=0;
    var index=0;


    /*Rafael Raposo edited function*/
    //function to change content
    function changecontent(){
    if (index>=fcontent.length)
    index=0
    if (DOM2){
    document.getElementById("fscroller").style.color="rgb("+startcolor[0]+", "+startcolor[1]+", "+startcolor[2]+")"
    document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag
    if (fadelinks)
    linkcolorchange(1);
    colorfade(1, 15);
    }
    else if (ie4)
    document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag;
    index++
    }

    // colorfade() partially by Marcio Galli for Netscape Communications. ////////////
    // Modified by Dynamicdrive.com

    function linkcolorchange(step){
    var obj=document.getElementById("fscroller").getElementsByTagName("A");
    if (obj.length>0){
    for (i=0;i<obj.length;i++)
    obj[i].style.color=getstepcolor(step);
    }
    }

    /*Rafael Raposo edited function*/
    var fadecounter;
    function colorfade(step) {
    if(step<=maxsteps) {
    document.getElementById("fscroller").style.color=getstepcolor(step);
    if (fadelinks)
    linkcolorchange(step);
    step++;
    fadecounter=setTimeout("colorfade("+step+")",stepdelay);
    }else{
    clearTimeout(fadecounter);
    document.getElementById("fscroller").style.color="rgb("+endcolor[0]+", "+endcolor[1]+", "+endcolor[2]+")";
    setTimeout("changecontent()", delay);

    }
    }

    /*Rafael Raposo's new function*/
    function getstepcolor(step) {
    var diff
    var newcolor=new Array(3);
    for(var i=0;i<3;i++) {
    diff = (startcolor[i]-endcolor[i]);
    if(diff > 0) {
    newcolor[i] = startcolor[i]-(Math.round((diff/maxsteps))*step);
    } else {
    newcolor[i] = startcolor[i]+(Math.round((Math.abs(diff)/maxsteps))*step);
    }
    }
    return ("rgb(" + newcolor[0] + ", " + newcolor[1] + ", " + newcolor[2] + ")");
    }

    if (ie4||DOM2)
    document.write('<div id="fscroller" style="border:1px solid black;width:'+fwidth+';height:'+fheight+'"></div>');

    if (window.addEventListener)
    window.addEventListener("load", changecontent, false)
    else if (window.attachEvent)
    window.attachEvent("onload", changecontent)
    else if (document.getElementById)
    window.onload=changecontent

    </script>
    </center>

  4. #4
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    <center> is deprecated.
    While s/he might not care about this, things get deprecated for a reason, usually because they're unnecessary and less efficient than other methods.
    In this case, adding a couple of statements to the div style is more efficient than adding a whole new element.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

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
  •