|
JavaScript - I Want To Create Two Butterflies Going Across The Screen At The Same Time.
I want to create a javascript that will have two butterflies flying across the screen at the same time. One will go from the bottom left to the top right and the other will go from the top left to the bottom right. I have the first part of the code, but can't figure out how to get the second part of the code. I know I need to add another variable, but after that i get confused.
Thanks for any help. <--------------------------- BEGIN 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>Butterfly</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" href="js_styles.css" type="text/css" /> <script type="text/javascript"> /* <![CDATA[ */ var a; var topPosition = 150; var leftPosition = 0; function flyButterfly() { var butterfly = document.getElementById("butterfly"); butterfly.style.left = leftPosition + "px"; butterfly.style.top = topPosition + "px"; butterfly.style.visibility = "visible"; topPosition -= 3; leftPosition += 10; if (topPosition <= 0) { topPosition = 150; leftPosition = 0; } } /* ]]> */ </script> </head> <body onload="a = setInterval('flyButterfly()', 100);"> <p><img src="butterfly.gif" id="butterfly" style="position: absolute; left: 0px; top: 0px; visibility:hidden" alt="Image of a butterfly" height="120" width="150" /></p> <h1>Butterfly</h1> <p>According to Wikipedia:</p> <blockquote><p>A butterfly is an insect of the order Lepidoptera, it belongs to either the Hesperioidea (the skippers) or Papilionoidea (all other butterflies) Superfamilies. Some authors have also suggested the inclusion of the superfamily Hedyloidea, the American butterfly moths. They are notable for their unusual life cycle with a larval caterpillar stage, an inactive pupal stage and a spectacular metamorphosis into a familiar and colourful winged adult form. The diverse patterns formed by their brightly coloured wings and their erratic-yet-graceful flight have made butterfly watching a popular hobby.</p></blockquote> </body> </html> <--------------------------- END CODE ------------------------------> Similar TutorialsDear all, I would like to know if javascript can detect the screen idle time, if certain time come up in idle, then it will redirect to another page, any help will be appreciate, thanks! Eddie So this is my first thread and I am a noob at javascript so please forgive obvious mistakes. I am try to make images float across the screen horizontally. Ideally I would like them to come from both sides and be at different y positions. The problem I am having is that I can only seem to get one to move at a time. Another problem is that when they move off to the right of the screen it expands the viewable size of the site. So here's what I've come up with thus far. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<title>Image Mover</title>
<style>
DIV.movable { position:absolute; }
body {
background-color: #0CF;
}
</style>
<script language="javascript">
var x = 5; //Starting Location - left
var y = 5; //Starting Location - top
var dest_x = 1000; //Ending Location - left
var dest_y = 5; //Ending Location - top
var interval = 1; //Move 10px every initialization
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("cloud").style.top = y+'px';
document.getElementById("cloud").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()',100);
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body background="backgroundgradient.png" onload="moveImage()">
<div id="cloud" class="movable">
<img src="cloud01.png" />
</div>
<script language="javascript">
var x = -100; //Starting Location - left
var y = 5; //Starting Location - top
var dest_x = 1500; //Ending Location - left
var dest_y = 5; //Ending Location - top
var interval = 1; //Move 10px every initialization
function moveImage01() {
//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("plane").style.top = y+'px';
document.getElementById("plane").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('moveImage01()',10);
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body background="web_layout/backgroundgradient.png" onload="moveImage01()">
<div id="plane" class="movable">
<img src="plane.png" />
</div>
</body>
</html>
Any help is greatly appreciated. Thanks Hi Code: var err_str="";
function validate_grid(value,id,ind)
{
$("#result").html(" ").show();
if(ind==1 || ind==2)
{
var patt=/^([0][0-9]|[1][0-9]|[2][0-3])[:]{1}[0-5][0-9]$/;
if(!patt.test(value))
{
mygrid.setCellTextStyle(id,ind,"background-color:yellow;");
if(err_str!="")
err_str+="\n"+(ind+1)+".Enter numbers and : only..";
else
err_str=(ind+1)+".Enter numbers and : only";
return false;
}
else
{
mygrid.setCellTextStyle(id,ind,"background-color:white;");
return true;
}
}
}
alert(err-str);
here ind==1 is from_time and ind==2 is to_time,i need to validate time as to_time must be always greater than from-time,if condition fails an alert msg should populate.time format is[05:00]as it is in string format im unable to do the validation for it.(ex:from-time=08:00 to-time=07:59 condition fails) thank you. hi im using dhtml xgrid where i need to do validation for time ,(from-time and to-time i.e ind==1 and ind==2 ) to-time must be greater than from-time else i need to alert a message to-time must be greater than from-time. can any one send me the code for it time format is[05:00]. Code: var err_str="";
function validate_grid(value,id,ind)
{
$("#result").html(" ").show();
if(ind==1 || ind==2)
{
var patt=/^([0][0-9]|[1][0-9]|[2][0-3])[:]{1}[0-5][0-9]$/;
if(!patt.test(value))
{
mygrid.setCellTextStyle(id,ind,"background-color:yellow;");
if(err_str!="")
err_str+="\n"+(ind+1)+".Enter numbers and : only..";
else
err_str=(ind+1)+".Enter numbers and : only";
return false;
}
else
{
mygrid.setCellTextStyle(id,ind,"background-color:white;");
return true;
}
}
}
Hello im using dhtmlx grid in this cells i have from time and to time (i.e ind==1 and ind==2) i need to validate time where to-time must be greater than from-time else it should alert an message,i have writeen a normal Regular expression for the time validation.as the time is i string format i.e[05:00],please can any one send me code for that. Code: var err_str="";
function validate_grid(value,id,ind)
{
if(ind==1 || ind==2)
{
var patt=/^([0][0-9]|[1][0-9]|[2][0-3])[:]{1}[0-5][0-9]$/;
if(!patt.test(value))
{
mygrid.setCellTextStyle(id,ind,"background-color:yellow;");
if(err_str!="")
err_str+="\n"+(ind+1)+".Enter numbers and : only..";
else
err_str=(ind+1)+".Enter numbers and : only";
return false;
}
else
{
mygrid.setCellTextStyle(id,ind,"background-color:white;");
return true;
}
}
}
1 down vote favorite I do have the countdown script (see link below) to display the time between current time and the date given in real-time. However, I want to achieve to display the time difference between a given start and end time. Right now, it calculates from the current server time to the end time. I want to be able to set up my own start time and end time. Here is what I have: http://jsfiddle.net/BgEtE/ thank you for help hi, can some one help me how to get the time and date difference? given two time and date with the following format like in textbox A: 2011-05-03 17:35:47.0 and textbox B: 2011-05-03 16:35:47.0 then the output would be: 0 days, 1 hour, 0 minutes, 0 seconds regards, verve I'm not really a Java writer, so I don't know how to do this myself, though I imagine it would be pretty simple. I am looking to add a script to a webpage that allows users to input a time manually, and have it converted to GMT/Zulu time and display the converted time. I have seen a lot of time zone conversion scripts online, but they all just convert whatever the current system time is to another time zone. I am looking for a script that allows users to convert a time and show the zulu time, for times other than the current time. The time zone the inputed local time would be in is +4:30 (Kabul). I don't really care about style or aestehtics, just a simple script I can insert into a web page to have a time input field. The converted output time can appear in another field, a popup bubble, etc, again style isn't really an issue. It's really just to help people in my job who need to know what the GMT/Zulu time was for certain local times after the fact. One would think it shouldn't be that hard to just subtract 4:30 in your head, but apparently it is. Sorry if just asking for code outright like this is frowned upon. This is my first time doing JavaScript I don't what I did wrong here, but the problem its not showing up the current date and time. Code: <script language = "JavaScript" type="text/javascript">
now = new Date();
localtime = now.toString();
utctime = now.GMTString();
document.wite("<b>localtime</b>" + localtime + "</br>");
document.write("<b>utctime</b>" + utctime);
</script>
This is what supposed to look like I have tried using different browser chrome,IE9,Maxtor, and Opera my OS is Win7 Hi there! Well, I recently found the Image clock code, and I am loving it! But, I would like it to only display pacific time, not retrieve the time from a users browser. Here's my code: Code: <script type="text/javascript">
/***********************************************
* JavaScript Image Clock- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/
var imageclock=new Object()
//Enter path to clock digit images here, in order of 0-9, then "am/pm", then colon image:
imageclock.digits=["/users/1712/49/18/66/album/c012.png", "/users/1712/49/18/66/album/c112.png", "/users/1712/49/18/66/album/c211.png", "/users/1712/49/18/66/album/c311.png", "/users/1712/49/18/66/album/c411.png", "/users/1712/49/18/66/album/c511.png", "/users/1712/49/18/66/album/c611.png", "/users/1712/49/18/66/album/c711.png", "/users/1712/49/18/66/album/c811.png", "/users/1712/49/18/66/album/c911.png", "/users/1712/49/18/66/album/cam11.png", "/users/1712/49/18/66/album/cpm13.png", "/users/1712/49/18/66/album/ccolon11.png"]
imageclock.instances=0
var preloadimages=[]
for (var i=0; i<imageclock.digits.length; i++){ //preload images
preloadimages[i]=new Image()
preloadimages[i].src=imageclock.digits[i]
}
imageclock.imageHTML=function(timestring){ //return timestring (ie: 1:56:38) into string of images instead
var sections=timestring.split(":")
if (sections[0]=="0") //If hour field is 0 (aka 12 AM)
sections[0]="12"
else if (sections[0]>=13)
sections[0]=sections[0]-12+""
for (var i=0; i<sections.length; i++){
if (sections[i].length==1)
sections[i]='<img src="'+imageclock.digits[0]+'" />'+'<img src="'+imageclock.digits[parseInt(sections[i])]+'" />'
else
sections[i]='<img src="'+imageclock.digits[parseInt(sections[i].charAt(0))]+'" />'+'<img src="'+imageclock.digits[parseInt(sections[i].charAt(1))]+'" />'
}
return sections[0]+'<img src="'+imageclock.digits[12]+'" />'+sections[1]+'<img src="'+imageclock.digits[12]+'" />'+sections[2]
}
imageclock.display=function(){
var clockinstance=this
this.spanid="clockspan"+(imageclock.instances++)
document.write('<span id="'+this.spanid+'"></span>')
this.update()
setInterval(function(){clockinstance.update()}, 1000)
}
imageclock.display.prototype.update=function(){
var dateobj=new Date()
var currenttime=dateobj.getHours()+":"+dateobj.getMinutes()+":"+dateobj.getSeconds() //create time string
var currenttimeHTML=imageclock.imageHTML(currenttime)+'<img src="'+((dateobj.getHours()>=12)? imageclock.digits[11] : imageclock.digits[10])+'" />'
document.getElementById(this.spanid).innerHTML=currenttimeHTML
}
</script>
<DIV STYLE="position:absolute; top:260px; left:215px; width:109px; height:28px">
<FONT SIZE="+2" COLOR="black">
<TABLE BORDER="0" cellpadding="10" CELLSPACING="0" TOP MARGIN="0">
<TR>
<TD WIDTH="109" HEIGHT="28" BACKGROUND="/users/1712/49/18/66/album/clock210.png" VALIGN="top">
<script type="text/javascript">
new imageclock.display()
</script>
</TD>
</TR>
</TABLE>
</DIV>
Much appreciated! Hi - I have a date in my javascript like this: Mon Dec 12 00:00:00 UTC+0430 2011 I need to convert it to a date without the offset (the +0430). I actually changed my computer's timezone to generate this offset - we have uses placing orders on our site who don't use UTC and it's throwing our orders out as they need to select a delivery date but it's passing the date with the offset. How do I convert a date to UTC time? Thanks I 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
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 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 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 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>
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);
}
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? |
|||||||