Are the javascript tags located correctly?

chrisjchrisj · April 26, 2021, 7:44pm

I am unsuccessfully trying to add an animation to an html page:
https://codepen.io/alticreation/pen/ZYdopE?editors=1111

I copied the small amount of js, html & css code from that link and placed it on an html page. I wrappred the css in < style > < /style > tags and wrapped the js in script tags < script > and located both the css and javascript code above the tag, but no successful animation upon page load. So, I moved the js to below the html code, still no success. Any ideas are appreciated.

33P · April 26, 2021, 7:48pm

Hi and welcome @chrisjchrisj . I can see the animation. Maybe you’re using a cellphone? Sometimes some things are not viewed correctly with one. But in my notebook I see it alright.
Edit: Or do you mean in the console? Here I can’t see it.

chrisjchrisj · April 26, 2021, 7:57pm

Thanks for your reply.
Regarding, “I can see the animation” if you’re talking about being able to see what appears in the link, I can see that too. What I can’t see is the animation (that appears in the link), after I copied it onto an html page, I can’t see it on the html page. Or maybe you’re saying you can see the animation after you’ve copied the code onto your own html page?
Also, I’m not using a cell phone.
Any additional help is appreciated.

33P · April 26, 2021, 8:01pm

You’re welcome. Sorry, I can’t see the animation in the console. I see it in codepen.
Maybe if you share the code of the html page people can tell what could possibly be wrong. Good luck with that.

chrisjchrisj · April 26, 2021, 8:12pm

Thanks for your reply, here’s the page code:

<!DOCTYPE html>
<html>
<head>
<link href='//fonts.googleapis.com/css?family=Dosis:400,600' rel='stylesheet' type='text/css'>
<style>
#container {
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
border: 1px solid red;
}
</style>
		<script>
		window.onload = play();
		document.getElementById("tryAgain").addEventListener("click", () => {
		  play();
		});

		function play() {
		  var blue = "#2980b9";
		  var l = Snap("#logo");
		  var p = l.select("path");
		  l.clear();
		  l.append(p);

		  p.attr({
		    fill: blue,
		    stroke: "#0066CC"
		  });

		  setTimeout(function () {
		    // modify this one line below, and see the result !
		    var logoTitle = "alticreation";
		    var logoRandom = "";
		    var logoTitleContainer = l.text(0, "98%", "");
		    var possible = '-+*/|}{[]~\\":;?/.><=+-_)(*&^%$#@!)}';
		    logoTitleContainer.attr({
		      fontSize: 280,
		      fontFamily: "Dosis",
		      fontWeight: "600"
		    });

		    function generateRandomTitle(i, logoRandom) {
		      setTimeout(function () {
		        logoTitleContainer.attr({ text: logoRandom });
		      }, i * 70);
		    }

		    for (var i = 0; i < logoTitle.length + 1; i++) {
		      logoRandom = logoTitle.substr(0, i);
		      for (var j = i; j < logoTitle.length; j++) {
		        logoRandom += possible.charAt(
		          Math.floor(Math.random() * possible.length)
		        );
		      }
		      generateRandomTitle(i, logoRandom);
		      logoRandom = "";
		    }
		  }, 500);
		}
</script>
</head>
<body>
	<div id="container">
	<svg xmlns="http://www.w3.org/2000/svg" id="logo" viewBox="0 0 1252 600" width="250px">
	<path fill="none" d="M531.3 11.2S520.6.5 509.5.5c-11 0-25.4 11.3-25.4 11.3L11 360s-16 12-7.4 24c8.8 12.2 25.5 1.5 25.5 1.5L499 112s6.6-4.2 10.3-4c3 .2 7.7 4 7.7 4l283 229s4 3 6 3c2.7.2 7.4-3.3 7.4-3.3l210-145.4s2.2-1.7 3.6-1.7c1 0 3.4 1.7 3.4 1.7l189.3 144.5s15.8 12.8 27.2.3c11-12-4-27-4-27l-196.7-181s-7.3-7.5-15.8-8c-8.6-.4-19.8 7.8-19.8 7.8l-196.2 122s-5.5 4-8.6 4c-2.6-.3-6.5-4-6.5-4z"/>
	</svg>
			<!-- me -->
	<div style="font-family:'Dosis'; font-weight:bold; color:#888; text-align:center;margin-top:20px">made with <span style="color:rgb(199, 59, 84)">&#9829;</span> by <a style="color:#999;text-decoration:none;border-bottom:1px dashed #555" href="http://www.alticreation.com/en" title="front end developer" target="_blank">alticreation</a></div>
	</div>
