|
JavaScript - Somehow Onmouseover Button Animation Stopped Functioning.
on this site. There are no validation errors. firebug says my linkOut function is not defined... but I have this:
Code: function linkOut(link)
{
var image = link.getElementsByTagName("IMG")[0];
image.src = image.src.replace("H2.png","H.png");
}
not sure where to go from here. Similar Tutorialsfor example i have: a picture of a man sitting down a gif of him going from the sitting position to the standing position and picture of him standing i want the man to sit when the page is loaded, go to the standing animation onMouseOver, and when the animation is complete, stop the animation by going to the standing picture i have heard of two ways to do this but i dont know the best way, or if there is a third alternative with PHP or another language i could make a timer of the same period of time it takes for the standing gif to complete. i havent done any testing but i would suspect that there would be a bug with this method. some older computers load slower, and the gif may finish its animation before the timer is complete, or the timer may complete before the gif has finished its animation. this might cause gif to start a new cycle before the browser changes pictures, or the browser might change pictures before the man is finished standing. if you know for a fact that this will not happen, or if its occurrence is extremely rare, please alleviate my fears the second option is to break the gif down with some piece of software into jpegs and make many timers to reassemble the animation. this method was not suggested to me, i came up with it myself, so i dont trust that this is the best way to do things properly anyone who has ever done this sort of rollover animation in any language, your input would be greatly appreciated Hi, I have created a site and on one page it uses 2 divs side by side to display text information. in the left hand div it contains 8 links. these links when clicked load up text stored in separate text files and display it in the right hand div. The code below was working when i ran it from my mac but when i try to load it off the webhost it fails to execute. Code: $(document).ready(function() {
$("#mc").click(function() {
$("#innertext").load('mc.txt');
});
$("#sd").click(function() {
$("#innertext").load('sd.txt');
});
$("#ma").click(function() {
$("#innertext").load('ma.txt');
});
$("#rtm").click(function() {
$("#innertext").load('rtm.txt');
});
$("#cm").click(function() {
$("#innertext").load('cm.txt');
});
$("#r").click(function() {
$("#innertext").html('r.txt');
});
$("#bp").click(function() {
$("#innertext").load('bp.txt');
});
$("#pc").click(function() {
$("#innertext").load('pc.txt');
});
});
Code: <div class="wrapper p2">
<ul class="list1 col-1">
<li>> <a href="javascript:void(0);" onclick="function("mc");" id="mc">Consultancy</a></li>
<li>> <a href="javascript:void(0);" onclick="function("sd"); id="sd">Strategy</a></li>
<li>> <a href="javascript:void(0);" onclick="function("ma"); id="ma">Market Assessment</a></li>
<li>> <a href="javascript:void(0);" onclick="function("rtm"); id="rtm">Routes to Market</a></li>
</ul>
<ul class="list1 col-2">
<li>> <a href="javascript:void(0);" onclick="function("cm"); id="cm">Change management</a></li>
<li>> <a href="javascript:void(0);" onclick="function("r"); id="r">Restructuring</a></li>
<li>> <a href="javascript:void(0);" onclick="function("bp"); id="bp">Planning</a></li>
<li>> <a href="javascript:void(0);" onclick="function("pc"); id="pc">Project management</a></li>
</ul>
</div>
here is a link to the page on the webhost-- http://herkes.host56.com/index-2.html Any ideas to why this does not work? any help is appreciated Hello! I was looking for a way to pause animated gifs per command, and I found a thread in this forum with the appropriate instruction: http://www.codingforums.com/showthread.php?t=177543 I used the code example from there and adjusted it to my needs on my website: http://www.baelavay.com/v6 The code works as it should! (The button is in the top-left corner) But there are 2 things I would want to improve. Unfortunately I can't fix them myself, maybe you can help 1) I don't want to use a button for pausing the gifs. Instead, I want the gifs to pause when Code: <img id="tiles-img" ...> is clicked. So what I tried is to replace the line Code: obj=document.getElementById('button');
with Code: obj=document.getElementById('tiles-img');
But then, it doesn't work anymore. Why? 2) (*edit: RESOLVED) The button only starts working from the 2nd click on? (No gif pausing at 1st click) Thank you in advance. I'm attempting to have the example code section which is currently commented out to keep from code spamming this forum to react with the IF statement created within the FUNCTION that I called "calc". The code in the example section does work, however the FUNCTION or IF statement is not working. Could anyone help me visualize the problem. Thank you Code: <select name="ship_country" id="ship_country" style="min-width:200px;" onclick="calc;">
<option value="" selected="selected"></option>
<option value="United States">United States</option>
<option value="Canada">Canada</option>
</select>
<script type="text/javascript">
function calc() {
if (document.getElementById("ship_country").value = ("United States");) {
// Example comment representing a lot nonsequential code pertaining to this topic.
}
}
</script>
I have a form and javascript that doesn't work correctly. I think there's a problem with the javascript, but it's possible the form is the culprit. I'm new at this. Here is the form code for a search boxx: Code: <form id="search" method="get" name="search" action="promotions.html">
<input type="text" size="15" name="ws" maxlength="500" value="pen, keychain, etc." onfocus="this.value='';return false;" />
<button type="submit" value="Search">Go</button>
<input type="hidden" name="ID" value="64857723-2161-4778-BDEB-3EE622F6CFF3" />
</form>
Here is the javascript that's in the head of /promotions.html: Code: <script type="text/javascript">
function FrameRedirect()
{
var q = window.location.search;
q = (q.length > 1) ? q.substring(1, q.length) : 0;
var s = q.substring(0, 2);
switch (s)
{
case 'ws':
q = 'http://www.asiconnection.com/ProductSearch/LinkInQS.aspx?'+q;
document.getElementById('Content').className = 'active';
break;
case 'bn':
q = q.substring(3,q.length);
document.getElementById('RD2').className = 'active';
break;
default:
document.getElementById('RD1').className = 'active';
break;
}
iframe = '<iframe id="frame" src="'+q+'" width="780" scrolling="yes" frameborder="0" height="500"></iframe>';
document.getElementById('Content').innerHTML = iframe;
}
</script>
The search box code is suppose to send the inputted search word to the javascript on /promotions.html page and then load the search results http://www.asiconnection.com/Product.../LinkInQS.aspx into the iframe on that page. The only thing that appears in that iframe is "Oops. Firefox cannot find productsearch" Can someone help me figure this out? Thanks in advance. This <div> layer positioned always at bottom left of the screen on scrolling (and calling some code from labpixies) works well in non-ie browsers, but in ie it requires the omission of the doctype declaration. Why? Is it possible to fix it so that it works with the doctype in ie? Code: <!doctype html>
<html lang="en">
<head>
<title></title>
</head>
<body>
<div id="master" style="position: absolute; left: -120px; top: 11px; width: 350px; height: 0px">
<div id="menu" style="position: absolute; left: 117px; top: 12px">
<table border="0" width="18" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<a href="javascript:expand();" onfocus="this.blur()">
<img name="menutop" border="0" src="images/translate.gif" width="23" height="152"></a></td>
</tr>
</table>
</div>
<div id="screen" style="position: absolute; left: -138px; top: 12px; ">
<table border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0px; padding:0px; border:1px solid #000000;">
<tr>
<td style="padding-left:0px; height:0px; line-height:15px; background-color:#000000;">
<a href="http://www.labpixies.com" style="font-family: Arial,Verdana; font-size:12px; font-weight:bold; text-align:left; text-decoration:none; color:#ffffff;">
Gadget by LabPixies.com</a></td>
</tr>
<tr>
<td>
<iframe allowtransparency="true" align="top" scrolling="no" width="256" height="135" frameborder="0" src="http://cdn.labpixies.com/campaigns/babylon/babylon.html" target="_self">
</iframe></td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
var sidemenu = document.getElementById('master');
function FixY()
{
screenWidth = screen.width;
if (screenWidth == 1024)
{
var yside = 390;
}
else if (screenWidth == 1152)
{
var yside = 400;
}
else if (screenWidth == 1280)
{
var yside = 400;
}
else
{
var yside = 450;
}
if(document.body.scrollTop != "undefined")
sidemenu.style.top = document.body.scrollTop+yside+'px';
else
sidemenu.style.top = window.pageYOffset+yside+'px';
}
setInterval("FixY()",100);
</script>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>
I am trying to install a simple slider/carousel in the middle of a web page. I opted for the JCarouselLite plug-in but can't seem to get it working. When the page loads, the images tile vertically(as opposed to line up horizontally) and the nav buttons sit below them. I have included necessary links to jQuery,the Carousel plug-in and also a custom.js file that includes a call to the plug-in to activate it(i think). I also have linked to a custom.css file to style the bar. I am wondering if my call to the plug-in is coded correctly. Beyond that, I can't understand why it isen't working. It is probably obvious but I'm a bit stuck! Could anyone help? I have attached the code showing the html, the custom.js function and the css. Thanks, nevblanc79 HTML: Code:
<div id="carousel">
<h3>Our Titles</h3>
<div class="carousel">
<ul>
<li><a href="portfolio_item.html"><img width="198" height="130" src="img/pictures/1.jpg" alt></a></li>
<li><a href="portfolio_item.html"><img src="img/pictures/2.jpg" alt="" width="198" height="130" ></a></li>
<li><a href="portfolio_item.html"><img src="img/pictures/3.jpg" alt="" width="198" height="130" ></a></li>
<li><a href="portfolio_item.html"><img src="img/pictures/4.jpg" alt="" width="198" height="130" ></a></li>
<li><a href="portfolio_item.html"><img src="img/pictures/5.jpg" alt="" width="198" height="130" ></a></li>
<li><a href="portfolio_item.html"><img src="img/pictures/6.jpg" alt="" width="198" height="130" ></a></li>
</ul>
</div>
<button class="prev"><</button>
<button class="next">></button>
</div>
Javascript: Code: $(function() {
$(".carousel").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev"
});
});
CSS: Code: #carousel {
width:900px;
overflow:hidden;
margin-bottom:30px;
}
.carousel ul li {
width:198px;
margin-right:36px;
}
#carousel .next, #carousel .prev {
margin:0px;
font-size:15px;
padding:4px 10px;
}
#carousel .next {
float:right;
}
#carousel .prev {
float:left;
}
The issue I'm having is that the sound for the animation will not go off after the initial operation, every subsequent animation will be silent. Here is the pastebin: Pastebin.com Keep in mind this is not my code and I privately contracted someone out to do this. They are not responding and will not help at this point. I will try to answer any question you may have to the best of my ability. I have a script that works until I add the clearInterval command, and I am not sure what I have done wrong. The code is: Code:
<script type="text/javascript">
function loadChatTalkRefresh(File,ID,Msg){
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
try{
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(ID).innerHTML=xmlhttp.responseText;
empress = setInterval(function(){loadChatTalkRefresh(File,ID,Msg)},3000);
willow = clearInterval(empress,210000);
}
}
var params=Msg;
xmlhttp.open("POST",File,true);
xmlhttp.setRequestHeader("Pragma", "Cache-Control:no-cache");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);
}
</script>
I have a CMS that was built for our company website that relies on some JS to upload media through a regular browser directly to be displayed on our site. There is a button one clicks to upload video. When clicked the file browser on your computer is supposed to pop-up so you can choose the media you would like to upload. This button no longer is responsive on any of my 12 mac desktops in any common browser nor my mac laptop which is on a different OS X version. Any ideas? Here is the script from the page: [CODE] <script type="text/javascript"> var upload1; window.onload = function() { upload1 = new SWFUpload({ // Backend Settings upload_url: "/08/assets/includes/php/uploadGall.php?id=<?php echo $id; ?>", // Relative to the SWF file (or you can use absolute paths) post_params: { "PHPSESSID" : "<?php echo session_id(); ?>"}, // File Upload Settings file_size_limit : "3102400", // 100MB file_types : "*.*", file_types_description : "All Files", file_upload_limit : "1", file_queue_limit : "1", // Event Handler Settings (all my handlers are in the Handler.js file) file_dialog_start_handler : fileDialogStart, file_queued_handler : fileQueued, file_queue_error_handler : fileQueueError, file_dialog_complete_handler : fileDialogComplete, upload_start_handler : uploadStart, upload_progress_handler : uploadProgress, upload_error_handler : uploadError, upload_success_handler : uploadSuccess, upload_complete_handler : uploadComplete, // Flash Settings flash_url : "/08/assets/includes/js/swfupload/swfupload_f8.swf", // Relative to this file (or you can use absolute paths) swfupload_element_id : "flashUI1", // Setting from graceful degradation plugin degraded_element_id : "degradedUI1", // Setting from graceful degradation plugin custom_settings : { progressTarget : "fsUploadProgress1", cancelButtonId : "btnCancel1" }, // Debug Settings debug: false }); }; var n=new Date().getTime();var c=escape(n*1000+Math.round(Math.random()*1000)); $(document).ready(function() { $('#nav_entry div.sub').each(function(i) { $(this).hide(); }); $('#nav_entry div.title').each(function(i) { $(this).click(function() { $(this).siblings('.sub').slideDown('fast'); $(this).parent().siblings('.ne').children('.sub').slideUp(); }); }); $('img.mover').hide(); <?php if(!$errors) { ?> $("#addEntry").hide(); $("a#nevermind_post").hide(); <?php } else { ?> $("a#add_driver_btn").hide(); <?php } ?> $("a#add_driver_btn").click(function() { $(this).hide(); $("a#nevermind_post").show(); $("#addEntry").slideDown('slow'); }); $("a#nevermind_post").click(function() { $(this).hide(); $("a#add_driver_btn").show(); $("#addEntry").slideUp('slow'); }); }); </script>[CODE] And here is where the button lies in the page: [CODE] <input type="button" value="Upload file (Max 200 MB)" onclick="upload1.selectFiles()" style="font-size: 8pt;" />[CODE] THANKS! I am using a JavaScript page that acts as a 'side-by-side' tester. It sends the same form in a POST to two different servers. One server is usually the production server the other a server under test. The results returned by the servers are displayed in two frames aligned side by side on the page. This page has worked in Firefox for several years. It worked up till early last week. Now, instead of populating the two frames, a new window opens up to display the response received from the Server. Nothing has changed in the code so I'm thinking that possibly the latest release of Firefox (10.0.2) has somehow broken this page. Here is the code that is envolved: Code: // setting up the frames
<frameset rows="400,*">
<frame src="file:///C:/TestSanity/controller.htm" name="controller"/>
<frameset cols="50%,50%">
<frame src="leftFrameInitialContent.html" name="leftWindow" onload='parent.controller.stopLeftFrameClock() ;'/>
<frame src="rightFrameInitialContent.html" name="rightWindow" onload='parent.controller.stopRightFrameClock();'/>
</frameset>
</frameset>
// sending a request whose response will be displayed in a frame
// pick the form that matches the current command
formToSubmit = document.getElementById(command + "_FORM") ;
// set the left frame destination url (action) from the value on the UI
formToSubmit.setAttribute("action", document.getElementById('leftFrameBaseUrl').value );
// send left window request
formToSubmit.setAttribute("target", "leftWindow");
formToSubmit.submit();
I don't have any idea what to look for as a cause. Any help and/or suggestions would be appreciated. Thanks, bkey Hi all, thanks in advance for any help. For a lot of years now I've used a javascript that does a simple rollover image swap, but also changes another alternate image at the same time. It's always worked like a charm. Lately I realized that the script no longer works in IE, though it used to in older versions of IE (I think it stopped working in anything past IE 7). It still works fine in Firefox, Safari, etc. I haven't been able to find a good alternative for this script, so I'm really trying to get it to work again in IE, but so far no luck. Here's the link to the actual script itself. http://www.jsmadeeasy.com/javascript...nges/index.htm (you can see that even the example on this page doesn't work in IE anymore) You can also see it in action at this site: http://www.augustroad.com/ (notice when you roll over the menu bar an alternate image appears in FF, but not in IE). Again, thanks in advance for any help. I truly appreciate it! Jordan I have a picture of a pinwheel on my website that I want to spin onMouseover. Can this be done with JavaScript?
I want to create some type of seasonal feel on my Web page where there are falling leaves. I presently have 6 different gif images of leaves that I know I will probably have to load into an array. I also know that I will have to figure out the maximum width & height of the screen, which is different in Internet Explorer and other browsers. My goal is to load the leaves randomly as well using 'Math.floor(Math.random()*6)', if that is correct. Beyond that, I am lost on how to manipulate the Web page to make this animation occur. Any help would be appreciated. Thank you. 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>Autumn</title>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1" />
<script type="text/javascript">
<!--Hide from incompatible browsers
/* <![CDATA[ */
var widthMax=0;
var heightMax=0;
var leavesLoaded = new Array(6);
for (var i=0; i<6; ++i)
{
leavesLoaded[i] = new Image();
leavesLoaded[i].src = "leaf" + (i+1) + ".gif";
}
function setLeaf()
{
if (navigator.appName == "Microsoft Internet Explorer")
{
widthMax=document.documentElement.clientWidth;
heightMax=document.documentElement.clientHeight;
}
else
{
widthMax=window.innerWidth-14;
heightMax=window.innerHeight;
}
setTimeout('fallingLeaves()',400);
}
/* ]]> */
// Stop hiding from incompatible browsers -->
</script>
</head>
<body onload="setLeaf();" >
<p><img src="images/leaf1.gif" id="leaf" style="position:absolute; left:0px; top:0px; visibility:hidden" alt="Image of a Leaf" /></p>
</body>
</html>
Hi, I have created an animation exercise for an eLearning lesson in a program that uses JavaScript as the scripting for a Windows executable. A retired social worker who creates these eLearning materials as give-away's to help people in the community improve health, it would be a big help to reaching more people if instead of a Windows executable version, the animation could be developed in a web page. A lot more people could view the eLearning and try this exercise which trains people in pacing their breathing. The animation has a 300X300 circle on the canvas with a couple of text input boxes and a start button. The JS < 50 lines of script, but since it was not developed for a web page, it has no tags and it depends on objects like the circle or button (or 2 audio files to create the inhale/exhale sounds) that were already placed on the canvas in the Windows executable program. I'm not very skilled using Dreamweaver CS5, but with help, reading, references can try to convert this JS into a web version, if it's possible. Not sure how to do this and would appreciate any help. I am adding a screenshot of the interface and the JS functions that are called by the start button. //JS: ( bar1 is the variable entered by the use as breaths per minute-BPM; //time1 is the exercise length; the variables initially are set as follows: //time1=15, //volume=100) var time1 function minuteTimer() { breakLoop = false stopLoop = false fork (calcBreathing) for (var i=0;i<time1;i++) { wait(60) breakLoop = true Submit.Show() Text122.Show() Text12.Show() TextInput22.Show() TextInput2.Show() Submit2.Hide() TextInput2.SetTransparency(0,false) TextInput22.SetTransparency(0,false) Text12.SetTransparency(0,false) Text122.SetTransparency(0,false) Text5.SetTransparency(0,false) Frame12.SetTransparency(0,false) Submit.SetTransparency(0,false) TextInput2.Enable(true) TextInput22.Enable(true) Debug.trace("\n minutes elapsed "+(i+1)+"\n") } stopLoop = true } function calcBreathing() { var bar2 = 60/bar1 for (loop = 0;loop<bar1;loop++) { mySound.Play(1,volume) Vector8.Scale(.5,.5, bar2*.3) mySound.Stop() wait (bar2*.05) mySound2.Play(1,volume) Vector8.Scale(-.5,-.5,bar2*.6) mySound2.Stop() wait (bar2*.05) if (breakLoop) break } breakLoop = false if (bar1 > 6) bar1-- if (!stopLoop) calcBreathing() } Any help appreciated. Thanks very much. Kind Regards, saratogacoach On my website www.thepriceoflust.com you can upload videos... These videos are supposed to be linked from youtube... When I try to upload a video it keeps on coming up as an invalid video... It gives me an example of what a proper youtube link should be but even when I enter the example it doesn't work... Does anyone have any ideals? I have already asked in the other forums and they said that is was a JavaScript error or has something to do in javascript... I am fairly new to programming and this is my first website so please be patient... To get to the video upload page follow these insturctions... you have to be in your user profile... log in using this information... User Name: supramaniac Password: lakeella After you log in go to the Member Menu on the left side bar and click on Your Videos...
Hi, Well I had lots of scripts so what I did is that I combined all of them into one script file, which contains files like Jquery library too. But now the problem is that it has stopped working, I don't know why did this happen. What I did is that I took every script copied and pasted it and then I gave some space under it by pressing enter a few times and then I used to paste other script, I was told this was the method to combine scripts but now the scripts don't work. Here is the link to combined scripts http://files.cryoffalcon.com/bloghut...NCOMPRESSED.js And the link to a live example is http://bloghutsbeta.blogspot.com/ I am having some difficulty with this project. It is supposed to be an animation of falling leaves. I am very new to arrays and JavaScript, so right off the bat I know that the arrays I have are not right, or are missing something else in order for it to function. Basically all I have for this project is a still picture of the leaves and that is it. If there is someone out there with some JavaScript expertise, could you tell me what I am doing wrong? Here is the code so far, I think it is too long. Code: <script type="text/javascript">
/* <![CDATA[ */
grphcs=new Array(6)
Image0=new Image();
Image0.src=grphcs[0]="images/leaf1.gif";
Image1=new Image();
Image1.src=grphcs[1]="images/leaf2.gif";
Image2=new Image();
Image2.src=grphcs[2]="images/leaf3.gif";
Image3=new Image();
Image3.src=grphcs[3]="images/leaf4.gif";
Image4=new Image();
Image4.src=grphcs[4]="images/leaf5.gif";
Image5=new Image();
Image5.src=grphcs[5]="images/leaf6.gif";
var minSpeed = 5;
var maxSpeed = 30;
var randomSpeed = 5;
var randomSpeed2 = 10;
var randomSpeed3 = 15;
var randomSpeed4 = 20;
var randomSpeed5 = 25;
var randomSpeed6 = 30;
var minHorizontal = 200;
var maxHorizontal = screen.availWidth - 300;
var leftPosition = Math.floor(Math.random() * (maxHorizontal -
(minHorizontal + 1)) + minHorizontal);
var leftPosition2 = Math.floor(Math.random() * (maxHorizontal -
(minHorizontal + 1)) + minHorizontal);
var leftPosition3 = Math.floor(Math.random() * (maxHorizontal -
minHorizontal +1)) + minHorizontal);
var leftPosition4 = Math.floor(Math.random() * (maxHorizontal -
minHorizontal + 1)) + minHorizontal);
var leftPosition5 = Math.floor(Math.random() * (maxHorizontal -
minHorizontal + 1)) + minHorizontal);
var leftPosition6 = Math.floor(Math.random() * (maxHorizontal -
minHorizontal + 1)) + minHorizontal);
var minVertical = 50;
var maxVertical = screen.availHeight - 300;
var topPosition = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
var topPosition2 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
var topPosition3 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
var topPosition4 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
var topPosition5 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
var topPosition6 = Math.floor(Math.rnadom() * (maxVertical -
(minVertical + 1)) + minVertical);
function matchLeaf() {
if (navigator.appName == "Microsoft Internet Explorer") {
widthMax = document.documentElement.clientWidth;
heightMax = document.documentElement.clientHeight;
}
else {
widthMax = window.innerwidth - 14;
heightMax = window.innerHeight;
}
autumnFall();
}
function autumnFall();
var fallingLeaf1 = document.getElementById("leaf1");
fallingLeaf1.style.left = leftPosition + "px";
fallingLeaf1.style.top = topPosition + "px";
fallingLeaf1.style.visibility = "visible";
topPosition += parseInt(randomspeed);
leftPosition += 0;
if (topPosition >= screen.availHeight - 300) {
topPosition = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
leftPosition = Math.floor(Math.random() * (maxHorizontal -
(minHorizontal + 1)) + minHorizontal);
leaf1.src = "images/leaf" + Math.floor(Math.random() * 6 +
".gif";
randomSpeed = Math.floor(Math.random() * maxSpeed -
(minSpeed + 1)) + minSpeed);
}
var fallingLeaf2 = document.getElementById("leaf2");
fallingLeaf2.style.left = leftPosition2 + "px";
fallingLeaf2.style.top = topPosition2 + "px";
fallingLeaf2.style.visibility = "visible";
topPosition2 += parseInt(randomSpeed3);
leftPosition2 += 0;
if (topPosition2 >= screenavailHeight - 300) {
topPosition2 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
leftPosition2 = Math.floor(Math.random() * (maxHorizontal
- (minHorizontal + 1)) + minHorizontal);
leaf2.src = "images/leaf" + Math.floor(Math.random() * 6)
+ "gif";
randomSpeed2 = Math.floor(Math.random() * (maxSpeed -
(minSpeed + 1)) + minSpeed);
}
var fallingLeaf3 = document.getElementById("leaf3");
fallingLeaf3.style.left = leftPosition3 + "px";
fallingLeaf3.style.top = topPosition3 + "px";
fallingLeaf3.stye.visibility = "visible";
topPosition3 += parseInt(randomSpeed3);
leftPosition3 += 0;
if (topPosition3 >= screen.availHeight - 300) {
topPosition3 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
leftPosition3 = Math.floor(Math.random() * (maxHorizontal
- (minHorizontal + 1)) + minHorizontal);
leaf3.src = "images/leaf" + Math.floor(Math.random() * 6
+ "gif";
randomSpeed3 = Math.floor(Math.random() * (maxSpeed -
(minSpeed + 1)) + minSpeed);
}
var fallingLeaf4 = document.getElementById("leaf4");
fallingLeaf4.style.left = leftPosition4 + "px";
fallingLeaf4.style.top = topPosition4 + "px";
fallingLeaf4.style.visibility = "visible";
topPosition4 += parseInt(randomSpeed4);
leftPosition4 += 0;
if (topPosition4 >= screen.availHeight - 300) {
topPosition4 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
leftPosition4 = Math.floor(Math.random() * (maxHorizontal
- (minHorizontal + 1)) + minHorizontal);
leaf4.src = "images/leaf" + Math.floor(Math.random() * 6
+ "gif";
randomSpeed4 = Math.floor(Math.random() * (maxSpeed -
(minSpeed + 1)) + minSpeed);
}
var fallingLeaf5 = document.getElementById("leaf5");
fallingLeaf5.style.left = leftPosition5 + "px";
fallingLeaf5.style.top = topPosition5 + "px";
fallingLeaf5.style.visibility = "visible";
topPosition5= parseInt(randomSpeed5);
leftPosition5 += 0;
if (topPosition5 >= screen.availHeight - 300) {
topPosition5 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
leftPosition5 = Math.floor(Math.random() * (maxHorizontal
- (minHorizontal + 1)) + minHorizontal);
leaf5.src = "images/leaf + Math.floor(Math.random() * 6 +
"gif";
randomSpeed5 = Math.floor(Math.random() * (maxSpeed -
(minSpeed + 1)) + minSpeed);
}
var fallingLeaf6 = document.getElementById("leaf6");
fallingLeaf6.style.left = leftPosition6 + "px";
fallingLeaf6.style.top = topPosition6 + "px";
fallingLeaf6.style.visibility = "visible";
topPosition6 = parseInt(randomSpeed6);
leftPosition6 += 0;
if (topPosition6 >= screen.availHeight - 300) {
topPosition6 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
leftPosition6 = Math.floor(Math.random() * (maxHorizontal
- (minHorizontal + 1)) + minHorizontal);
leaf6.src = "images/leaf + Math.floor(Math.random() * 6 +
"gif";
randomSpeed6 = Math.floor(math.random() * (maxSpeed -
(minSpeed + 1)) + minSpeed);
}
}
/* ]]> */
</script>
</head>
<body onload="setInterval('matchLeaf()', 100);">
<img id="leaf1" src="images/leaf1.gif" alt="leafone"
style="position:absolute; left:100px; top:100px;" />
<img id="leaf2" src="images/leaf2.gif" alt="leaftwo"
style="position:absolute; left:100px; top:100px;" />
<img id ="leaf3" src="images/leaf3.gif" alt="leafthree"
style="position:absolute; left:100px; top:100px;" />
<img id="leaf4" src="images/leaf4.gif" alt="leaffour"
style="position:absolute; left:100px; top:100px;" />
<img id="leaf5" src="images/leaf5.gif" alt="leaffive"
style="position:absolute; left:100px; top:100px;" />
<img id="leaf6" src="images/leaf6.gif" alt="leafsix"
style="position:absolute; left:100px; top:100px;" />
|
|||||||