|
JavaScript - Animating Growing/shrinking Div.
Hey,
I had a question about this script I'm working with. I have two functions which I'm using to grow and shrink a div. The growing seems to be working fine but the shrinking function is acting very strange. By strange I mean, in Chrome it will repeatedly shrink and grow over and over. It's all pretty weird. You can view the way it's working here. I'd love any input. Code: <script type="text/javascript">
function grow1(targetid){
set_zindex = document.getElementById(targetid).style.zIndex="1";
thewidth=document.getElementById(targetid).offsetWidth;
if(thewidth<940){
document.getElementById(targetid).style.width=thewidth+10+'px';
}
else if(thewidth>=940){
clearInterval(change);
}
change=setInterval("grow1('div1')",15);
}
function shrink1(targetid){
thewidth2=document.getElementById(targetid).offsetWidth;
if(thewidth2>290){
document.getElementById(targetid).style.width=thewidth2-10+'px';
}
else if(thewidth2<=290){
clearInterval(change2);
}
change2=setInterval("shrink1('div1')",15);
}
</script>
Similar TutorialsHi, I wrote a function which animates an image which looks similar to this: Quote: function animate() { var image = document.getElementById("frontImage"); var cssLeft = image.style.left; var px = cssLeft.substring(0, cssLeft.search("px")); if (px == 100) return; px++; image.style.left = px + "px"; //alert(timage.style.left); setTimeout(this.rotate(), 1); } This seems to be working fine. However, the image goes directly to its final position (100px to the right) and does not go through all the intermediate positions. As soon as I add an alert (the one which is now commented) everything works fine. Anyone knows what the problem is? Thanks in advance for any help Does anyone have an explanation for why animated .gifs might not animate in FF, Chrome, etc.? Only IE does it right for me. I suspect it might have something to do with tables squeezing the graphic (if the .gif is inside a table with a 100% width cell... but even giving the cell with the .gif a width doesn't seem to help.) Is it true? I realise tables are not best used for this purpose, but did this also happen in the good old tables days? I already asked that question on Stack Overflow, however so far I haven't gotten any answers there, so I thought maybe somebody here could help me. Below is the question, copied from Stack Overflow. I've got this problem that I've been trying to solve for a week and I'm at wit's end (which, well, most likely means my wit's not so great, since it doesn't seem to be a very hard problem; nonetheless I'm very new to Javascript and am trying to look at this as a learning experience). I wanted to have a fixed position element that would rotate as a user scrolls the page. Doing so in CSS is trivially easy, however it doesn't work all that great, especially across browsers (works fine in Chrome, but is janky in Firefox) and under stress (when I turn on FPS meter or some other stuff in Chrome Developer Tools it stops working correctly ― I assume it would also behave similarly if there was another CPU-extensive app open etc.). So I figured that animating in the canvas would be a more stable technique. Doing the basic animation in the canvas is, again, rather easy. However I started having problems while trying to emulate the CSS transition effect. In short, I'm trying to emulate a code like this: Code: <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
height: 3000px;
}
#square {
margin: 50px;
width: 150px;
height: 150px;
position: fixed;
background-color: black;
transition: transform linear 0.3s;
}
</style>
<script>
window.onload = function() {
var deg = 0;
var pos = window.pageYOffset;
var square = document.getElementById('square');
window.onscroll = function() {
var npos = window.pageYOffset;
deg += (npos - pos) / 10;
pos = npos;
square.style.transform = 'rotate(' + deg + 'deg)';
}
}
</script>
</head>
<body>
<div id='square'></div>
</body>
</html>
And what I've got currently is below. This is, like, fifteenth try, and if you run it, you'll see that it kind of works but is very ugly and totally not how it should look. I have had better results before, but still not what I was looking for. Code: <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
height: 3000px;
}
canvas {
position: fixed;
}
</style>
</head>
<body>
<canvas id='canvas' width='250' height='250'></canvas>
<script>
window.onload = function() {
// some canvas geometry stuff
var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');
c.translate(125,125);
var deg = Math.PI / 180;
// initializing variables
var request = null;
var deg = 0;
var ndeg = 0;
var base_degree;
var pos = window.pageYOffset;
var time = 0;
var duration = 300; // in milliseconds
draw();
document.addEventListener('scroll', rotateStart, false);
function rotateStart() {
// at the beggining of the scroll, set the time variable and start the loop.
// if scroll continues, only set the time (thus resetting the animation),
// but don't call loop, since it's already set as a callback to requestAnimationFrame.
if (request == null) {
time = (new Date()).getTime();
loop();
}
else {
time = (new Date()).getTime();
}
}
function loop() {
// time passed as a fraction of total duration of animation. Describes our progress
var fraction = ((new Date()).getTime() - time) / duration;
if (fraction == 0) {
// if current time and old time are the same, skip this frame
request = window.requestAnimationFrame(loop);
}
else if (fraction < 1) {
base_degree = (window.pageYOffset - pos) / 10;
ndeg = deg + base_degree * fraction;
// we operate on ndeg, and preserve deg as a reference point
request = window.requestAnimationFrame(loop);
draw();
}
else {
// clean up code.
// we draw one last time at a definitive degree of rotation because
// in my experience with similar scripts it sometimes doesn't go all the way there,
// e.g. maybe it stops at fraction == 0.95 or something like that.
ndeg = deg + base_degree;
draw();
deg = ndeg;
pos = window.pageYOffset;
request = null;
}
}
function draw() {
c.save();
c.clearRect(-125,-125,250,250);
c.rotate(ndeg * deg);
c.fillRect(-75,-75,150,150);
c.restore();
}
};
</script>
</body>
</html>
Could somebody point out errors in what I'm doing, post a solution, give a hint as to what method would be preferred here, whatever? Good day, This program is supposed to have a "box" cover the entire screen and then collapse upon opening the page... I cannot find what is wrong, other than the obvious error that there is no object or it is null, but this is the example the book gave... Anyone care to give me a point in the right direction Thanks, in advance. ao5431 <code> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Boxed In</title> <link rel="stylesheet" href="js_styles.css" type="text/css" /> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript"> /* <![CDATA[ */ var clipSpeed = 5; var clipRight = 0; var clipLeft = 0; var clipTop = 0; var boxSize; var stopShrinking; var clipBottom = 0; var clipBox; var clipBox = document.getElementById("box").style; function startShrinking() { if(navigator.appName == "Microsoft Internet Explorer") { boxSize = document.documentElement.clientWidth / document.documentElement.clientHeight; clipRight = document.documentElement.clientWidth; clipBox.width = clipRight + "px"; clipBottom = document.documentElement.clientHeight; clipBox.height=clipBottom + "px"; } else { boxToShrink = window.innerWidth/window.innerHeigth; clipRight = window.innerWidth; clipBox.width = clipRight + "px"; clipBottom = window.innerHeight; clipBox.height = clipBottom + "px" } stopShrinkingInterval("shrinkBox()", 100); } function shrinkBox() { if(navigator.appName == "Microsoft Internet Explorer") minBoxSize=document.documentElement.clientWidth/2; else minBoxSize = window.innerWidth/2; if (clipLeft > minBoxSize) { clearInterval(stopShrinking); clipBox.display = "none"; } clipBox.clip = "rect(" + clipTop + "px" + clipRight + "px" + clipBottom + "px" + clipLeft + "px)" clipLeft += boxSize * clipSpeed; clipTop += clipSpeed; clipRight -= boxSize * clipSpeed; clipBottom -= clipSpeed; } /* ]]> */ </script> </head> <body onload="startShrinking()" > <div id="box" style="position:absolute; background-color:blue"></div> </body> </html> </code> Hello everyone! I found this article over devness: http://devness.com/2009/06/playing-w...animated-menu/ It is fantastic, but I'm a complete n00b and I was wondering what the JavaScript would look like if the situation was a little different. Picture this: A Super Mario sprite with him standing normally, but to his right is the word "Home". Upon roll over of either the sprite itself or the text, mario does one of his trademark jumps by the way of a few sprites. I know how to do this in flash, but I would like to eliminate it so I have maximum compatibility and no external plugins required. Anyone have any ideas or suggestions? Any help is greatly appreciated!! |
|||||||