Animated fish tank - javascript

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 :)

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>

Trying to accomplish a 'slideshow' effect loading multiple pages

I'm fielding a request that someone essentially wants one master page with their logo at the top, and the remainder of the page will load a series of pages (populated by a static array) and then repeat itself.
My intent is to have a page load in the 'content' div element, wait a period of time (I only listed 2 seconds for testing purposes), and then the next page loads. When it reaches the end of the array, I want the array to reset so that this is continuously loading.
I'm sure there are probably better ways to do this, but through my research this seemed the simplest.
Any help, or pointing me in another direction is all greatly appreciated.
Editing for clarity:
What I'm looking for is one master page, which just simply has a header at the top of the page. The rest of the page would be composed of a single div element (or iFrame if need be) and the content of said element would change after a determined amount of time, automatically, with no input. The element would initially load 'testdata.php' which would be composed of multiple database calls, after a determined amount of time, that div element would reload 'testdata1.php', which is composed of completely different database calls.
I hope this helps better describe what I am hoping to achieve.
What I have so far:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<script type="text/javascript" src="scripts_css/jquery.js"></script>
</head>
<body>
<div style="background-color: #E0E0E0; height: 150px; width: 100%; margins: 0 auto;">
<img src="images/logo.png"/>
</div>
<div id="content" style="height: 850px;"></div>
</body>
<script>
var linkArray=[ "testdata.php",
"testdata1.php"];
for (var i=0; i < linkArray.length; i++) {
setTimeout(function(){$("#content").load(linkArray[i])},2000);
if (i === (linkArray.length-1))
i = 0;
}
</script>
I know this isn't very helpful, and it doesn't directly address your problem, but you might want to try using jQuery (http://jquery.com/). You could have something like this:
$(document).ready(function() {
// Set timeout to 2 seconds
var array = ['page1', 'page2'];
document.write(array[1].href);
});
Or, you could use some server-side script like ruby, or PHP.
This ended up doing the trick for me:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<script type="text/javascript" src="scripts_css/jquery.js"></script>
</head>
<body>
<div style="background-color: #E0E0E0; height: 150px; width: 100%; margins: 0 auto;">
<img src="images/logo.png"/>
</div>
<div id="content" style="height: 850px;"></div>
</body>
<script>
var linkArray=[ "testdata.php",
"testdata1.php"];
var timeout = 0;
var counter = 0;
var arrayCount = linkArray.length;
changeContent(timeout, counter, arrayCount);
function changeContent(def_timeout, def_counter, def_arrayCount) {
//setTimeout(function() {$("#content").load(linkArray[def_counter])}, def_timeout);
$("#content").load(linkArray[def_counter]);
def_counter++;
if (def_counter >= def_arrayCount)
def_counter = 0;
def_timeout = def_timeout + 5000;
setTimeout(function() {changeContent(def_timeout, def_counter, def_arrayCount)}, 5000);
}
</script>

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 :)

working with traveling animations

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.

Using JavaScript to "animate" my webpage

I thought I'd write a simple script to animate my webpage a little.
The basic idea was to make a div grow bigger, when I push a button once and then shrink to it's original size, when I push it again. I handled the growing part well, but I can't get it to shrink again.
I'm including a complete example, could you help me fix it?
<!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>Test</title>
<meta http-equiv="Content-Language" content="Estonian" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" />
</head>
<body>
<script type="text/javascript">
var i;
var increasing = new Boolean("true");
var height;
function testFunction() {
height = parseInt(document.getElementById("testDiv").offsetHeight);
if( increasing == true ) {
i = height + 4;
document.getElementById("testDiv").style.height = i + "px";
if( height >= 304 ) {
increasing = false;
}
else {
pause(30);
}
}
else {
i = height - 4;
document.getElementById("testDiv").style.height = i + "px";
if( height <= 104 ) {
increasing = true;
}
else {
pause(30);
}
}
}
function pause(ms) {
setTimeout("testFunction()", ms);
}
</script>
<button id="button" type="button" onclick="testFunction();">Do it!</button.
<div id="testDiv" style="border: 2px solid black; width: 400px; height: 100px; text-align: center;">
Hello!
</div>
</body>
</html>
Use a standard library like jQuery to do this, don't do it yourself as it won't be cross-browser for sure.
With jQuery, you can do things like this:
$("#div-id").animate({"height": 300}, 1000);
That'll change the div height to 300 px in 1000 ms = 1 second.

Categories

Resources