4

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!

2
  • To execute a specific function you need to call it from an element (for example onClickof an <a ...> tag. In your case only the part that is not inside a function gets executed and only, when the script itself is loaded. Commented Nov 4, 2013 at 14:10
  • I understand. So how can make it work more than one time? Commented Nov 4, 2013 at 14:18

2 Answers 2

3

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.

Sign up to request clarification or add additional context in comments.

Comments

2

If you are learning javascript, you should learn what all these functions do exactly.

This script does definitely use SOME identifier twice. So possible cases are: function names, var names and html dom ids.

You should definitely check out how this thing works and do it yourself, if you want to learn javascript. Additionally this is some pretty bad code. You should never define content of a site in a javascript file

To give you a little jumpstart:

lefttime = setInterval("scrollmarquee()", 20)

This line sets a timer. scrollmarquee() is called in 20 ms.

memoryscroller.style.left = someVar

This line sets the css style left. Which is the position of the memory scroller. You kind of increment this position to achieve a scroll effect.

Here some mindset you need to accomplish what you are trying to do: You call scrollmarquee one time at the beginning. Then you increment the position of your scrolling element. Then you call the "setInterval" method again with scrollmarquee. So scrollmarquee calls itself every 20 ms.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.