JQuery/JS script not running in html (works in Codepen)

Question

I'm trying to make a decoding effect and I have found useful stack overflow questions to help with that but I am facing a weird problem. I have an example that I got from a stack overflow link(answer by Flambino) and it works perfectly fine. However, when I put it in my html files and test it locally, it doesn't do anything(no decoding effect). My local code from these html files are below.

html,
head,
body {
  width: 100%;
  margin: 0;
  background-color: rgb(38, 64, 185);
}

* {
  font-family: 'Whitney', sans-serif;
  box-sizing: border-box;
}

div.mainContent {
  margin-top: 100px;
}

span.morphText {
  color: white;
}

.code {
  color: red;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="css/mainStyles.css">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <meta charset="utf-8">

  <script type="text/javascript">
    jQuery.fn.decodeEffect = (function($) {
      var defaultOptions = {
        duration: 3000,
        stepsPerGlyph: 10,
        codeGlyphs: "ABCDEFGHIJKLMNOPQRSTUWVXYZ1234567890",
        className: "code"
      };

      // get a random string from the given set,
      // or from the 33 - 125 ASCII range
      function randomString(set, length) {
        console.log("ues");
        var string = "",
          i, glyph;
        for (i = 0; i < length; i++) {
          console.log("ues");
          glyph = Math.random() * set.length;
          string += set[glyph | 0];
        }
        return string;
      }

      // this function starts the animation. Basically a closure
      // over the relevant vars. It creates a new separate span
      // for the code text, and a stepper function that performs
      // the animation itself
      function animate(element, options) {
        var text = element.text(),
          span = $("<span/>").addClass(options.className).insertAfter(element),
          interval = options.duration / (text.length * options.stepsPerGlyph),
          step = 0,
          length = 0,
          stepper = function() {
            if (++step % options.stepsPerGlyph === 0) {
              length++;
              element.text(text.slice(0, length));
            }
            if (length <= text.length) {
              span.text(randomString(options.codeGlyphs, text.length - length));
              setTimeout(stepper, interval);
            } else {
              span.remove();
            }
          };
        element.text("");
        stepper();
      }

      // Basic jQuery plugin pattern
      return function(options) {
        options = $.extend({}, defaultOptions, (options || {}));
        return this.each(function() {
          animate($(this), options);
        });
      };
    }(jQuery));

    $("#sometext").decodeEffect();
  </script>
</head>

<body>
  <div class="mainContent">
    <span id="sometext" class="morphText">
            Hello, world
        </span>
  </div>
</body>

</html>

I have made you a snippet and removed the unnecessary codepen. It would be helpful when you link the SO question from where you have the example — Aalexander
– Aalexander, Commented Jan 31, 2021 at 7:23

Vlad · Accepted Answer · 2021-01-31 12:55:21Z

You should wrap your js code in $(document).ready so your code will run as soon as DOM becomes safe for manipilation (check this in documentation - https://api.jquery.com/ready/).

so your code will be next:

$( document ).ready(function() {

jQuery.fn.decodeEffect = (function($) {
  var defaultOptions = {
    duration: 3000,
    stepsPerGlyph: 10,
    codeGlyphs: "ABCDEFGHIJKLMNOPQRSTUWVXYZ1234567890",
    className: "code"
  };

  // get a random string from the given set,
  // or from the 33 - 125 ASCII range
  function randomString(set, length) {
    console.log("ues");
    var string = "",
      i, glyph;
    for (i = 0; i < length; i++) {
      console.log("ues");
      glyph = Math.random() * set.length;
      string += set[glyph | 0];
    }
    return string;
  }

  // this function starts the animation. Basically a closure
  // over the relevant vars. It creates a new separate span
  // for the code text, and a stepper function that performs
  // the animation itself
  function animate(element, options) {
    var text = element.text(),
      span = $("<span/>").addClass(options.className).insertAfter(element),
      interval = options.duration / (text.length * options.stepsPerGlyph),
      step = 0,
      length = 0,
      stepper = function() {
        if (++step % options.stepsPerGlyph === 0) {
          length++;
          element.text(text.slice(0, length));
        }
        if (length <= text.length) {
          span.text(randomString(options.codeGlyphs, text.length - length));
          setTimeout(stepper, interval);
        } else {
          span.remove();
        }
      };
    element.text("");
    stepper();
  }

  // Basic jQuery plugin pattern
  return function(options) {
    options = $.extend({}, defaultOptions, (options || {}));
    return this.each(function() {
      animate($(this), options);
    });
  };
}(jQuery));

$("#sometext").decodeEffect();
});

uingtea · Accepted Answer · 2021-01-31 11:19:06Z

1

when you call it in head element $("#sometext") is not yet available, move it to the bottom of body

<body>
  <div class="mainContent">
    <span id="sometext" class="morphText">
            Hello, world
        </span>
  </div>
  <script>
    $("#sometext").decodeEffect();
  </script>
</body>

answered Jan 31, 2021 at 11:19

uingtea

6,6342 gold badges32 silver badges45 bronze badges

1 Comment

itsMeMoriarty Over a year ago

Oh okay, I should probably do this as well. Thanks!

Collectives™ on Stack Overflow

JQuery/JS script not running in html (works in Codepen)

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related