working with traveling animations - javascript

I am working with taveling fish. The fish should swim across the screen from both direction. I am having a little bit hard of understanding how to set up the array so the fish could swim. The array i was thinking was like this
Var fishPos = new Array
fishPos[0] = fish1
fishPos[1] = fish2
fishPos[2] = fish3
then do the function of the fish..I really don't know how to do animated fish swim...i am trying. I guess i am woundering If the array i am looking for is what i just did up there.. Thanks.
Ok this is what I have so far but something is still not right they fish will not swim...
<!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>Fish tank</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
// <![CDATA[
var fishPos = new Array(3);
var fishPos = 0;
var direction;
var begin;
fishPos[0] = "fish1.gif";
fishPos[1] = "fish2.gif";
fishPos[2] = "fish3.gif";
function fishSwim(fishNumber) {
document.getElementById("fish"+fishNumber).style.left = horizontal[fishPos[fishNumber] + "px";
++fishPos[fishNumber];
if (fishPos[fishNumber] == 49)
fishPos[fishNumber] = 0;
}
function startSwimming() {
setInterval(fish1Swim, 100);
}
// ]]>
</script>
</head>
<body onload="startSwimming();">
<p><span id="fish1" style=
"position:absolute; left:10px; top:10px"><img src="fish1.gif" alt="Image of a fish" /></span></p>
<p><span id="fish2" style=
"position:absolute; left:10px; top:120px"><img src="fish3.gif" alt="Image of a fish" /></span></p>
<p><span id="fish3" style=
"position:absolute; left:10px; top:250px"><img src="fish2.gif" alt="Image of a fish" /></span></p>
</body>
</html>

You are approaching it from the wrong direction. To make it easier for you you should try using animation plugin like http://www.spritely.net/ (require jQuery).
If you wanted to make it by yourself you'd have to write a tweening function which would - over specified time - move your object from point A to B, change its animations frames, offset its Y position to give this fishy/wobbly movement effect etc. Creating array of positions isn't really the way to go.
You will find a lot of tips on how to start working on creating your own animations engine at this fine article at Dev.Opera http://dev.opera.com/articles/view/javascript-animation/
If you are targeting only the modern browsers you could try playing with CSS3 animations - though these aren't widely supported yet.

Related

Need html code to print webpage image only, in focus

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Coupon Page</title>
<script type="text/javascript">
function printCoupon() {
var timeout = 1000;
self.focus();
window.print();
setTimeout("self.close()", timeout);;
self.focus();
}
</script>
</head>
<body onload="printCoupon();">
<p><img src="https://nebula.phx3.secureserver.net/2247f0de910e14f95483f60fdae499a0?
AccessKeyId=8BBF3308EC59517C0B34&disposition=0&alloworigin=1" originalattribute="src" originalpath="coupon.jpg" width="585" height="250">
</p>
</body>
</html>
I've searched for html coding to print webpage image only when image (w585 w250), actual size of image, or a related button is clicked. I found coding that works perfectly yet prints my image really out of focus. The coding you show addresses this by stating focus and such, I've worked on this for near a month without success, Please help
You can try media queries in css to print the image.
Check naturalWidth and naturalHeight and compare with image width and height so if they match then print page.
function printCoupon() {
var timeout = 1000;
var naturalWidth = $('#img')[0].naturalWidth;
var naturalHeight = $('#img')[0].naturalHeight;
var width = $('#img').width()
var height = $('#img').height();
if (naturalWidth == width && naturalHeight == height) {
self.focus();
window.print();
setTimeout("self.close()", timeout);;
self.focus();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<body onload="printCoupon();">
<p><img id="img" src="https://nebula.phx3.secureserver.net/2247f0de910e14f95483f60fdae499a0?
AccessKeyId=8BBF3308EC59517C0B34&disposition=0&alloworigin=1" originalattribute="src" originalpath="coupon.jpg" width="585" height="250">
</p>

Javascript moving circle

I need to program a html-based monitoring surface.
For the surface I need to code circles which move from x to y and only if number xy is greater than xy.
Hard to explain but actually similar like they have it on
https://www.solarweb.com
click "click to try the preview now" on the top, than click "view demo" and choose the first system "Fronius AT Sattledt Hybrid 2"
and see the animation above on the left side.
I´ve still been able to get a circle running from the beginning of a div to the end. but only 1 circle! is it possible to have more circles in a row doing the same?
Maybe anyone can help me :)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Moving Bullet</title>
<meta charset="utf8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
#energieFluss {
width: 900px;
height: 500px;
border: 5px black solid;
overflow: hidden;
}
#bullet {
position: relative;
left: 50px;
top: 25px;
}
</style>
<body>
<div id="energieFluss" width="900px" height="500px" color="red">
<img id="bullet" src="ball-blau.png" height ="25" width= "25">
</div>
<script>
var Bullet = document.querySelector ("#bullet");
var currentPos = 0;
var requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
function moveBullet () {
currentPos += 8;
Bullet.style.left = currentPos + "px";
if (Math.abs(currentPos) >= 900) {
currentPos = -50;
}
requestAnimationFrame(moveBullet);
}
moveBullet ();
</script>
</body>
I think what you'll want to do here is create your image elements on the fly and then animate them. You could also do other fancy things like render on a canvas or use a JavaScript rendering library to do it more efficiently.
To create the elements on the fly, do something like this:
var balls = [];
// Run this in a loop to add each ball to the balls array.
var img = document.createElement("img");
img.src = "ball-blau.png";
img.height = 25;
img.width = 25;
document.getElementById("energieFluss").appendChild(img);
balls.push(img)
Post thought:
You could just statically define your image elements and animate multiple elements. If you already know how to animate one element, then you can apply that same knowledge to multiple.