</body>
</html>

DanCouper · April 26, 2021, 8:14pm

Put the script after the HTML it’s looking for

chrisjchrisj · April 26, 2021, 8:18pm

Thanks for your reply. Per your suggestion I have "Put the script after the HTML ", yet still no succes. Here’s the latest code:

<!DOCTYPE html>
<html>
<head>
<link href='//fonts.googleapis.com/css?family=Dosis:400,600' rel='stylesheet' type='text/css'>
<style>
#container {
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
border: 1px solid red;
}
</style>

</head>
<body>
	<div id="container">
	<svg xmlns="http://www.w3.org/2000/svg" id="logo" viewBox="0 0 1252 600" width="250px">
	<path fill="none" d="M531.3 11.2S520.6.5 509.5.5c-11 0-25.4 11.3-25.4 11.3L11 360s-16 12-7.4 24c8.8 12.2 25.5 1.5 25.5 1.5L499 112s6.6-4.2 10.3-4c3 .2 7.7 4 7.7 4l283 229s4 3 6 3c2.7.2 7.4-3.3 7.4-3.3l210-145.4s2.2-1.7 3.6-1.7c1 0 3.4 1.7 3.4 1.7l189.3 144.5s15.8 12.8 27.2.3c11-12-4-27-4-27l-196.7-181s-7.3-7.5-15.8-8c-8.6-.4-19.8 7.8-19.8 7.8l-196.2 122s-5.5 4-8.6 4c-2.6-.3-6.5-4-6.5-4z"/>
	</svg>
			<!-- me -->
	<div style="font-family:'Dosis'; font-weight:bold; color:#888; text-align:center;margin-top:20px">made with <span style="color:rgb(199, 59, 84)">&#9829;</span> by <a style="color:#999;text-decoration:none;border-bottom:1px dashed #555" href="http://www.alticreation.com/en" title="front end developer" target="_blank">alticreation</a></div>
	</div>
	<script>
			window.onload = play();
			document.getElementById("tryAgain").addEventListener("click", () => {
			  play();
			});

			function play() {
			  var blue = "#2980b9";
			  var l = Snap("#logo");
			  var p = l.select("path");
			  l.clear();
			  l.append(p);

			  p.attr({
			    fill: blue,
			    stroke: "#0066CC"
			  });

			  setTimeout(function () {
			    // modify this one line below, and see the result !
			    var logoTitle = "alticreation";
			    var logoRandom = "";
			    var logoTitleContainer = l.text(0, "98%", "");
			    var possible = '-+*/|}{[]~\\":;?/.><=+-_)(*&^%$#@!)}';
			    logoTitleContainer.attr({
			      fontSize: 280,
			      fontFamily: "Dosis",
			      fontWeight: "600"
			    });

			    function generateRandomTitle(i, logoRandom) {
			      setTimeout(function () {
			        logoTitleContainer.attr({ text: logoRandom });
			      }, i * 70);
			    }

			    for (var i = 0; i < logoTitle.length + 1; i++) {
			      logoRandom = logoTitle.substr(0, i);
			      for (var j = i; j < logoTitle.length; j++) {
			        logoRandom += possible.charAt(
			          Math.floor(Math.random() * possible.length)
			        );
			      }
			      generateRandomTitle(i, logoRandom);
			      logoRandom = "";
			    }
			  }, 500);
			}
</script>
</body>
</html>

Any additional ideas/suggestions are appreciated

lasjorg · April 26, 2021, 10:19pm

You are missing the Snap.svg library. Add it to the head.

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>

Also, you are trying to add an event listener to an element that isn’t on your page (document.getElementById("tryAgain"))

Datt · April 27, 2021, 12:45pm

[quote=“chrisjchrisj, post:8, topic:457683”
‘My’

Blockquote

[/quote]

system · October 27, 2021, 12:45am

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

Topic		Replies	Views
I need help with animated project HTML-CSS	9	741	March 9, 2021
JavaScript and HTML JavaScript	4	1625	February 2, 2021
I have no idea what's wrong here JavaScript	4	737	December 26, 2023
Java script not working on codepen JavaScript	6	4107	February 2, 2021
Animation not working	9	327	June 1, 2021

Are the javascript tags located correctly?

Related topics