|
JavaScript - Two Fish Swimming Across Screen
Ok. My first fish is swimming across the screen perfectly fine. He starts from the left side and goes to the right side.
But for the second fish, he is on the right side and he won't swim to the left side. How do I get him to start swimming? Then he will stop after the interval of 80 reaches like the left one and then start over from the left to the right. Here is my code: Code: var fish1Position = 0;
var fish2Position = 0;
horizontal = new Array(80);
var fillPosition = 10;
for(var i = 0; i < 80; ++i) {
horizontal[i] = fillPosition;
fillPosition += 10;
}
horizontal2 = new Array(80);
var fillPosition2 = 10;
for(var i2 = 80; i2 > 0; i2--) {
horizontal2[i2] = fillPosition2;
fillPosition2 = fillPosition2 - 10;
alert(fillPosition2);
}
function fish1Swim() {
document.getElementById("fish1").style.left = horizontal[fish1Position] + "px";
++fish1Position;
if (fish1Position == 79)
fish1Position = 0;
}
function fish2Swim() {
document.getElementById("fish2").style.right = horizontal2[fish2Position] + "px";
++fish2Position;
if (fish2Position = 79)
fish2Position = 0;
}
function startSwimming() {
setInterval("fish1Swim()",100);
setInterval("fish2Swim()",100);
}
Similar TutorialsI want to have a screen (50% transparent white) pop up over an image on rollover with a button that, when pushed, will swap the image with a different one. Anyone know the easiest way to do this. The image is in a scrolling bunch of images similar to this: http://kellyperso.com
I use a program that produce a graphic (imagine a sinusoid, more or less). There is no opportunity to obtain from the program an output of the coordinates of the points of this curve. I desperately tried a way to achieve this, for example using a program that transform a normal raster image in a vector, and after read the vector, but all this is not precise nor accurate. I wonder if there is a way to obtain this result. Bye All- I have a page coded that pulls files from a directory using PHP then sets them up using a Flash type player to stream the video. My problem is that I have to resize the video window for each computer I play it on. They all have different resolutions. I was able to use: Code: <script type="text/javascript" src="/jwplayer/swfobject.js"></script>
<script type="text/javascript">
var x = (+screen.width);
var y = (+screen.height);
if (x == '1920' & y == '1080')
{
var xn = 1440;
var yn = 900;
document.write(xn);
document.write(yn);
}
if (x == '1024' & y == '600')
{
var xn = 900;
var yn = 400;
document.write(xn);
document.write(yn);
}
swfobject.registerObject("player","9.0.98","/jwplayer/expressInstall.swf");
</script>
To pull out the current Resolution of the user and pass to a variable the resolution I want the video to be. Here is where the video code is Code: <object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player" width="900" height="400">
<param name="movie" value="/jwplayer/player.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<?
echo "<param name='flashvars' value='file=../Movies$full_dir.mp4 =../Movies$full_dir.jpg' />";
?>
<object type="application/x-shockwave-flash" data="/jwplayer/player.swf" width="900" height="400">
<param name="movie" value="/jwplayer/player.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<?
echo "<param name='flashvars' value='file=../Movies$full_dir.mp4&image=/Movies$full_dir.jpg' />";
?>
<p><a href="http://get.adobe.com/flashplayer">Get Flash</a> to see this player.</p>
</object>
</object>
In the video part, where it says Height and Width, I just need to have it take the 2 variables i created depending on the resolution used. Variables xn or yn. Any ideas? Please Please help! been stumped on this all afternoon!! Thanks Defyer! Hi I have the code below which geocodes a postcode and returns a lat a long value. Its standard code from Google maps. I just want to print these values to a screen. I tried document.write(value) but this produces nothing. Any help would be greatly appreciated. Code: <script type="text/javascript">
var localSearch = new GlocalSearch();
function usePointFromPostcode(postcode)
{
localSearch.setSearchCompleteCallback(null,
function()
{
if (localSearch.results[0])
{
var resultLat = localSearch.results[0].lat;
var resultLng = localSearch.results[0].lng;
}
document.write(resultLat+resultLng);
//alert("Latitude: " + resultLat + "\nLongitude: " + resultLng + " q");
});
localSearch.execute(postcode + ", UK");
}
</script>
TIA Stew Hi friends, I have a dropdown menu,when i select one item from the dropdown menu,i want a checkbox to be created on the screen.How do i achieve this? Thank You Madhusudan I am using this javascript code to detect screen size and display an alternate css. Code: if (screen.width<1600)
{
document.write('<link rel="stylesheet" href="<?php echo $path ?>/css/templateadjust.css" type="text/css" />');
}
This works fine in FF and Chrome but doesn't seem to work in IE. Any idea why? Hi guys, I'm completely new here and seeking some help on this js: http://www.javascriptkit.com/script/...ow/index.shtml i'm building my picture website, an example is this one: http://www.lucagodina.com/mello/test.htm do you know how can i have all the thumbnails on the same row, and scrolling? because if i've let's say 100 pictures, the thumbnails will cover the pics itself! Would also be great to have play-next-previous button... i know i'm asking a lot! hope someone can help me out! Hi, I want a link on my website where when you press it, it print screens. somthing like, <a href=printscrn();">Print Screen</a> anyone any ideas? Simon 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> Hi all, I'm new to javascript and im trying to teach myself how to use it, however, ive come accross a problem. I'm using this code embeded in a HTML page for rollover images: Code: <script language="JavaScript" type="text/javascript">
<!--
if (document.images) {
homebuttonup = new Image();
homebuttonup.src = "./Images/nav/home2.png" ;
homebuttondown = new Image() ;
homebuttondown.src = "./Images/nav/home2.png" ;
newsbuttonup = new Image();
newsbuttonup.src = "./Images/nav/news.png" ;
newsbuttondown = new Image() ;
newsbuttondown.src = "./Images/nav/news2.png" ;
gallerybuttonup = new Image();
gallerybuttonup.src = "./Images/nav/gallery.png" ;
gallerybuttondown = new Image() ;
gallerybuttondown.src = "./Images/nav/gallery2.png" ;
}
function buttondown( buttonname )
{
if (document.images) {
document[ buttonname ].src = eval( buttonname + "down.src" );
}
}
function buttonup ( buttonname )
{
if (document.images) {
document[ buttonname ].src = eval( buttonname + "up.src" );
}
}
// -->
</script>
<a href="index.html?cmd=welcome" onmouseover="buttondown('homebutton')"onmouseout="buttonup('homebutton')">
<img src="./Images/nav/home2.png" name="homebutton" border="0" /></a>
<a href="about.html?cmd=welcome" onmouseover="buttondown('newsbutton')"onmouseout="buttonup('newsbutton')">
<img src="./Images/nav/news.png" name="newsbutton" border="0" /></a>
<a href="services.html?cmd=welcome" onmouseover="buttondown('gallerybutton')"onmouseout="buttonup('gallerybutton')">
<img src="./Images/nav/gallery.png" name="gallerybutton" border="0" /></a>
This works completly fine in 1280 x 800 but goes mental when you hover over it in 1024 x 768 screen resolution. Can anyone help please, it would be greatly appreciated! I wish to create an applett, which i am working on, Though I want to know if there is any way to: 1) Take screenshots of entire web page 2) Take screenshots of a certian part of the web page selected by the user with a Rectangle tool 3) Take screenshots of a certian part of the web page selected by the user with a FreeForm tool Im not asking for a full code or anything, But I just wish to know in what way could i go about this? Hi Guys, I would like to be able to change my webpage background image according to the screen resolution the user uses so: if screen resolution is greater than or equals to 1200*600 then background = mybackground.jpg no-repeat else background = #000000 THANKS A MILLION! Hey guys, I was trying to make a Javascript game that moves an image across the screen randomly. Instead of executing properly, it just shows the image's starting point, and stops. No movement. Is there anyway I could fix this? Thanks, Fizz. Code: <html>
<head>
<title>Image Mover</title>
<style>
DIV.movable { position:absolute; }
</style>
</head>
<script language="javascript">
function Start() {
var x = 5; //Starting Location - left
var y = 5; //Starting Location - top
var dest_x = Math.floor(Math.random()*650); //Ending Location - left
var dest_y = 500; //Ending Location - top
var interval = 10; //Move 10px every initialization
moveImage();
}
function NewDest() {
var x = 5; //Starting Location - left
var y = 5; //Starting Location - top
var dest_x = Math.floor(Math.random()*650); //Ending Location - left
var dest_y = 500; //Ending Location - top
var interval = 10; //Move 10px every initialization
moveImage();
}
function moveImage() {
//Keep on moving the image till the target is achieved
if(x < dest_x) x = x + interval;
if(y < dest_y) y = y + interval;
//Move the image to the new location
document.getElementById("ufo").style.top = y+'px';
document.getElementById("ufo").style.left = x+'px';
if ((x+interval < dest_x) && (y+interval < dest_y)) {
//Keep on calling this function every 100 microsecond
// till the target location is reached
window.setTimeout('moveImage()',30);
if (x == dest_x) && (y == dest_y) {
NewDest();
}
}
}
</script>
<body onload="Start()">
<div id="ufo" class="movable">
<img src="Mouse.jpg" alt="mouse" WIDTH = 30/>
</div>
</body>
</html>
Hi there I know this picture_viewr js is a fullscreen slide Would it be possible to set a screen size (700x500 e.g.) and then set a background color or the part that would be outside this window??? Thx a lot allberto http://www.alfaaudiovisual.com/pictu...er/ByB/ByB.htm Hi nerds, We have some problems with some javascript code. We are creating a new button like the ones known from addthis/sharethis and would like the same behavior as there popups. We have tried by putting together some different scripts, and the action is about right. We do still have one problem, and that is the position of the popup. If the button is placed at the right site of a website, it floats out of the screen, making scrollbars. Also it don't have same position behavior in Firefox, IE, Opera ... The button can be seen he http://www.langthis.com The code related to this problem should bed this: Code: function move_box(an, box)
{
var cleft = 0;
var ctop = 0;
var obj = an;
while (obj.offsetParent)
{
cleft += obj.offsetLeft;
ctop += obj.offsetTop;
obj = obj.offsetParent;
}
var winW = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth;
var winH = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight;
if (cleft+box.offsetWidth > winW) {
cleft = cleft - box.offsetWidth - 30;
if (cleft < 3)
cleft = -3;
}
box.style.left = cleft + 'px';
ctop += an.offsetHeight + 8;
// Handle Internet Explorer body margins,
// which affect normal document, but not
// absolute-positioned stuff.
if (document.body.currentStyle &&
document.body.currentStyle['marginTop'])
{
ctop += parseInt(document.body.currentStyle['marginTop']);
}
if (ctop+box.offsetHeight > winH) {
ctop = ctop - box.offsetHeight - 20;
if (ctop < 3)
ctop = -3;
}
box.style.top = ctop + 'px';
}
If someone would be interested in rewriting the script, we would credit this in our about page. Else we would be thankful if someone just could help with the existing code. Best regards Langthis team I have been using wz_tooltip and have a big tooltip that needs to be opened at the top of the screen, not by the cursor in order to be read. What do I add to the script to do this? Thanks, Wina Hi Everyone, I have just inherited a website which has a javascript menu tab and picture fader on the home page. This moves through 6 states changing a menu tab and main picture beneath to make it look like you're flicking through the menu yourself. This works perfectly, apart from the fact that every time the picture changes the page flicks back to the top. Very annoying if you have scrolled down are reading things at the bottom of the page!! The page uses jquery-1.2.3.pack.js. I am a PHP man just starting to learn Javascript and don't understand why it is doing this, can anyone help ??? The Relevant Code is: Code: <script>
var scurrent_tab='tab1';
var scurrent_click_tab='';
var arTabsMain = new Array
(
"tab1",
"tab2",
"tab3",
"tab4",
"tab5",
"tab6",
"bottomtab"
);
function ChangeMainPictureClick(s)
{
bStopAutoLoad = true;
ChangeMainPicture(s);
}
function ChangeMainPicture(s)
{
scurrent_click_tab = s;
$("#tabs_content_container").fadeOut("slow",
function()
{
$("#tabs_content_container").html($('#tabs_content_container_'+scurrent_click_tab).html()).fadeIn("slow");
}
);
$('#main_tab_tab1_img').attr('src','images/tab_tab1_off.jpg');
$('#main_tab_tab2_img').attr('src','images/tab_tab2_off.jpg');
$('#main_tab_tab5_img').attr('src','images/tab_tab5_off.jpg');
$('#main_tab_tab4_img').attr('src','images/tab_tab4_off.jpg');
$('#main_tab_tab6_img').attr('src','images/tab_tab6_off.jpg');
$('#main_tab_tab3_img').attr('src','images/tab_tab3_off.jpg');
$('#main_tab_'+s+'_img').attr('src','images/tab_'+s+'_on.jpg');
scurrent_tab = s;
}
$('#main_tab_tab1').hover
(
function(){$('#main_tab_tab1_img').attr('src','images/tab_tab1_on.jpg');},
function(){if(scurrent_tab=='tab1')return;$('#main_tab_tab1_img').attr('src','images/tab_tab1_off.jpg');}
);
$('#main_tab_tab2').hover
(
function(){$('#main_tab_tab2_img').attr('src','images/tab_tab2_on.jpg');},
function(){if(scurrent_tab=='tab2')return;$('#main_tab_tab2_img').attr('src','images/tab_tab2_off.jpg');}
);
$('#main_tab_tab4').hover
(
function(){$('#main_tab_tab4_img').attr('src','images/tab_tab4_on.jpg');},
function(){if(scurrent_tab=='tab4')return;$('#main_tab_tab4_img').attr('src','images/tab_tab4_off.jpg');}
);
$('#main_tab_tab3').hover
(
function(){$('#main_tab_tab3_img').attr('src','images/tab_tab3_on.jpg');},
function(){if(scurrent_tab=='tab3')return;$('#main_tab_tab3_img').attr('src','images/tab_tab3_off.jpg');}
);
$('#main_tab_tab6').hover
(
function(){$('#main_tab_tab6_img').attr('src','images/tab_tab6_on.jpg');},
function(){if(scurrent_tab=='tab6')return;$('#main_tab_tab6_img').attr('src','images/tab_tab6_off.jpg');}
);
$('#main_tab_tab5').hover
(
function(){$('#main_tab_tab5_img').attr('src','images/tab_tab5_on.jpg');},
function(){if(scurrent_tab=='tab5')return;$('#main_tab_tab5_img').attr('src','images/tab_tab5_off.jpg');}
);
function AutoLoadTopic()
{
if(bStopAutoLoad)
{
window.setTimeout(function() {AutoLoadTopic();}, 8000);
return true;
}
iCurrentSlide++;
if(iCurrentSlide >= arTabsMain.length-1)
iCurrentSlide = 0;
ChangeMainPicture(arTabsMain[iCurrentSlide]);
window.setTimeout(function() {AutoLoadTopic();}, 8000);
}
var bStopAutoLoad = false;
var iCurrentSlide = 0;
window.setTimeout(function() {AutoLoadTopic();}, 8000);
</script>
// ######
<script>
$('#button_start_bottomtab').hover
(
function(){$('#button_start_bottomtab_img').attr('src','images/start_bottomtab_pic_on.gif');},
function(){$('#button_start_bottomtab_img').attr('src','images/start_bottomtab_pic.gif');}
);
</script>
The code 'works' as in there are no issues in its functionality, I just want it work in a better way. Any help or ideas would be greatly appreciated. Hello there I am using the below code to resize images posted on a forum, however when the page is loading it loads the images full size on sreen stretching the page to however wide the largest picture is and only resizes them once every picture has loaded and the page then goes back to normal width. Does anyone know how I could make it so the images only display once they've resized ? Code: <script>
window.onload = resizeimg;
function resizeimg()
{
var theImages = document.getElementsByTagName('img');
for( var i = 0; i < theImages.length; i++ )
{
im = theImages[ i ];
if( im.width > 468 && !/\/(pic1\.jpg|pic2\.jpg)/i.test( im.src ) )
{
im.style.width = '466px';
im.style.border = "1px solid #000000";
im.style.padding = "2px";
im.style.marginBottom = "1px";
im.onclick = function()
{
window.open( this.src, 'fullscale','width='+ this.width +', height='+ this.height +',scrollbars=1,resizable=1').focus();
}
try{ im.style.cursor = 'hand';}catch(e){ im.style.cursor = 'pointer'; }
im.title = 'Click Here To See Image Full Size ';
}
}
}
</script>
Hi All! I have a web application with an aspanel, users can add images, the program automatically make the thumbnail. when user click on thumbnail they can see a pop up modal page. Images are in different sizes, so what I need to achieve is to get the screen resolution or browser visible area and re-size the image according to this resolution. (users could have different type of computer screen with different resolution), I need a JavaScript or jquery code. Thanks in advance I have a small webpage which checks for the dimensions of a screen before loading a website, then loading one (of several) which would fit the screen best. Originally this code was fine, until I decided to mesh with it some code that would open a window to specific dimensions and then some other code to remove scroll bars and menus... now leaving me just the lower option which works properly. I would like to sort this out so that each page loads as it should, in accordance with the conditions. Presently only the bottom part of the code works: "if (res!='1' && res!='2' && res!='3') PopupCenter ('http://www.meta.projectmio.com/800.html','MyWindow',800,531)" So the window will open at 800x531 and load ../800.html, but the other conditions will not work, unless I c&p them to this lower part of the code. I think I've gotten something wrong. website: www.meta.projectmio.com/pop.html Thanks. |
|||||||