|
JavaScript - Help Using Path Animation-debugging Errors
This page should work, but it doesn't. My debugging says that I have a invalid character on line 2 and on line 39 it is "object expected".
Here's the page: <HTML> <HEAD> <TITLE>The Golf Page</TITLE> <STYLE> BODY {font-family:Arial, Helvetica, sans-serif; font-size: 18pt; color:blue; background-color:rgb(255,255,128)} </STYLE> <SCRIPT SRC="Ball.gif"> var x = new Array(-395, -389, -383, -377, -371, -365, -359, -353, -346, -340, -334, -328, -322, -316, -310, -304, -297, -291, -285, -279, -273, -267, -261, -255, -248, -242, -236, -230, -224, -218, -212, -206, -199, -193, -187, -181, -175, -169, -163, -157, -150, -144, -138, -132, -126, -120, -114, -108, -101, -95, -93, -91, -88, -86, -83, -81, -78, -76, -73, -71, -69, -66, -64, -61, -59, -56, -54, -51, -49, -47, -44, -42, -39, -37, -34, -32, -29, -27, -24, -22, -20, -17, -15, -12, -10, -7, -5, -2, 0); var y = new Array(-300, -300, -300, -299, -298, -297, -296, -294, -292, -290, -288, -285, -282, -279, -276, -272, -268, -264, -260, -255, -250, -245, -240, -234, -228, -222, -216, -209, -202, -195, -188, -180, -172, -164, -156, -147, -138, -129, -120, -110, -100, -90, -80, -69, -58, -47, -36, -24, -12, 0, -5, -10, -14, -18, -22, -25, -29, -32, -34, -37, -39, -41, -43, -45, -46, -47, -48, -48, -48, -48, -48, -48, -47, -46, -45, -43, -42, -40, -37, -35, -32, -29, -26, -23, -19, -15, -11, -6, 0); index=0 function moveBall() { if(index <=[x.length-1]) { placeIt("Ball", x[index], y[index]); index++; setTimeout("moveBall()", 5); } else { ("showIt()", 5); setTimeout("showIt('Slogan')", 5); setTimeout("showIt('Slogan1')", 10); setTimeout("showIT('Marquee')", 15); } } </SCRIPT> </HEAD> <BODY onLoad="moveBall(Ball);"> <DIV ID="Marquee" visibility:hidden font-family: Time New Roman, Times, serif; font-style:italic> <CENTER> <MARQUEE BGCOLOR="#BBBBBB"> A beautiful day for GOLF...Sunny...No WINDS...TEMP:68-70 </MARQUEE> </CENTER> </DIV> <SCRIPT SRC="Golf.js"></SCRIPT> <DIV ID="Title" STYLE="border-left:1px solid blue; border-right:3px solid blue; border-top:1px solid blue; border-bottom:3px solid blue; padding-left:395;padding-top:260;padding-bottom:0; background-color:rgb(0,255,0)"> THE G<SPAN ID="Ball" position:relative; left:0; top:0><IMG SRC="Ball.gif" BORDER=0 width="17" height="17"></SPAN>LF PAGE </DIV> <DIV ID="Slogan" STYLE="color:black; font-family: Times New Roman, Times, serif; font-style:italic; font-weight:bold; position:absolute; left:120; top:100; z-index:2; visibility:hidden"> Your Online Source of Golf Equipment </DIV> <DIV ID="Slogan2" STYLE="color:white; font-family: Times New Roman, Times, serif; font-style:italic; font-weight:bold; position:absolute; left:121; top:101; z-index:1; visibility:hidden"> Your Online Source of Golf Equipment </DIV> </BODY> </HTML> The function moveBall and its contents should be checked as well, although it should be correct. But the page won't load properly. The marquee is suposed to be hidden until the function executes, and it is displayed. As far as I know the only errors are in the onLoad and function, everything else is right. Any help would be appreciated. Thanks Similar TutorialsI'm used to PHP, where I can use var_dump to find out about a variable wherever I call it. Or, having the script crash entirely and give me an idea of what mistake I made, when I made a mistake. With JS, neither of those appear to be true. I was told I can use console.log or console.dir to get something similar to var_dump, but as you can see: it's giving me no output. I need a way to help me find the mistakes I make. How can I get console.dir to work? See the image below: Large image: http://i.imgur.com/4cw89OO.png I've been working on that for days, and can't find the problem. Could one of you help? I wrote a low-level digit-shift cipher, but the script doesn't work. Code: <head>
<script type="text/javascript">
function ciphertext()
{
var t = document.getElementById.('t')
t = t.toUpperCase()
var n = 0
var o = ""
if(n=0)
{
o=o+t
n=n+1
}
if(n=1)
{
if(t=="A")
o=o+"B"
if(t=="B")
o=o+"C"
if(t=="C")
o=o+"D"
if(t=="D")
o=o+"E"
if(t=="F")
o=o+"G"
if(t=="G")
o=o+"H"
if(t=="H")
o=o+"I"
if(t=="I")
o=o+"J"
if(t=="J")
o=o+"K"
if(t=="K")
o=o+"L"
if(t=="L")
o=o+"M"
if(t=="M")
o=o+"N"
if(t=="N")
o=o+"O"
if(t=="O")
o=o+"P"
if(t=="P")
o=o+"Q"
if(t=="Q")
o=o+"R"
if(t=="R")
o=o+"S"
if(t=="S")
o=o+"T"
if(t=="T")
o=o+"U"
if(t=="U")
o=o+"V"
if(t=="V")
o=o+"W"
if(t=="W")
o=o+"X"
if(t=="X")
o=o+"Y"
if(t=="Y")
o=o+"Z"
if(t=="Z")
o=o+"A"
else
o=o+t
n=n-1
}
document.getElementById('op').innerHTML = o.value
}
</script>
</head>
<body>
<b id="op">This is your result</b>
<input type="text" id='t' />
<button onclick="ciphertext()">Submit</button>
</body>
I've been working on that for days, and can't find the problem. Could one of you help? (Pardon me if I am being blunt, but why doesn't this work?) I've been messing with this for hours and I can't seem to find where I've gone wrong with it, I think I need a fresh pair of eyes to give it a look over. Anyways here's my entire piece of code. I know it's a lot to look at but if anyone can help me get this working that would be great, it's starting to give me a headache just to look at it. Anyways from what I can tell the problem is somewhere in the wDesQuote() function but I can't seem to pin it down. Code: //Start Ajax Code
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest)
{
XMLHttpRequestObject = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
function getData(dataSource, divID){
if(XMLHttpRequestObject){
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("GET", dataSource);
XMLHttpRequestObject.onreadystatechange = function(){
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200){
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(null);
}
}
//End Ajax Code
//Start Div Updater
function textUpdate(text, divID){
if(XMLHttpRequestObject){
var obj = document.getElementById(divID);
obj.innerHTML = text;
XMLHttpRequestObject.send(null);
}
}
//End Div Updater
//Money Formater
function roundNumber(num, dec) {
var result = Math.round(num*Math.pow(10,dec))/Math.pow(10,dec);
return result;
}
//End Money Formater
function wDesQuote()
{
var eBizCard = document.getElementById('eBizCard').checked;
var basic = document.getElementById('basic').checked;
var mobile = document.getElementById('mobile').checked;
var pages = document.getElementById('pages').value * 20;
var host = document.getElementById('hostY').checked;
var cTemp = document.getElementById('cTemp').checked;
var anime = document.getElementById('anime').checked;
var addMobile = document.getElementById('addMobile').checked;
var eComP = document.getElementById('eComP').checked;
var eComI = document.getElementById('eComI').value;
var eComQ = 0;
var forum = document.getElementById('forum').checked;
var blog = document.getElementById('blog').checked;
var wUpd = document.getElementById('wUpd').checked;
var bUpd = document.getElementById('bUpd').checked;
var mUpd = document.getElementById('mUpd').checked;
var nUpd = document.getElementById('nUpd').checked;
var logo = document.getElementById('logo').checked;
var bCard = document.getElementById('bCard').checked;
var pCard = document.getElementById('pCard').checked;
var brochure = document.getElementById('brochure').checked;
var mTotal = 0;
var uTotal = 0;
if(eBizCard == true && host == true){
uTotal = 149.95;
mTotal = 9.95;
}else if(eBizCard == true && host == false){
uTotal = 149.95;
mTotal = 0;
}else if(mobile == true && host == true){
uTotal = 299.95;
mTotal = 9.95;
}else if(mobile == true && host == false){
uTotal = 299.95;
mTotal = 0;
}else{
eBizCard = 0;
mobile = 0;
basic = 499.95;
if(host == true){
host = 9.95;
} else{
host = 0;
}
if(cTemp == true){
cTemp = 100;
}else{
cTemp = 0;
}
if(anime == true){
anime = 150;
}else{
anime = 0;
}
if(addMobile == true){
addMobile = 275;
}else{
addMobile = 0;
}
if(eComP == true){
eComP = 200;
eComQ = roundNumber(eComI * 0.59,2).toFixed(2);
if(eComQ == "NaN"){
alert("Please enter numbers only into the item quantity box");
break;
}
}else{
eComP = 0;
eComI = 0;
}
if(forum == true){
forum = 50;
}else{
forum = 0;
}
if(blog == true){
blog = 50;
}else{
blog = 0;
}
if(wUpd == true){
wUpd = 175;
}else{
wUpd = 0;
}
if(bUpd == true){
bUpd = 100;
}else{
bUpd = 0;
}
if(mUpd == true){
mUpd = 60;
}else{
mUpd = 0;
}
if(nUpd == true){
nUpd = 0;
}else{
nUpd = 0;
}
if(logo == true){
logo = 75;
}else{
logo = 0;
}
if(bCard == true){
bCard = 90;
}else{
bCard = 0;
}
if(pCard == true){
pCard = 140;
}else{
pCard = 0;
}
if(brochure == true){
brochure = 280;
}else{
brochure = 0;
}
}
var uTotal = pages + cTemp + anime + addMobile + eComP + eCompQ + forum + blog + wUpd + bUpd + mUpd + nUpd + logo + bCard + pCard + brochure;
var mTotal = host + mUpd + bUpd + wUpd + nUpd;
if(mTotal == 0){
document.getElementById('totalDisplay').innerHTML = "Your total is $" + uTotal;
}else{
document.getElementById('totalDisplay').innerHTML = "Your total is $" + uTotal + " a monthly fee of $" + mTotal;
}
}
what is wrong with this Code: function addfavorites(classid,userid) { // alert("here"); var urltoajax = "addfavorites.php?j=1&classid="+ classid + "&userid="+ userid; urltoajax = urltoajax + '&rnd=' + Math.round(Math.random() * 10000) alert(urltoajax); $.ajax({ url: urltoajax, cache: false, success: function(html) { $("#message").html(html); } }); //alert('here 2'); } i get an error Object doesn't support this property or method This question hovers between PHP and JavaScript, but I think it fits here a little better. I've got a web app that does a lot of asynchronous calls to various PHP pages. I'm familiar with using an iFrame or div to hold a controller, then making forms post to that controller so you can see the output. However, I'm not doing a lot of submitting forms. Typically, I utilize the onclick event of various elements to initiate an XmlHttpRequest that jumps over to a PHP page and back. I'm looking for a way to easily debug my PHP code. Right now I'm using Firebug (on Firefox) to look at the HTTP requests. I can see the post data and response and all that, which is good. However, it requires a good amount of clicking and time to get to that data. Is there an easier way to do this? Ideally I'd love to include some sort of debug window that displays all of the PHP controller errors and things that I echo out. In short, what's wrong with this? I'm sure you'll test it, but it just posts the JS inside the Bold tag instead of the grade. This includes the innerHTML script. Code: <html>
<head>
<script type="text/javascript">
function grade()
{
var tot = 1;
var g = 0;
var qId0 = document.getElementById('0').value;
if (qId0 == "t")
{
g = g + 1;
}
g = g / tot;
g = g * 100;
document.getElementById("grade").innerHTML = grade;
}
</script>
</head>
<body>
<b id="grade">Your Grade Here</b>
<ol>
<li><select id="0">
<option value="d">Test Question</option>
<option value="f">false</option>
<option value="t">true</option>
<option value="f">false</option>
</select>
<button onclick="grade()">Submit</button>
</body>
</html>
When I hit "submit" with the right answer, I get: function grade() { var tot = 1; var g = 0; var qId0 = document.getElementById('0').value; if (qId0 == "t") { g = g + 1; } g = g / tot; g = g * 100; document.getElementById("grade").innerHTML = grade; } When I hit "submit" with the wrong answer, I get the same. Can someone explain this to me and tell me how to fix it? (Also, I would appreciate it if you could point out any unrelated bugs you come across ) I am trying to debug this with FireBug Code: function chapter12_nodeOne() {
//create an element
var element = document.createElement('input');
//set some attributes
element.setAttribute('type', 'button');
element.setAttribute('value', 'submit');
//appendd the element into a DIV
document.getElementById('myDiv').appendChild(element);
//uses EventUtil to attach an event listener
(1) EventUtil.addHandler(element, 'click', function() { alert('added event handler') });
}
var EventUtil = {
(2)addHandler: function(element, type, handler) {
//check if the element and the browser support DOM Level 2 event attachment
//if the user is not browsing with IE
if (element.addEventListener) {
element.addEventListener(type, handler, false);
}
//if user is browsing with IE
else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
}
//if user is using a browser that only supports DOM Level 0 event attachment
else {
element["on" + type] = handler;
}
},
removeHandler: function(element, type, handler) {
//check if the element and the browser support DOM Level 2 event attachment
//if the user is not browsing with IE
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
}
//if user is browsing with IE
else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
}
//if user is using a browser that only supports DOM Level 0 event attachment
else {
element["on" + type] = null;
}
},
preventDefault: function(event)
{
if(event.preventDefault)
{
event.preventDefault();
}
else
{
event.returnValue = false;
}
}
};
I put a breakpoint on the line marked with (1), I am trying to go to line (2) with all the available options FireBug gives, but unfortunately I get the end of chapter12_nodeOne function. Any ideas why? first of all, hello all i found this forum while running out of ideas and being extremely desperate to fixing a probably small javascript error in a script. the script is supposed to open a small form window that allows the user to input an email address and update it to proceed. the form item is initially unchecked, but as the user clicks it and enter his email address, it updates the value of the email address and the box becomes "checkable". the problem is that with both IE and firefox, the box doesn't close again, doesn't get checkable and basically doesn't work. in the firefox debugging console, I found the following error: Quote: Error: document.getElementById(input_array[i]) is null Source File: sell_item.php Line: 1106 does anyone have an idea what could be wrong? the part responsible in the javascript for this section is: Code: <script language="javascript">
function pg_popup_open(id)
{
if (document.getElementById(id).style.display == 'block')
{
document.getElementById(id).style.display = 'none';
}
else
{
document.getElementById(id).style.display = 'block';
}
return false;
}
function pg_update_settings(id, input_array)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url = '' + 'ajax_files/direct_payment_box.php';
var action = url + '?id=' + id + '&user_id=' + 100001;
var chk_disabled = false;
for ( var i in input_array )
{
action += '&' + input_array[i] + '=' + document.getElementById(input_array[i]).value;
if (document.getElementById(input_array[i]).value == '')
{
chk_disabled = true;
}
}
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4)
{
var response = xmlHttp.responseText;
}
};
xmlHttp.open("GET", action, true);
xmlHttp.send(null);
document.getElementById('checkbox_' + id).disabled = chk_disabled;
if (chk_disabled == true)
{
document.getElementById('checkbox_' + id).checked = false;
}
document.getElementById(id).style.display = 'none';
return false;
}
</script>
and the html code that is supposed to pop up the box is: Code: <input type="checkbox" name="payment_gateway[]" id="checkbox_pg_paypal" value="1" disabled>
<span class="contentfont"><a href="javascript:;" onclick="pg_popup_open('pg_paypal');">PayPal</a></span>
<script language="javascript"> var array_pg_paypal = new Array(); array_pg_paypal[0] = 'pg_paypal_email';</script>
<div class="smallfont"><b>PayPal Email Address</b><br>
<input type="text" name="pg_paypal_email" id="pg_paypal_email" value="" /></div>
<div align="right"><input type="button" value="Proceed" onclick="pg_update_settings('pg_paypal', array_pg_paypal);" /></div>
i understand this is asking a lot, but if someone has a spare second that is a javascript guru, i promise i will name my first born after you!! lol Hi everybody. I've been trying to figure out how to fix the following error I get in the latest Internet Explorer for marinebio.org: Message: 'this.submenus[...].getElementsByTagName(...).0' is null or not an object Line: 547 Char: 3 Code: 0 URI: http://marinebio.org/_n/s/main.js The code at line 547 in main.js is: Code: this.submenus[i].getElementsByTagName("span")[0].onclick = function() {
in the function: Code: SDMenu.prototype.init = function() {
var mainInstance = this;
for (var i = 0; i < this.submenus.length; i++)
this.submenus[i].getElementsByTagName("span")[0].onclick = function() {
mainInstance.toggleMenu(this.parentNode);
};
if (this.markCurrent) {
var links = this.menu.getElementsByTagName("a");
for (var i = 0; i < links.length; i++)
if (links[i].href == document.location.href) {
links[i].className = "current";
break;
}
}
if (this.remember) {
var regex = new RegExp("sdmenu_" + encodeURIComponent(this.menu.id) + "=([01]+)");
var match = regex.exec(document.cookie);
if (match) {
var states = match[1].split("");
for (var i = 0; i < states.length; i++)
this.submenus[i].className = (states[i] == 0 ? "collapsed" : "");
}
}
};
I've been using the Dynamic Drive's Slashdot sliding menu script for at least a year without any problems. All pages validated before the ads were added. I've pulled nearly all other scripts but it still errors out. Works fine in FF and Chrome. Going to strip the home page to nothing and start building it back but if anyone has any ideas, I'd really appreciate it. Maybe it's time to upgrade the vertical sliding menu script entirely, if anyone can recommend a better one, that would be great too. I know just enough javascript to be dangerous apparently.... Hello, I'm a student web developer. I'm debugging some JavaScript code I just created that simply extracts a table, reorders it and replaces it when the user clicks on a button ('Order results' - top right of the table). (It's a small script). It's for a PHP based polling application, completely of my own creation, which is under construction (only the JavaScript doesn't work). You can see all the code if you use Firebug. Go to the following link and vote for something; that will take you to a page the JavaScript is located. http://www.samuellockyer-development...s/examples.php (I'm linking because I think the context of the page may help.) (Notice the type error alert.) (Update: Not anymore.) (There are NO syntax errors.) You will find the area of the bug quickly by looking at the comments. (Marked by !!BUG!!) (Update: Not anymore, look at the posts below to find them now.) I am very new to JavaScript, but I wrote all the code, so I will be able to answer questions easily. This is a last resort by the way, I need this to work within about two days and I would be SO grateful for any help!! You can vote as many times as you like - I can just zero everything before I demo the app. I've been playing around with a madlibs exercise while trying to learn simple javascript. I have three input boxes and a button display an alert containing the input from the boxes. Am I right to be assigning variable names to the values from the text boxes and then referencing those variables in my alert? I'm sorry if this is a dumb question but I've been working on it for hours and can't get past this point. Inset a name: <input type="text" id="textbox1" size="10"/> </br> Insert a verb : <input type="text" id="textbox2" size="10"/> </br> Insert a place: <input type="text id="textbox3" size="10"/> <input type="button" value="CLICK WHEN FINISHED" onClick="name = document.getElementById('textbox1').value; verb = document.getElementById('textbox2').value; place = document.getElementById('textbox3').value; alert('Mad Lib :' + name + " " + verb + " " + place);" /> I have a picture of a pinwheel on my website that I want to spin onMouseover. Can this be done with JavaScript?
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 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 created JavaScript animation and the picture after animation finished disappear. Could anyone tell me or point me how to resolve this kind of issue? I tested it in IE as well as Firefox.. I could send the code but it is quite long for posting, but the screenshots from before and after animation is finished are as below. thanks in advance for any help. trotsky Anyone got any suggestions on techniques? The main one I find is to use translate to move the canvas around, which just seems odd to me. I don't even fully understand how it works. But the one I was looking at used clearRect. In examples given looked as though it had to redraw the canvas every frame. I'm just mucking around with a simple poker game, figured i'd have the table in one layer and anything that moves on a top layer? By doing that I could only clear each card as it moved around...yes? Anyone know of a better way of doing things? Hi, I will really appreciate if someone could take a look at my code below and inform me where I'm going wrong, because I can't seem to tell. The instructions a -the file starts with the text "Avalon Books" on the left edge of the page. -the text moves to the center of the page. -After the text reaches the center, the image file kids.jpg appears -Every two seconds thereafter, the image file is swapped with the next image file in the stack (there are 3 images in total). I am only posting the few relevant functions where the problem could be. All the other functions are working properly. I am new to JavaScript so any help will be really appreciated. Thank you This is the main file: Code: function placeObjects(){
var W = (0.5)*winWidth(); //gets the width of user's browser.
placeIt("avalon",0,0); //placeIt function is working fine.
placeIt("kids",W-75,100);
placeIt("fiction",W-75,100);
placeIt("nfiction",W-75,100);
setZ("kids",3); //setZ function is below.
setZ("fiction",2);
setZ("nfiction",1);
moveAvalon();
}
function moveAvalon(){
var x = xCoord("avalon");
if(x <= (W-125)){
shiftIt("avalon", 10, 0);
setTimeout("moveAvalon()",50);
}
else swapImages(); //if x is greater than W-125
}
function swapImages(){
showIt("kids");
showIt("fiction");
showIt("nfiction");
setTimeout("swapIt(kids,fiction,nfiction)",2000); //syntax could be wrong here?
}
</script>
</head>
<body onload="placeObjects()"> //calls the first function on load.
...............
</body>
</html>
and here is the second file that contains all the functions (I am posting 2 of those functions): Code: function setZ(id, z){
var object=document.getElementById(id);
object.style.zIndex="z";
}
function swapIt(id1, id2, id3){
var object1=getObject(id1);
var object2=getObject(id2);
var object3=getObject(id3);
var z1;
var z2;
var z3;
object1.style.zIndex="z1";
object2.style.zIndex="z2";
object3.style.zIndex="z3";
object1.style.zIndex="z3";
object2.style.zIndex="z1";
object3.style.zIndex="z2";
}
I have created an animation API, which has an option for the 'effect' or animation type. Now i'm trying to produce a slow, fast slow effect using a sine wave but seem to be having some trouble! The code below is supposed to get the steps to calculate each frame by diving the usable part of the sine wave into the total frames. The code should then go on to calculate insert the relevant values into the frame variables, after which multiply them all so that they are the correct scale so that when the animation is running it simply looks up the value and applies it, no need for any processing. With an animation from 0 to 740 (px in this case) the function returns: 115, 228, 335, 434, 523, 598, 659, 703, 730, 740 Oh and just a quick addition the variable "end" will equal 740 in the case above, or whatever the end value is. Code: case "SFS":
var step = 90 / totalFrames;
var pi = Math.PI;
var raid = 0;
for (var i = 1; i <= totalFrames; i++){
raid = (i*step)*(pi/180);
queueFrameValue[topOfQueue][i] = Math.sin(raid);
}
var multiplier = end / queueFrameValue[topOfQueue][totalFrames];
for (var i = 1; i <= totalFrames; i++){
queueFrameValue[topOfQueue][i] = queueFrameValue[topOfQueue][i] * multiplier;
}
break;
Thanks! I have a site with a lot of animated gifs and I was wondering if there was a way to (on page load) stop all gif animations (only show first image frame). Then when you click a link, it will animate the animated gifs.
Hello readers! I made some animation code Code: for (var i = 1; i < 8; i++) {
var slc = ".s" + i;
$(slc).css(
{
'position':'absolute',
'top':'-300px',
'left':30*i*5,
'width':'100px',
'height':'300px',
'backgroundColor':'white'
});
};
$('body').click(function() {
for (var t = 1; t < 8; t++) {
var asd = '.s' + t;
$(asd).animate({
'top':'0px'
}, 100*t).animate({
'top':'-300px'
}, 100*t);
};
});
in html there are some div tags. So, question is - How to normilize queue of animation? You see that first box moves fast and the last one moves very slow to the end. I would like boxes to move proportionally in relation to the time. Could you give some recommendations about this stuff? |
|||||||