javascripthtml

Running two scripts (JavaScript) on HTML


I'm learning JavaScript and I found online a free script for scrolling text. My goal is to use it multiple times on one page but I can't use it more then once and make it work, I hope you can help. This is the HTML:

<head>
    <meta charset="utf-8" />
    <title>Scrollers</title>
</head>
<body style="background-color:#3c3c3c">
    <br />
    <script type="text/javascript" src="d:(...)\my documents\visual studio 2013\Projects\scrolling text\scroller 1.js"></script>
    <br />
    <script type="text/javascript" src="d:(...)\my documents\visual studio 2013\Projects\scrolling text\scroller 2.js"></script>
</body>

My JavaScript:

var memorywidth = "1850px" //scroller width
var memoryheight = "140px" //scroller height
var memorybgcolor = "#000000" //scroller background
var memorypadding = "5px" //padding applied to the scroller. 0 for non.
var borderCSS = "border: 1px solid black;" //Border CSS, applied to scroller to give border.

var memoryspeed = 5 //Scroller speed (larger is faster 1-10)
var pauseit = 1 //Pause scroller onMousever (0=no. 1=yes)?

var persistlastviewedmsg = 1 //should scroller's position persist after users navigate away (1=yes, 0=no)?
var persistmsgbehavior = "onload" //set to "onload" or "onclick".

//Specify the scroller's content (don't delete <nobr> tag)
//Keep all content on ONE line, and backslash any single quotations (ie: that\'s great):

var memorycontent = '<span style="color: #FFFFFF; font-family: Consolas; font-size:120px"><strong style="color:#B54646">04-11-2013</strong> - \
            FTs de alta dentro do SLA: 89% <img src="http://imageshack.com/a/img18/9017/uz2b.png" height="100" width="70">;\
            FTs de alta fora do SLA: 12% <img src="http://imageshack.com/a/img18/9017/uz2b.png" height="100" width="70">;\
            FTs de alta em TNE: 92% <img src="http://imageshack.com/a/img585/9553/1sgm.png" height="100" width="70">;\
            FTs de alta em TNO: 99% <img src="http://imageshack.com/a/img18/9017/uz2b.png" height="100" width="70">;\
            FTs de alta em TCO: 73% <img src="http://imageshack.com/a/img585/9553/1sgm.png" height="100" width="70">;\
            </span>'


////NO NEED TO EDIT BELOW THIS LINE////////////
var combinedcssTable = "width:" + (parseInt(memorywidth) + 6) + "px;background-color:" + memorybgcolor + ";padding:" + memorypadding + ";" + borderCSS + ";"
var combinedcss = "width:" + memorywidth + ";height:" + memoryheight + ";"

var divonclick = (persistlastviewedmsg && persistmsgbehavior == "onclick") ? 'onClick="savelastmsg()" ' : ''
memoryspeed = (document.all) ? memoryspeed : Math.max(1, memoryspeed - 1) //slow speed down by 1 for NS
var copyspeed = memoryspeed
var pausespeed = (pauseit == 0) ? copyspeed : 0
var iedom = document.all || document.getElementById
if (iedom)
    document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-10000px">' + memorycontent + '</span>')
var actualwidth = ''
var memoryscroller

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

function populatescroller() {
    memoryscroller = document.getElementById ? document.getElementById("memoryscroller") : document.all.memoryscroller
    memoryscroller.style.left = parseInt(memorywidth) + 8 + "px"
    if (persistlastviewedmsg && get_cookie("lastscrollerpos") != "")
        revivelastmsg()
    memoryscroller.innerHTML = memorycontent
    actualwidth = document.all ? temp.offsetWidth : document.getElementById("temp").offsetWidth
    lefttime = setInterval("scrollmarquee()", 20)
}

function get_cookie(Name) {
    var search = Name + "="
    var returnvalue = ""
    if (document.cookie.length > 0) {
        offset = document.cookie.indexOf(search)
        if (offset != -1) {
            offset += search.length
            end = document.cookie.indexOf(";", offset)
            if (end == -1)
                end = document.cookie.length;
            returnvalue = unescape(document.cookie.substring(offset, end))
        }
    }
    return returnvalue;
}

function savelastmsg() {
    document.cookie = "lastscrollerpos=" + memoryscroller.style.left
}

function revivelastmsg() {
    lastscrollerpos = parseInt(get_cookie("lastscrollerpos"))
    memoryscroller.style.left = parseInt(lastscrollerpos) + "px"
}

if (persistlastviewedmsg && persistmsgbehavior == "onload")
    window.onunload = savelastmsg

function scrollmarquee() {
    if (parseInt(memoryscroller.style.left) > (actualwidth * (-1) + 8))
        memoryscroller.style.left = parseInt(memoryscroller.style.left) - copyspeed + "px"
    else
        memoryscroller.style.left = parseInt(memorywidth) + 8 + "px"
}

if (iedom) {
    with (document) {
        document.write('<table border="0" cellspacing="0" cellpadding="0" style="' + combinedcssTable + '"><td>')
        write('<div style="position:relative;overflow:hidden;' + combinedcss + '" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=memoryspeed">')
        write('<div id="memoryscroller" style="position:absolute;left:0px;top:0px;" ' + divonclick + '></div>')
        write('</div>')
        document.write('</td></table>')
    }
}

So I tried changing the variables and all but nothing works. I hope you can help!


Solution

  • You should not include a script call twice, Even if you want to run the scroller twice or may be multiple times you should only call the script once. Post this, whenever you want to use the scroller you should just call the method using an event. You should bind an event with the method call like onSubmit/ onblur etc.