CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Wienievra
Wienievra

Reputation: 41

Script works in jsfiddle but not HTML document

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?

Upvotes: 1

Views: 122

Answers (5)

Israel Meshileya
Israel Meshileya

Reputation: 293

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.

Upvotes: 0

A.K.
A.K.

Reputation: 2322

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

Upvotes: 0

mr.
mr.

Reputation: 679

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

Upvotes: 0

leo.fcx
leo.fcx

Reputation: 6467

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);
}

Upvotes: 3

Musa
Musa

Reputation: 97672

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>

Upvotes: 1

Related Questions