Is this a viable method of relative benchmarking image load time?

The basic thing is, I, being obsessed with keeping track of everything I can easily...want to keep track of image load times. I don't expect/desire perfection (e.g. It is 100% accurate, down to the millisecond, for every image load). The goal is relative accuracy (e.g. If between 10am-11am, the average is 100ms load time. It suddenly starts spiking to an average of 3s a few hours later, I'd like to know that sort of thing).
Thoughts if this solution is sufficient for that? Or did I miss something obvious?
Yes, I know it doesn't report anything anywhere...that isn't the purpose of the example code, it is merely to calculate the time.
Example Code:
<!DOCTYPE html>
<html>
<head>
<title>Image Timing Test Page</title>
</head>
<body style='background-color: black; color: white;'>
This is a page.
<div class='test' id='t1'>
<img id="1" src='/test.jpg' />
</div>
<div class='test' id='t2'>
<img id='2' src='/test2.jpg' />
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="/jquery.imagesloadded.js" type="text/javascript"></script> <!-- https://github.com/desandro/imagesloaded -->
<script>
var Performance = window.performance.timing;
function ImageLoadTime(ImageTime, id)
{
if(Performance.loadEventEnd > 0)
{
console.log("Image Load Time ["+id+"] " + (ImageTime-Performance.navigationStart) + " milliseconds");
}
else
{
setTimeout(function(){ImageLoadTime(ImageTime, id)},250);
}
}
$(document).ready(function() {
$('.test').each(function(index)
{
var temp = $(this).attr('id');
$(this).imagesLoaded( function( $images )
{
var d = new Date();
ImageLoadTime(d.getTime(), temp);
});
});
});
</script>
</body>
</html>
This really depends on what you're doing, but why not use the Google Chrome developer tools for this? The network tab has a very nice display of all things coming over the wire, how much time they took for request and transfer, etc...
Here's a screenshot of it on this page:

having an image thumbnail size exactly across browser

