Results 1 to 7 of 7

Thread: linking div to js

  1. #1
    Join Date
    Nov 2005
    Posts
    132
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default linking div to js

    Yes, I'm brand new to js...

    I want to understand how I assign a div to link to an externally hosted js file.

    I have successfully added the external link to the head but am unsure as to where i assign the class or id to a div that links to the specific js file.

    Could someone quickly show me what syntax to use. I have named the js file as "latestnews_fader.js".


    My js is...

    <script type="text/javascript">

    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 12px Arial; padding: 5px;">'; //set opening tag, such as font declarations
    fcontent[0]="<b>What\'s new?</b><br>purus, mollis at condimentum nec, cursus id eros. Phasellus ut sapien lectus. Nunc sit amet tellus est. Praesent vel dui eros, in rhoncus nibh. Etiam gravida, velit at posuere commodo, lacus justo cursus erat, nec fringilla lorem felis a ligula. Praesent nunc quam, suscipit a aliquam et, ornare et risus. Donec rhoncus, sapien vitae interdum luctus, erat odio congue tellus, vitae aliquet nisi odio sit amet augue. Morbi mollis porta tincidunt. Cras at urna ac ligula fringilla rhoncus<a href='link.htm'>More Info - Click here</a>";
    fcontent[1]="<b>What\'s new?</b><br>text here</a>";
    fcontent[2]="<b>What\'s new?</b><br>Click here</a>";
    closetag='</div>';

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

    var fadelinks=0; //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++
    }



    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>

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,963
    Thanks
    16
    Thanked 305 Times in 304 Posts
    Blog Entries
    11

    Default

    Firstly, you must keep reference to Dynamic Drive in the js otherwise you're in violation of usage terms. In case you aquired the code from another site, here's the script page here on DD: http://www.dynamicdrive.com/dynamici...fadescroll.htm

    The usage instructions on the page might also help clear things up for you - in this case you dont need to add the external js link to the head section (that might be where you're getting tangled), you just need to add it into the body where you want the scroller to appear:

    <script type="text/javascript" src="path/to/js/script.js"></script>
    Usually, if a div is referenced in an external js file, you can alter the css/contents directly in the external js file OR in the case of CSS, the div in the external js file might use a class/id that is referenced in an external CSS file and you can alter styling there.

    I hope that helps
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Nov 2005
    Posts
    132
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thanks,

    the code was more of an example really..

    I want to learn the exact code to link the div to js.

    what code do i need to put in the js to make the link to the div? assuming i use an div id of latestnews_fader.js

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,963
    Thanks
    16
    Thanked 305 Times in 304 Posts
    Blog Entries
    11

    Default

    I think you're referring to "getElementByID" ?
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  5. #5
    Join Date
    Nov 2005
    Posts
    132
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    yes that sounds like the one!

    How do i assign the id name to the js and what is the correct way to reference it from the html?

  6. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,963
    Thanks
    16
    Thanked 305 Times in 304 Posts
    Blog Entries
    11

    Default

    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  7. The Following User Says Thank You to Beverleyh For This Useful Post:

    neilkw (02-28-2011)

  8. #7
    Join Date
    Nov 2005
    Posts
    132
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    beautiful woman xx

    thanks

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
  •