SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Nov 2001
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JavaScript Scroller

    Hi all!

    I have this script that I have been editing to fit into a page design but there are a couple of things that I can't work out and hope that someone here might be able to.

    The first thing is this. When the page loads for the first time or after refresh the text within the scroller is black for a brief time and then it turns to white. I have tried changing the values but can't get it to start with white text?

    The other thing is I would like to be able to have a hypertext link within the text but I tried using the normal <a href> tags but this doesn't work. Can you see a way of doing this?

    Here is the script.

    <script language="JavaScript1.2">

    var delay=3600 //set delay between message change (in miliseconds)
    var fcontent=new Array()
    begintag='<font face="arial" size=2>' //set opening tag, such as font declarations
    fcontent[0]="<b>Todays Hot News!</b><br>All todays hot news would go in this first screen this would stay on screen long enought to read."
    fcontent[1]="This next portion of text could be more hot news or it could be special offers, or maybe the joke of the day."
    fcontent[2]="Ok, enough with these pointless messages. I'm sure you get the idea behind this script."
    closetag='</font>'

    var fwidth=200 //set scroller width
    var fheight=35 //set scroller height

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

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

    if (DOM2)
    faderdelay=3600

    //function to change content
    function changecontent(){
    if (index>=fcontent.length)
    index=0
    if (DOM2){
    document.getElementById("fscroller").style.color="rgb(255,255,255)"
    document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag
    colorfade()
    }
    else if (ie4)
    document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag
    else if (ns4){
    document.fscrollerns.document.fscrollerns_sub.document.write(begintag+fcontent[index]+closetag)
    document.fscrollerns.document.fscrollerns_sub.document.close()
    }

    index++
    setTimeout("changecontent()",delay+faderdelay)
    }

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

    frame=20;
    hex=0 // Initial color value.

    function colorfade() {
    // 20 frames fading process
    if(frame>0) {
    hex-=0; // increase color value
    document.getElementById("fscroller").style.color="rgb("+hex+","+hex+","+hex+")"; // Set color value.
    frame--;
    setTimeout("colorfade()",0);
    }
    else{
    document.getElementById("fscroller").style.color="rgb(255,255,255)";
    frame=20;
    hex=255
    }
    }

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

    window.onload=changecontent
    </script>
    <ilayer id="fscrollerns" width=12 height=10 left="10" top="15">
    <layer id="fscrollerns_sub" width=&{fwidth}; height=&{fheight}; left=0 top=0></layer>
    </ilayer>

    It all goes between the <body> tags but I have put it within another layer <div> as I can then position it where I want.

    Hope someone can help
    bfn
    Silent Troopa

  2. #2
    We like music. weirdbeardmt's Avatar
    Join Date
    May 2001
    Location
    Channel Islands Girth: Footlong
    Posts
    5,882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not quite what you are asking, but I have seen a working version of the script you are after..

    It is from www.dynamicdrive.com and can be seen in action at www.thedomainpros.com

    Code:
    <script language="JavaScript1.2">
    
    /*
    Cross browser marquee script- 
     Dynamic Drive (www.dynamicdrive.com)
    For full source code, installation instructions,
    100's more DHTML scripts, and Terms Of
    Use, visit dynamicdrive.com
    */
    
    
    //Specify the marquee's width (in pixels)
    var marqueewidth=740
    //Specify the marquee's height (in pixels, pertains only to NS)
    var marqueeheight=20
    //Specify the marquee's scroll speed (larger is faster)
    var speed=4
    //Specify the marquee contents
    var marqueecontents='contents goes in here'
    
    if (document.all)
    document.write('<marquee scrollAmount='+speed+' style="width:'+marqueewidth+'">'+marqueecontents+'</marquee>')
    
    function regenerate(){
    window.location.reload()
    }
    function regenerate2(){
    if (document.layers){
    setTimeout("window.onresize=regenerate",450)
    intializemarquee()
    }
    }
    
    function intializemarquee(){
    document.cmarquee01.document.cmarquee02.document.write('<nobr>'+marqueecontents+'</nobr>')
    document.cmarquee01.document.cmarquee02.document.close()
    thelength=document.cmarquee01.document.cmarquee02.document.width
    scrollit()
    }
    
    function scrollit(){
    if (document.cmarquee01.document.cmarquee02.left>=thelength*(-1)){
    document.cmarquee01.document.cmarquee02.left-=speed
    setTimeout("scrollit()",100)
    }
    else{
    document.cmarquee01.document.cmarquee02.left=marqueewidth
    scrollit()
    }
    }
    
    window.onload=regenerate2
    </script>
    
    
    <ilayer width=&{marqueewidth}; height=&{marqueeheight}; name="cmarquee01">
    <layer name="cmarquee02"></layer>
    </ilayer>
    You change the code and can use <font> tags and <a href> in it. It is a bit clumsy and you will need to keep editing it to add new content, but it works.

    And there should be a work around to populate it from a DB if that is what you wanted.

    Hope that helps
    I swear to drunk I'm not God.
    Matt's debating is not a crime
    Hint: Don't buy a stupid dwarf Clicky

  3. #3
    SitePoint Member
    Join Date
    Nov 2001
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fading Scroller

    Hi weirdbeardmt and thanks for your input. The script that is on thedomainpros.com site is completely different as it is a left to right scroller and the one that I am using is a fade in fade out script.

    Is there a generic code line for hypertext links within JavaScript like in HTML?

    Silent Troopa
    "Working all night, working all day, when all the works done it's time play"

  4. #4
    We like music. weirdbeardmt's Avatar
    Join Date
    May 2001
    Location
    Channel Islands Girth: Footlong
    Posts
    5,882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, I know the problems with the href tags. This works:

    Code:
    fcontent[2]="<A HREF='something.html'>Ok, enough with these pointless messages. I'm sure you get the idea 
    
    behind this script</A>."
    Notice the use of ' and not " in the href tags.

    But I tried it, and it wasn't fading as you suggest it should...? Is it Netscape only? [i am using IE6]

    I swear to drunk I'm not God.
    Matt's debating is not a crime
    Hint: Don't buy a stupid dwarf Clicky

  5. #5
    SitePoint Member
    Join Date
    Nov 2001
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks weirdbeardmt that href tag works fine I am testing this in IE5.5 it will be run on IE5 only once completed as the page is part of an intranet only.

    The black text is now that important as it is only on the screen for a few seconds when the page first loads, but if anyone does work out what part I need to change please do let me know.

    Thanks again
    Silent Troopa

  6. #6
    We like music. weirdbeardmt's Avatar
    Join Date
    May 2001
    Location
    Channel Islands Girth: Footlong
    Posts
    5,882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK i added color=#ffffff to the inital font tag and that made it start off as white.

    However I don't know if this will kill the fading effect seeing as how it isn't working on IE6...
    Code:
    begintag='<font face=arial size=2 color=#ffffff>'
    I swear to drunk I'm not God.
    Matt's debating is not a crime
    Hint: Don't buy a stupid dwarf Clicky

  7. #7
    SitePoint Member
    Join Date
    Nov 2001
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks weirdbeardmt that does the job

    I lost the fade but that's not a problem, the text transitions are enough for this.

    Thanks again
    Silent Troopa


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
  •