I'm trying to come up with a script that will have a number of thumbnails across (in width) the browser. I want it to be able to be flush and not have gaps on the sides. The thumbnails should always be the same size, and I'm guessing that the only way is the change the spacing between each image. But can someone help me out? Let me know if my question is unclear.
EDIT: here's an example: http://www.beautyineverything.com/
Thank you!
Something like this?
<!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' xml:lang='en' lang='en'>
<head>
<title>sandbox</title>
<meta http-equiv='content-type' content='text/html; charset=UTF-8'/>
<script type='text/javascript' src='js/jquery-1.6.1.min.js'></script>
<script type='text/javascript'>
var MAX_IMAGE_WIDTH = 240;
$(function(){
$(window).resize(resizeImages).resize();
});
function resizeImages() {
var containerWidth = $('.imageContainer').innerWidth();
var numberOfImages = Math.ceil(containerWidth / MAX_IMAGE_WIDTH);
var imageWidth = Math.ceil(containerWidth / numberOfImages);
var imageWidthLast = containerWidth - (numberOfImages - 1) * imageWidth;
$('.imageContainer .image').css('width', imageWidth);
$('.imageContainer .image:nth-child(' + numberOfImages + 'n)').css('width', imageWidthLast);
$('.imageContainer .image').each(function(){
$(this).text($(this).innerWidth());
});
}
</script>
<style type='text/css'>
.imageContainer {
border:1px solid black;
overflow:hidden;
}
.image {
width:160px;
height:160px;
float:left;
}
</style>
</head>
<body>
<div class='imageContainer'>
<?php
for ( $n = 10; $n < 30; ++$n) {
$backgroundColor = '#' . sprintf('%02x%02x%02x', $n * 8, $n * 8, $n * 8);
echo "<div class='image' style='background-color:{$backgroundColor};'></div>";
}
?>
</div>
</body>
</html>
Resizing images could be written in a bit smarter way so that instead of 223+223+223+223+223+223+223+216 they would be 223+222+222+222+222+222+222+222. For this, width of each column should be calculated individually, so that widths of columns vary only by 1px max.
This might sound primitive but tables were designed for something like this only.
one solution is to have a table and put your images as background-image of the cells. (or put it inside and give it a height and width 100%) Its is easy to keep control over the cell size and margins/padding.. that is why they were so popular for structural stuff.
Before ruling the idea out, do note that (apart form the fact that i HATE to use tables for designing and positioning stuff, but do not hesitate to use it for what it was meant to be) making tables will reduce the amount of code to be written. use css to size the cells and table. use inline to put background image. no js functions wat-so-ever.
please drop a comment if you disagree of if i am missing something :)

Animated fish tank

I am working on this animated fish tank I got one of the fish to move I just can't figure out why the other 2 aren't moving. If someone can give me a hint onto where i might be screwing up or a web site that might help me. I have been looking all over and can't find nothing on this animated fish. Thanks
<!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>Fish tank</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!-- HIDE FROM INCOMPATIBLE BROWSERS
var fish1Position = 0;
horizontal = new Array(50);
var fillPosition = 10;
for(var i = 0; i < 50; ++i) {
horizontal[i] = fillPosition;
fillPosition += 10;
}
function fish1Swim() {
document.getElementById("fish1").style.left = horizontal[fish1Position] + "px";
++fish1Position;
if (fish1Position == 49)
fish1Position = 0;
}
function startSwimming() {
setInterval("fish1Swim()",100);
}
// STOP HIDING FROM INCOMPATIBLE BROWSERS -->
</script>
</head>
<body onload="startSwimming();">
<p><span id="fish1" style=
"position:absolute; left:10px; top:10px"><img src="fish1.gif" alt="Image of a fish" /></span></p>
<p><span id="fish2" style=
"position:absolute; righy:10px; top:120px"><img src="fish2.gif" alt="Image of a fish" /></span></p>
<p><span id="fish3" style=
"position:absolute; left:10px; top:220px"><img src="fish3.gif" alt="Image of a fish" /></span></p>
</body>
</html>
I dont know how to get the other two fish going does anyone have a web site or something that will explain it to me
Forgive me if I'm wrong, but it looks like you're only animating fish1 in your script.
You need to have a fish2Swim and fish3Swim; better yet a function called fishSwim where you pass the number of the fish in question.
I would make something like this:
function fishSwim(fishNumber) {
document.getElementById("fish"+fishNumber).style.left = horizontal[fishPos[fishNumber] + "px";
++fishPos[fishNumber];
if (fishPos[fishNumber] == 49)
fishPos[fishNumber] = 0;
}
So you would need to create an array Fish positions (called "fishPos" where the index would be the number of the fish. Feel free to ask me anything more about this :)

Categories

Resources