The script functions perfectly in jsfiddle, yet encounters issues when used in an HTML

Question

The script functions perfectly in jsfiddle, yet encounters issues when used in an HTML

I stumbled upon a seemingly peculiar issue with my script in jsfiddle: https://jsfiddle.net/oxw4e5yh/

Interestingly, the same script does not seem to work when embedded in an HTML document:

<!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>
        /* Making 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;
        }
        /* Adding movement */

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

        .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 sentence to make it go off the screen. Well, I hope it goes off the screen.</span>
    </div>

</body>

</html>

This particular script involves CSS and JavaScript implementation for controlling a steady scrolling speed of the text.

Is there anything specific that I might be overlooking?

Moreover, as observed on the provided fiddle link, there seems to be a noticeable delay before the text starts to scroll. Is there any way to minimize this delay?

javascript jquery html css

Answer 1

Answer №1

It is advisable to call your JavaScript function after the entire DOM has finished loading. One common way to achieve this is by utilizing window.onload like so:

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

Answer 2

It is advisable to call your JavaScript function after the entire DOM has finished loading. One common way to achieve this is by utilizing window.onload like so:

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

Answer 3

Answer №2

If you try to choose an element that hasn't been generated yet,

Make sure to place your script below the marquee code:

<div class="marquee">
<span>This is a long sentence created to go beyond the screen's edge. I really 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>

Answer 4

If you try to choose an element that hasn't been generated yet,

Make sure to place your script below the marquee code:

<div class="marquee">
<span>This is a long sentence created to go beyond the screen's edge. I really 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>

Answer 5

Answer №3

Ensure to place your script and style codes before the closing of the body tag.

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

</head>
<body>
<div class="marquee">
<span>A plethora of text, woven into a lengthy sentence to extend beyond the boundary of the screen. Hopefully, it extends off-screen as intended.</span>
</div>
<script>
function adjustSpeed(speed) {
// Time = Distance/Speed
var spanSelection = document.querySelectorAll('.marquee span'),
i;
for (i = 0; i < spanSelection.length; i++) {
var spanWidth = spanSelection[i].offsetWidth,
  timeElapsed = spanWidth / speed;
spanSelection[i].style.animationDuration = timeElapsed + "s";
}
}
adjustSpeed(75);

</script> 


<style>
/* Transforming it into 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;
}
/* Setting the motion */

@keyframes marquee {
0% {
transform: translate(10%, 0);
}
100% {
transform: translate(-100%, 0);
}
}
/* Adding aesthetic appeal */

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

</html>

This method proved effective for me!

Answer 6

Ensure to place your script and style codes before the closing of the body tag.

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

</head>
<body>
<div class="marquee">
<span>A plethora of text, woven into a lengthy sentence to extend beyond the boundary of the screen. Hopefully, it extends off-screen as intended.</span>
</div>
<script>
function adjustSpeed(speed) {
// Time = Distance/Speed
var spanSelection = document.querySelectorAll('.marquee span'),
i;
for (i = 0; i < spanSelection.length; i++) {
var spanWidth = spanSelection[i].offsetWidth,
  timeElapsed = spanWidth / speed;
spanSelection[i].style.animationDuration = timeElapsed + "s";
}
}
adjustSpeed(75);

</script> 


<style>
/* Transforming it into 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;
}
/* Setting the motion */

@keyframes marquee {
0% {
transform: translate(10%, 0);
}
100% {
transform: translate(-100%, 0);
}
}
/* Adding aesthetic appeal */

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

</html>

This method proved effective for me!

Answer 7

Answer №4

For optimal performance, it is recommended to place all scripts at the end of your page. This allows the script to find tag ids without encountering errors due to the DOM not being ready.

Example


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

For more information, please refer to JavaScript and CSS order

Answer 8

For optimal performance, it is recommended to place all scripts at the end of your page. This allows the script to find tag ids without encountering errors due to the DOM not being ready.

Example


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

For more information, please refer to JavaScript and CSS order

Answer 9

Answer №5

Take a look at this:


function adjustAnimationSpeed() {
  // Formula: Time = Distance/Speed
  var spanElements = document.querySelectorAll('.marquee span'),
    i;
  for (i = 0; i < spanElements.length; i++) {
    var textLength = spanElements[i].offsetWidth,
      timeRequired = textLength / 1000;
    spanElements[i].style.animationDuration = timeRequired + "s";
  }
//adjustAnimationSpeed(10);
}
</script>

<body onload="adjustAnimationSpeed()">

I've personally tested this code on both Chrome and Firefox, and it works flawlessly. Give it a try and let me know how it goes for you.

Answer 10

Take a look at this:


function adjustAnimationSpeed() {
  // Formula: Time = Distance/Speed
  var spanElements = document.querySelectorAll('.marquee span'),
    i;
  for (i = 0; i < spanElements.length; i++) {
    var textLength = spanElements[i].offsetWidth,
      timeRequired = textLength / 1000;
    spanElements[i].style.animationDuration = timeRequired + "s";
  }
//adjustAnimationSpeed(10);
}
</script>

<body onload="adjustAnimationSpeed()">

I've personally tested this code on both Chrome and Firefox, and it works flawlessly. Give it a try and let me know how it goes for you.

The script functions perfectly in jsfiddle, yet encounters issues when used in an HTML

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

JavaScript: Creating a new entry in a key-value paired array

The prefixes for Ruby on Rails routes are not properly preprocessed in the .erb.js file

What is the best way to conceal an element in a loop using React?

Tips for ensuring smaller columns have the same height as their siblings

Guide to using the ng-click function in Angular to set focus on the input in the last row of a table

Scroll through the div to quickly find the relevant content

Ways to switch the visibility of a specific thumbnail

Error-free ngClick doesn't trigger AngularJS controller method

Having trouble sending a function as a prop to a child component in React

What is the process for activating an event before another event on the same element with vanilla JavaScript?

Creating PHP functions that return a JSON string when invoked - a simple guide

Convert data into a tree view in JavaScript, with two levels of nesting and the lowest level represented as an array

How to avoid property sharing in Angular recursive components

The information overflow occurs outside the tooltip specifically in Chrome, while functioning perfectly in IE11

iOS creates dynamic images with artifacts that appear on a generated and animated canvas

Scrolling back to the top of the page using Jquery instead of a specific div

Implementing a gradient effect on a specific image element within an HTML canvas with the help of jQuery

The dividers flicker in and out of view

Ways to apply CSS styles dynamically within a v-for loop

Navigating through paginated data can be made easier by using Backbone.PageableCollection in conjunction with a personalized