Convert a js code for older browser

JavaScript
1

Hello,
I found a bit of code I needed to create some random balls on my background.http://design.central.wa.edu.au/2018web/FJ393551/index.html It works on Chrome but not on Firefox, IE or on my mobile.
After some researches, I found that this code is written in the last version of Javascript and my skills in JS are not good enough to rewrite it completely. I’m learning but not fast enough!
Babeljs convert the code to browser friendly code but he can’t convert .animate or .append fonction, … and me neither.
Maybe one of you could help me?
Thanks !
See below the code:

// Balls colors
const colors = ["#f8b195", "#f27280", "#345d7e"];

const numBalls = 50;
const balls = [];

for (let i = 0; i < numBalls; i++) {
let ball = document.createElement("div");
ball.classList.add("ball");
ball.style.background = colors[Math.floor(Math.random() * colors.length)];
ball.style.left = `${Math.floor(Math.random() * 100)}vw`;
ball.style.top = `${Math.floor(Math.random() * 100)}vh`;
ball.style.transform = `scale(${Math.random()})`;
ball.style.width = `${Math.random()}em`;
ball.style.height = ball.style.width;

balls.push(ball);
document.body.append(ball);
}

// Keyframes
balls.forEach((el, i, ra) => {
let to = {
    x: Math.random() * (i % 2 === 0 ? -11 : 11),
    y: Math.random() * 12
};

let anim = el.animate(
    [
    { transform: "translate(0, 0)" },
    { transform: `translate(${to.x}rem, ${to.y}rem)` }
    ],
    {
    duration: (Math.random() + 1) * 2000, // random duration
    direction: "alternate",
    fill: "both",
    iterations: Infinity,
    easing: "ease-in-out"
    }
);
});
2

edit: Sorry I misread your original post.

Babeljs convert the code to browser friendly code but he can’t convert .animate or .append fonction

These are not JavaScript functions. These look like jQuery functions or are pulled from a larger context (which also needs to be ran through babel). appendChild(x) might work for .append but .animate() is totally different. Your animate here looks like something form jQuery, but the elements aren’t jQuery nodes so just dropping it in will not work.

3

even in chrome, balls.animate is not a function. (Your page throws an error. On both Chrome and Firefox.)
On first visual inspection, both the chrome and firefox versions seem to operate identically. What are you expecting to see that you dont see, or what differences are you seeing?

If the problem is older browsers, what browser VERSION are you targetting?
If your problem is “It doesnt work on Firefox”, the problem isn’t an older browser, it’s that your code either has errors in it that Chrome compensates for, or you’re using features that FF/IE dont support - which wont change based on version.

4

It’s not exactly about converting (such as arrow functions to regular functions); certain browsers just don’t implement that API yet, so what you need here is polyfills. Here’s one for web animations… I’m not aware of an “all-inclusive” polyfill for both the ParentNode and the ChildNode interfaces (which are the latest additions to the DOM specs), but you can find polyfills for certain methods in the respective MDN docs, e.g. here for .append().

5

so what you need here is polyfills.

@m3g4p0p You can just run it through babel and it’ll convert it for you. My original reply did that, but then I noticed she had said she already tried it and it was the other things that were causing issues.

Here is the code compatible with IE10+ and Safari 9+. (Minus the append/animate problems)

"use strict";

// Balls colors
var colors = ["#f8b195", "#f27280", "#345d7e"];

var numBalls = 50;
var balls = [];

for (var i = 0; i < numBalls; i++) {
  var ball = document.createElement("div");
  ball.classList.add("ball");
  ball.style.background = colors[Math.floor(Math.random() * colors.length)];
  ball.style.left = Math.floor(Math.random() * 100) + "vw";
  ball.style.top = Math.floor(Math.random() * 100) + "vh";
  ball.style.transform = "scale(" + Math.random() + ")";
  ball.style.width = Math.random() + "em";
  ball.style.height = ball.style.width;

  balls.push(ball);
  document.body.append(ball);
}

// Keyframes
balls.forEach(function(el, i, ra) {
  var to = {
    x: Math.random() * (i % 2 === 0 ? -11 : 11),
    y: Math.random() * 12
  };

  var anim = el.animate(
    [
      { transform: "translate(0, 0)" },
      { transform: "translate(" + to.x + "rem, " + to.y + "rem)" }
    ],
    {
      duration: (Math.random() + 1) * 2000, // random duration
      direction: "alternate",
      fill: "both",
      iterations: Infinity,
      easing: "ease-in-out"
    }
  );
});

For ease, I just ran it through the online compiler: https://babeljs.io/repl/

6

Well yes, that’s what I was actually referring to. Babel is just a transpiler, so you still need polyfills for web animations and ParentNode.append()… that’s no jQuery here.

7

Well, those aren’t JS functions. Polyfills are for unsupported JS functions. It sounded like you were referring to the arrow functions above.

8

Thanks for your answers.
Actually, @m_hutley it works on my version of Chrome with no error message, it creates cercles which move on the screen.
I already transpiled with Babel but as I said, I don’t have the technical competences to transpile .animate and .append function which are apparently experimental for jshint esversion: 6.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.