Script works in jsfiddle but not HTML document

Question

I have a script in jsfiddle that works: https://jsfiddle.net/oxw4e5yh/

However in HTML doc it is not working:

<!DOCTYPE html>
<html lang="en">

<head>
    <script type="text/javascript">
        function calcSpeed(speed) {
            // Time = Distance/Speed
            var spanSelector = document.querySelectorAll('.marquee span'),
                i;
            for (i = 0; i < spanSelector.length; i++) {
                var spanLength = spanSelector[i].offsetWidth,
                    timeTaken = spanLength / speed;
                spanSelector[i].style.animationDuration = timeTaken + "s";
            }
        }
        calcSpeed(75);
    </script>


    <style>
        /* Make it a marquee */

        .marquee {
            width: 100%;
            left: 0px;
            height: 10%;
            position: fixed;
            margin: 0 auto;
            white-space: nowrap;
            overflow: hidden;
            background-color: #000000;
            bottom: 0px;
            color: white;
            font: 50px'Verdana';
        }
        .marquee span {
            display: inline-block;
            padding-left: 100%;
            text-indent: 0;
            animation: marquee linear infinite;
            animation-delay: 5s;
            background-color: #000000;
            color: white;
            bottom: 0px;
        }
        /* Make it move */

        @keyframes marquee {
            0% {
                transform: translate(10%, 0);
            }
            100% {
                transform: translate(-100%, 0);
            }
        }
        /* Make it pretty */

        .scroll {
            padding-left: 1.5em;
            position: fixed;
            font: 50px'Verdana';
            bottom: 0px;
            color: white;
            left: 0px;
            height: 10%;
        }
    </style>
</head>

<body>
    <div class="marquee">
        <span>Lots of text, written in a long sentance to make it go off the screen.    Well I hope it goes off the screen</span>
    </div>

</body>

</html>

The script is a css and javascript marquee to control a steady speed for the scrolling text.

Any idea what I am missing?

Also, as you can see on the fiddle, it takes a while for the text to start scrolling. Can I reduce the delay?

Can you be a bit more specific about what isn't working when you try to use it outside of jsfiddle? Does the console give you any messages when you try to run it? — JoeL
– JoeL, Commented Jun 30, 2016 at 14:50
Chances are that your JavaScript is running before the document is ready — phuzi
– phuzi, Commented Jun 30, 2016 at 14:50
Your Fiddle is broken when I use it. Unless a big black solid box is what you're expecting — 8protons
– 8protons, Commented Jun 30, 2016 at 14:50
it cannot work because your script is executed when the DOM isn't yet ready, hence it is trying to access elements that does not (yet) exists. Wrap your function in the onload event to solve the issue, or move your script to the bottom of your body, despite the best practice is definetly to wrap around onload. — briosheje
– briosheje, Commented Jun 30, 2016 at 14:57

leo.fcx · Accepted Answer · 2016-06-30 14:50:31Z

3

Call your JS function once all the DOM is ready, usually this is being done by using window.onload as follows:

window.onload = function() {
    calcSpeed(75);
}

answered Jun 30, 2016 at 14:50

leo.fcx

6,4972 gold badges23 silver badges37 bronze badges

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

Comments

Musa · Accepted Answer · 2016-06-30 14:50:09Z

1

You are trying to select an element that has not been created yet.

Move your script to below the marquee

<div class="marquee">
<span>Lots of text, written in a long sentance to make it go off the screen.    Well I hope it goes off the screen</span>
</div>
<script type="text/javascript">
function calcSpeed(speed) {
// Time = Distance/Speed
var spanSelector = document.querySelectorAll('.marquee span'),
i;
for (i = 0; i < spanSelector.length; i++) {
var spanLength = spanSelector[i].offsetWidth,
  timeTaken = spanLength / speed;
spanSelector[i].style.animationDuration = timeTaken + "s";
}
}
calcSpeed(75);

</script>

answered Jun 30, 2016 at 14:50

Musa

97.9k17 gold badges123 silver badges144 bronze badges

2 Comments

Wienievra Over a year ago

Also, as you can see on the fiddle, it takes a while for the text to start scrolling. Can I reduce the delay?

Scotow Over a year ago

@Wienievra You have set the delay to 5s. (animation-delay: 5s;). Change the delay to something lower to start the scroll faster.

mr. · Accepted Answer · 2016-06-30 14:54:05Z

put your script and style codes before the closing of body.

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
<div class="marquee">
<span>Lots of text, written in a long sentance to make it go off the screen.    Well I hope it goes off the screen</span>
</div>
<script>
function calcSpeed(speed) {
// Time = Distance/Speed
var spanSelector = document.querySelectorAll('.marquee span'),
i;
for (i = 0; i < spanSelector.length; i++) {
var spanLength = spanSelector[i].offsetWidth,
  timeTaken = spanLength / speed;
spanSelector[i].style.animationDuration = timeTaken + "s";
}
}
calcSpeed(75);

</script> 


<style>
/* Make it a marquee */

.marquee {
width: 100%;
left: 0px;
height: 10%;
position: fixed;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
background-color: #000000;
bottom: 0px;
color: white;
font: 50px'Verdana';
}
.marquee span {
display: inline-block;
padding-left: 100%;
text-indent: 0;
animation: marquee linear infinite;
animation-delay: 5s;
background-color: #000000;
color: white;
bottom: 0px;
}
/* Make it move */

@keyframes marquee {
0% {
transform: translate(10%, 0);
}
100% {
transform: translate(-100%, 0);
}
}
/* Make it pretty */

.scroll {
padding-left: 1.5em;
position: fixed;
font: 50px'Verdana';
bottom: 0px;
color: white;
left: 0px;
height: 10%;
}</style>
</body>

</html>

this works on me

Community · Accepted Answer · 2017-05-23 12:33:29Z

0

You should write all script in last of page because script will trying to find tag id's and DOM is not ready that time than give error.

Sample

<html>
    <head>
        <style>
            /* your style here */
        </style>
    </head>
    <body>
        <!-- your html here -->
        <script>
            // your script here
        </script>
    </body>
</html>

Please read JavaScript and CSS order

edited May 23, 2017 at 12:33

CommunityBot

11 silver badge

answered Jun 30, 2016 at 15:00

A.K.

2,3523 gold badges30 silver badges37 bronze badges

Comments

Israel Meshileya · Accepted Answer · 2016-07-12 15:13:35Z

0

See this

function calcSpeed() {
  // Time = Distance/Speed
  var spanSelector = document.querySelectorAll('.marquee span'),
    i;
  for (i = 0; i < spanSelector.length; i++) {
    var spanLength = spanSelector[i].offsetWidth,
      timeTaken = spanLength / 1000;
    spanSelector[i].style.animationDuration = timeTaken + "s";
  }
//calcSpeed(10);
}
</script>



<body onload="calcSpeed()">

I tested it on Chrome and Firefox...works perfectly. So, I presume it should work for you too.

edited Jul 12, 2016 at 15:13

answered Jun 30, 2016 at 15:10

Israel Meshileya

2936 silver badges18 bronze badges

Collectives™ on Stack Overflow

Script works in jsfiddle but not HTML document

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related