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.
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'm using Background Check JS to try and get some text on my website to change based on the background being light or dark. I can't get it to work on my site to made a minimal replica of it and still no dice:
<html>
<head>
<style>
.background--light {
color: black;
}
.background--dark {
color: white;
}
.background--complex {
color: gray;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://www.kennethcachia.com/background-check/scripts/background-check.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
BackgroundCheck.init({
targets: '.target',
});
});
</script>
</head>
<body>
<img src="http://www.kennethcachia.com/background-check/images/6.jpg">
<div style="position: fixed; top: 65%;" class="target">Why not white?</div>
</body>
</html>
Also sometimes an "CanvasRenderingContext2D': The canvas has been tainted by cross-origin data." Error pops up in this demo sometimes?
I may have missed something trivial in this demo but I can't get it to work at all on my "full" version I'm trying to write.
I am currently facing a strange problem (well, most probably I am simply not aware of something important here).
I have the following html snippet
<div id="test">
Hallo Welt
</div>
And the following javascript snippet:
<script type="text/javascript">
$(function () {
$('#test').offset({
position: 'absolute',
width: '100px',
left: ($('body').width() - $('#test').width()) / 2.0
})
});
</script>
This should render the test div horizontally centered which works perfectly fine within the browser. When I try to print this page however, the element shows up on the right corner of the printed page and not in the middle.
I thought maybe theres something wrong about using pixels for positioning elements for printing so I tried other measures like em:
<script type="text/javascript">
$(function () {
$('body, #test').css({ 'font-size': '12px' });
$('#test').css({
left: (($('body').width() - $('#test').width() ) / 24.0) + 'em'
})
});
</script>
But unfortunately the result is all the same, no matter what browser I try...
What am I missing here?
#
In response to Adrian I made a sample as simple as possible to extract the problem reproducable for everyone.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(function () {
$('#test').css({
background:'red',
position: 'absolute',
width: '100px',
left: ($('body').width() - 100) / 2.0
});
});
</script>
</head>
<body>
<div id="test">
Lord
</div>
</body>
</html>
I also observed that the position of #test within the printed document is dependant on the size of the browser window at the time of printing.
I am actually working with media queries as well in my real project. I was trying to convey an extremely simply sample as a showcase for the problem.
This is also interesting and the root of the evil in my opinion. Even though the printer uses its 100px from the print media query, its executed javascript returns that the test div ist still 100% which is just wrong in my opinion!!!
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(function () {
$('#test').text($('#test').width());
});
</script>
<style type="text/css">
#test {
width: 100%;
border: 1px solid black;
}
#media print {
#test {
width: 100px;
}
}
</style>
</head>
<body>
<div id="test"></div>
</body>
</html>
EDIT: Newer Solution with js only...
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(function () {
$('#test').css({
background:'red',
position: 'absolute',
width: '100px',
left: '50%',
marginLeft: '-50px'
});
});
</script>
</head>
<body>
<div id="test">
Lord
</div>
</body>
</html>
CSS solution
In this situation I would use CSS #media print {} to target printing.
Im assuming you have a reason for using javascript to build your CSS but if not I would recommend coding this in a totally different way. This shouldnt require javascript, nor should it require an absolute position.
Anyway , solution below...
<html>
<head>
<style>
#media print {
#test {
left:50% !important;
margin-left:-50px;
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(function () {
$('#test').css({
background:'red',
position: 'absolute',
width: '100px',
left: ($('body').width() - 100) / 2.0
});
});
</script>
</head>
<body>
<div id="test">
Lord
</div>
</body>
</html>
I am new to Tweenmax animation and i am trying to animate an id selector and unfortunately nothing is happening. both selector and content do nothing. Some one help me out, here is the code.
<!DOCTYPE html>
<html>
<head>
<title>my first tween</title>
<style>
body {
background-color:silver;
}
#sample {
width: 402px;
height: 60px;
background-color:teal;
padding: 8px;
}
</style>
<script type="text/javascript" src="jquery.gsap.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/TweenMax.min.js">/script>
</head>
<body>
<div id="sample">
<!-- Some content -->
</div>
</body>
</html>
And here is the js
var drew = document.getElementById("sample"); //or use jQuery's $("#sample")
TweenLite.to(sample, 1.5, {width:100});
<script>
$(function(){
TweenLite.to($("#sample"), 1.5, {width:100});
});
</script>
use
var drew = document.getElementById("sample"); //or use jQuery's $("#sample")
TweenLite.to(drew , 1.5, {width:100});
you put sample instead of drew.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#tempc {
background-color: #FFFF00;
width: 50px;
height: 50px;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function toggle(){
$("#tempc").toggle(
function () {
$("#tempc").animate({width: 255, height: 300}, 1000, "easeInOutQuad")
},
function () {
$("#tempc").animate({width: 50}, 1000, "easeInOutQuad")
}
);
}
</script>
</head>
<body>
<div id="tempc" onclick="toggle();">
Hello!
</div>
</body>
</html>
Hello Stackoverflow,
I try to use toggle to switch in animate functions, but the code showen above doesn't seem to work? What is wrong?
Greetings
Change this:
<body>
<div id="tempc" onclick="toggle();">
To this:
<body onload="toggle();">
<div id="tempc">
DEMO - except for easing
Setup toggle handler on pageload using jquery ready function. Remove onclick handler from div. Check this code.
$(function (){
$("#tempc").toggle(
function () {
$("#tempc").animate({width: 255, height: 300}, 1000);
},
function () {
$("#tempc").animate({width: 50}, 1000);
}
);
});
Try something like this:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#tempc {
background-color: #FFFF00;
width: 50px;
height: 50px;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
<div id="tempc">
Hello!
</div>
<script type="text/javascript">
$().ready(function(){
$('#tempc').toggle(
function(){
$(this).animate({width: 255, height: 300}, 1000, 'linear')
},
function () {
$(this).animate({width: 50}, 1000, 'linear')
}
);
});
</script>
</body>
</html>
The onclick handler has been removed from the div because it's unnecessary when using jQuery.
Also, the instances of $('#tempc') in the callbacks has been changed to $(this). This is the "correct" way of doing things and I believe this is more efficient for the Javascript engine (correct me if I'm wrong!).
Also, you were trying to use the "easeInOutQuad" function as the easing function. According to the jQuery docs, the only built-in functions that are supported are swing and linear:
Easing:
The remaining parameter of .animate()
is a string naming an easing function
to use. An easing function specifies
the speed at which the animation
progresses at different points within
the animation. The only easing
implementations in the jQuery library
are the default, called swing, and one
that progresses at a constant pace,
called linear. More easing functions
are available with the use of
plug-ins, most notably the jQuery UI
suite.
See the jQuery docs for more info: jQuery Animate()