Im learning animations and JS, I've decide that to go with anime.js. Though when i try to do a basic function I get an "Uncaught ReferenceError: anime is not defined" error.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Underscores</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="backend.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js"></script>
<div class="box red"></div>
<div class="box blue"></div>
<div class="box green"></div>
<div class="box yellow"></div>
</body>
</html>
CSS:
.box{
position: relative;
width: 100px;
height: 100px;
margin: 4px;
display: inline-block;
}
.red{background-color: red;}
.blue{background-color: blue;}
.green{background-color: green;}
.yellow{background-color: yellow;}
JS:
anime({
targets: 'div.box.red',
translateY: [
{ value: 200, duration: 500 },
{ value: 0, duration: 800 }
],
rotate:{
value: '1turn',
easing: 'easeInOutSine'
}
});
As CertainPerformance said, the dependency of anime.js must be declared before backend.js which is the one using it. Like This:
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js"></script>
<script src="backend.js" charset="utf-8"></script>
Hope this clarifications solves your problem!
I've tried different things including the suggested I downloaded the zip file and tried to use it and its telling me is not defined <script src="JavaScript/anime-master/lib/anime.es.js"></script><script src ="JavaScript/userform.js"></script> I've also tried <script src="https://cdn.jsdelivr.net/npm/animejs#3.0.1/lib/anime.min.js"></script> and still telling me is not defined
On my Javascript file, i'm trying to use the anime like thisanime({ targets: '#RegistrationForm', translatex: 250 }); I also tried with a variable, and class I'm trying to animate a form<form method="POST" action="RegistrationSend.php" id="RegistrationForm" > <div class="card d-flex justify-content-center" style= "width: 30rem;"> <div class="card-body"> i've also tried the card-body class and still no success it always tell me the anime is not defined. any advise?
Try to load both script before body gets over.
It worked for me.
Hope it would do same for you.
Related
I am starting to learn Anime.JS. To see how it worked, I copied some very basic sample code from their documentation website. Weirdly, the square is not animating to the right 250px like it should be...
HTML:
<!DOCTYPE html>
<html lang="en-us">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="anime.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="cssSelector">
<div class="line">
<div class="square el"></div>
</div>
</div>
</body>
</html>
CSS:
body{
background-color: #232323;
}
.square{
width: 100px;
height: 100px;
background-color: red;
}
And Javascript
var cssSelector = anime({
targets: '#cssSelector .el',
translateX: 250
});
I see the square but there is no animation. The program does read the anime.min.js because there is no error message in the console.
What I believe is that you are trying to run your code before the page is loaded.
Add this:
function main(){
anime({
targets: '#cssSelector .el',
translateX: 250
});
}
document.addEventListener("DOMContentLoaded", main);
Then it should work: https://jsfiddle.net/DerekL/980j4591/
I've been looking thru the docs and another question that was close to what I needed for help with the jRate star rating jQuery plugin, but I was not able to get the output I was looking for. What I am looking to do is to get an output of the numerical rating value when I click a button.
With this html :
<div id="ratingContainer">
<div id="currentValue" style="width: 70px; height: 70px; border: 1px solid black; background-color: blue; color: white" >Rating value</div>
<input type="button" id="ratingClicker" value="get rating!" onclick="getRatingValue()" />
</div>
and this javascript :
function getRatingValue(){
$(document).ready(function(){
$('ratingContainer').jRate({
onSet: function(rating){
$('ratingValue').text(rating);
}
})
});
}
function getSimpleStarRatingHtml(){
$(document).ready(function() {
$("#ratingContainer").jRate({
width: 60,
height: 60,
startColor: '#3366FF',
endColor: '#9966FF'
});
});
}
The getSimpleStarRatingHtml() function populates the empty stars in the ratingContainer div when the user pulls a select dropdown.
The getRatingValue code was cribbed from the other StackOverflow question I linked to.
I realize this is probably a basic jQuery Q; I'm a little bit of a noob with it. Thanks.
Update
The code below does give me the output for the rating value I want, but does not allow me to set any options for the appearance of the stars (height, color, etc):
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="javascript/jquery-1.11.2.js"></script>
<script type="text/javascript" src="javascript/jRate.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
function createJrate(){
$('#rating').jRate({
onChange: function(rating){
$('#ratingValue').text(rating);
}
});
}
</script>
<style>
#rating{
width: 300px;
height: 140px;
border: 1px black solid;
}
</style>
</head>
<body>
<h1>test</h1>
<input type="button" value="create rating" onclick="createJrate()" style="margin-bottom: 15px"/>
<div id="rating"></div><div id="ratingValue"></div>
</body>
</html>
Have tried a bunch of variations, like adding the rating function after the close bracket that ends the options, tried tying the $('#ratingValue').jRate() to a var, and then calling the function, as in jRate.change(function(){// stuff in here});.
Any other ideas you may have?
thanks
If your logic works and you're just looking to change the styling, have you considered simply overriding the standard CSS for the script to have it render with the colors and formatting that you'd prefer?
was able to get it working by defining the jRate obj this way...
$('#rating').jRate({
onChange: function(rating){
$('#ratingValue').text("rating " + rating);
},
startColor: 'blue',
endColor: 'blue',
width: 50,
height: 50
});
Probably super-basic question, but, why do the text on the first div of the table goes down when raphael creates its paper?
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/raphael-min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
raph = new Raphael('canvas_container', 600, 600);
});
</script>
<title>Simple JS Page</title>
</head>
<body>
<br>
<div style="width: 100%; display: table;">
<div style="display: table-row">
<div id="text_container" style="height:600px;width:300px;border: 8px solid #f7f7f7;display:table-cell;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;vertical-align:text-top;">
why am I in the bottom???
</div>
<div id="separator" style="height:600px;width:10px;display:table-cell">
</div>
<div id="canvas_container" style="height:600px;width:600px;border: 8px solid #f7f7f7;display: table-cell;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;">
</div>
</div>
</div>
</body>
</html>
All of the table-imitation css is getting in the way. It looks like you are trying to create two vertical divs, one 300px wide the other 600px wide, with a 10px separator. The same thing can be accomplished using floating, and it plays a little nicer with Raphael.
#text_container, #separator, #canvas_container{
float: left;
}
Fiddle: http://jsfiddle.net/q0aka3s6/
The JSTween library doesn't seem to perform a simple animation pulled from the library's tutorial. Using the following code, the alert box will show up after the allotted 1 second duration, but no animation will take place.
I must have set up the library wrong somehow, but I can't see the problem.
<html>
<head>
<style type="text/css">
#box
{
width: 16px;
height: 16px;
}
</style>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="jstween-1.1.js" ></script>
<script type="text/javascript" src="jstween-1.1.min.js" ></script>
<script type="text/javascript">
function animate()
{
$('#box').tween({
width:{
start: 16,
stop: 200,
time: 0,
units: 'px',
duration: 1,
effect:'easeInOut',
onStop: function(){ alert( 'Done!' ); }
}
}).play();
}
</script>
</head>
<body>
<div id="box">
<img src="image.png" onClick="animate()" />
</div>
</body>
</html>
Additional info: using Safari on 10.7.5. Code does not work in Chrome or Firefox either.
For anyone who may read this in the future, I discovered the problem: the CSS element #box needs position: relative; as an attribute, otherwise the browser will hold the element in place by default.
I'm trying to fire an event every time a navigation link (a.nav) is clicked. For Safari, it works as expected; however, in every other browser it ONLY fires the first time a link is clicked. For some reason, I'm not getting the desire result, is there anything I'm missing?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>PatrickCason.com</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<!--[if IE 7]>
<style type="text/css">
#main, #namespace {
padding-right: 115px;
}
#textarea {
padding-right: 115px;
padding-top: 15px;
}
#social {
bottom: 82px;
}
</style>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script src="jquery.history.js" type="text/javascript"></script>
<script src="spritely.js" type="text/javascript"></script>
<script src="ajax.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$("#main").show("slide", { direction: "up" }, 1000);
$("#copyright").show("slide", { direction: "down" }, 500);
$("#main").effect("bounce", { times: 1, distance: 5 }, 250);
$('a.nav').live('click', function() {
//For some reason... this only works with the first time I click a nav link... herein lies the problem!
$('#spark').sprite({fps: 30, no_of_frames: 12, play_frames: 12});
});
});
</script>
</head>
<body>
<div id="floater"></div>
<div id="container">
<div id="main">
<div id="spark"></div>
<div id="namespace"><span style="font-size: 20px;">hi. i am </span><h1 style="display: inline; font-size: 36px;">Patrick Cason</h1><span style="font-size: 20px;">.</span></div>
<div id="nav">
<ul>
<li>Contact Me!</li>
<li>About</li>
<li>Links</li>
<li>Blog</li>
</ul><br>
<p><b>Phone:</b><br><span style="font-size: 24px; font-weight: bold;">615.339.4300</span></p>
<p><b>Email:</b><br>pcason#comcast.net</p>
</div>
<div id="social">
<ul>
<li><img src="images/facebook.png"></li>
<li><img src="images/twitter.png"></li>
<li><img src="images/linkedin.png"></li>
<li><img src="images/feed.png"></li>
</ul>
</div>
<div id="home"><img src="images/home.png"></div>
<div id="textarea">
<div id="content"></div>
</div>
</div>
<div id="shadow"></div>
<script>
$(window).load(function () {
$("#shadow").fadeIn(1250);
});
</script>
<div id="copyright">
Copyright © 2011 Patrick Cason. All rights reserved.
</div>
</div>
</body>
</html>
I hope I'm not being to vague... I'd really appreciate the help.
I don't see the need for using live() in your case. That is for when you have dynamically added html. Or, when you have a decent number of elements that will bind to the same event handler (rather than click() which would bind individual handlers for each link).
$('a').click(function() {
$('#spark').sprite({fps: 30, no_of_frames: 12, play_frames: 12});
});
I think the problem might be your selector. Try just selecting <a> tags
http://jsfiddle.net/EmvQk/
EDIT:
Edit your code to comment out the sprite() method and add an alert() as indicated in the comments below. I am pretty confident the problem is stemming from the sprite() call and this little test will determine if that is the case.
Your Css needs to follow the set of rules that the library requires in order to function properly. After reviewing the library example and based on your #sprite css rule ... Try making these changes:
#sprite
{
background: transparent url(images/spark.png) 0 0 no-repeat;
position: absolute;
top: 0;
left: 223px;
width: 156px;
height: 567px;
z-index: 2000;
cursor: pointer;
}
It is an issue with Spritely, as of version 0.5 they have a destroy() method, so...
$("#spark").click(function() {
var $spark = $("#spark");
$coil.sprite({
fps: 30,
no_of_frames: 12,
on_last_frame: function(obj) {
obj.spStop(); // stop the animation on the last frame
obj.spState(1);
killSprite($spark);
}
});
});
function killSprite(yourEl){
yourEl.destroy();
}
I popped the destroy method in a function that is called on the last frame of your animation so hopefully it won't cause any issues
It should be that
$('#spark').sprite({fps: 30, no_of_frames: 12, play_frames: 12});
in and of itself doesn't work multiple times. Have you tried calling that function twice and see what happens.
To test if your click handler is the culprit, add an alert to the click handler and see if the issue is your click handler or the code snipped above.
It seems to me that your problem may be with the spritely plugin for jQuery. I set up a quick test at: http://jsfiddle.net/Htm4y/, that worked for me (in Chrome). In the example, clicking the .nav links fires a jQuery toggle. I would need to see your css to figure out what is supposed to be in that div, but it must be configured correctly in order for spritely to animate it.