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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    1
    Thanks
    1
    Thanked 0 Times in 0 Posts

    need help with javascript scroller background

    Hi,
    I have some script I am trying to modify and would like to add an image to the background. It's a simple scroller and I just want to add a background image. I removed the style for the border in these lines of code:

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

    I'm not sure if I can add it above or add a var to the code I received.

    Below is the full code I received.

    Thanks for any help!

    PHP Code:
    <script type="text/javascript">
     
     
    /***********************************************
    * Fading Scroller- © Dynamic Drive DHTML code library ([url]www.dynamicdrive.com[/url])
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at [url]http://www.dynamicdrive.com/[/url] 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='200px'//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[inde x]+closetag
        
    if (fadelinks)
          
    linkcolorchange(1);
        
    colorfade(115);
      }
      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="width:'+fwidth+';height:'+fheight+'"></div>');
     
     
     
     
    if (
    window.addEventListener)
    window.addEventListener("load"changecontentfalse)
    else if (
    window.attachEvent)
    window.attachEvent("onload"changecontent)
    else if (
    document.getElementById)
    window.onload=changecontent
     
     
    </script>
     
    Last edited by VIPStephan; 11-01-2012 at 01:59 AM. Reason: added code BB tags

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,621
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    In future, if you post any code please put it in between [CODE][/CODE] tags. It makes scanning your posts much easier. You can do this by clicking the small ‘#’ icon above the reply field.

  • Users who have thanked VIPStephan for this post:

    cssmonster (11-01-2012)

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,501
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
      document.write('<div id="fscroller" style="border:1px solid black;width:'+fwidth+';height:'+fheight+';background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/One.gif);"></div>');
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,603
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Don't use document.write - it ceased to serve any purpose when Netscape 4 died - since then beginners have been able to use innerHTML which has far fewer problems.

    Also there's not much point in testing for IE4 when even IE6 is now dead.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your 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
    •