garyblackpool Posted October 15, 2009 Share Posted October 15, 2009 Hi, I do not have a clue where this is going wrong the image is not moving. Its saying a { or ; while searching for the end of file but the line is before the code.Could some one help please thanks. <script language="javascript"> var x = 500; //Starting Location - leftvar y = 500; //Starting Location - topvar dest_x = 30; //Ending Location - leftvar dest_y = 30; //Ending Location - topvar interval = 10; //Move 10px every initializationfunction moveimg(){if(x > dest_x) { x -= interval;} else if(x < dest_x) { x += interval}if(y > dest_y) { y -= interval;} else if(y < dest_y) { y += interval}// Just in case we're closer to the destination than the motion intervalif(Math.abs(dest_x - x) < interval) x = dest_x;if(Math.abs(dest_y - y) < interval) y = dest_y;if (x != dest_x && y != dest_y) {// Repeat the operationdocument.getElementById("picme").style.left = y+'px';document.getElementById("picme").style.top = x+'px';if ((x+interval > dest_x) && (y+interval > dest_y)) {//Keep on calling this function every 100 microsecond// till the target location is reachedwindow.setTimeout('moveimg()',100);}}} </script> </head><body onload="moveimg()"> <img src="picme.jpg" id="picme" /> </body></html> Link to comment Share on other sites More sharing options...
jeffman Posted October 15, 2009 Share Posted October 15, 2009 I'm not getting any errors involving a { or ; character. Maybe there's more code I'm not aware of? Anyway, as is, this code works fine for me.Does your initial call to moveImg() occur AFTER the page loads? The script won't find "picme" if "picme" does not yet exist in the DOM."picme" also needs to be taken out of the document flow. (Assuming you haven't already done that.) Do this in your stylesheet or with a JavaScript assignment. Usually this means position:absolute. position:fixed should also work, and position:relative will get you something, but it's hard to say what without more context. Every animation I remember seeing just sticks with position:absolute.FWIW, your opening script tag should look like this:<script type="text/javascript">The language attribute has been deprecated for many years. This is probably not your problem, however. Link to comment Share on other sites More sharing options...
garyblackpool Posted October 15, 2009 Author Share Posted October 15, 2009 Hi no i am not getting the error message now and i am not sure where it was coming from.Sorry but i dont understand what you mean by taking it out of the document flow.When the page loads the image is ment to move.Thanks. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <meta name="description" content="Free Web tutorials on HTML, CSS, XML, and XHTML"> <meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript"> <title>hello world</title> <style type= "text/css"> </style> <script type="text/javascript"> var x = 10; //Starting Location - leftvar y = 10; //Starting Location - topvar dest_x = 4000; //Ending Location - leftvar dest_y = 400; //Ending Location - topvar interval = 10; //Move 10px every initializationfunction moveimg(){if(x > dest_x) { x -= interval;} else if(x < dest_x) { x += interval}if(y > dest_y) { y -= interval;} else if(y < dest_y) { y += interval}// Just in case we're closer to the destination than the motion intervalif(Math.abs(dest_x - x) < interval) x = dest_x;if(Math.abs(dest_y - y) < interval) y = dest_y;if (x != dest_x && y != dest_y) {// Repeat the operationdocument.getElementById("picme").style.left = y+'px';document.getElementById("picme").style.top = x+'px';if ((x+interval > dest_x) && (y+interval > dest_y)) {//Keep on calling this function every 100 microsecond// till the target location is reachedwindow.setTimeout('moveimg()',100);}}} </script> </head><body onload="moveimg()"> <img src="picme.jpg" id="picme" /> </body></html> Link to comment Share on other sites More sharing options...
chibineku Posted October 15, 2009 Share Posted October 15, 2009 The term 'document flow' refers to the way elements are positioned relative to other elements. Block level elements sit one under the other, inline elements next to each other. If you insert an image inside an element it takes its positioning cues from the element it is inside - even the body. If you give the image position:absolute or fixed, it ignores other elements on the page and sits exactly where you tell it from the edges of the page. To use top, left, right and bottom with any confidence, you need to make sure that the element you're positioning isn't going to be taking cues from other nearby elements. Link to comment Share on other sites More sharing options...
garyblackpool Posted October 15, 2009 Author Share Posted October 15, 2009 Thanks for clarifying that. I got the code from one of my previous posts.have i not continued the opperation currectly? if(x > dest_x) { x -= interval;} else if(x < dest_x) { x += interval}if(y > dest_y) { y -= interval;} else if(y < dest_y) { y += interval}// Just in case we're closer to the destination than the motion intervalif(Math.abs(dest_x - x) < interval) x = dest_x;if(Math.abs(dest_y - y) < interval) y = dest_y;if (x != dest_x && y != dest_y) {// Repeat the operation Link to comment Share on other sites More sharing options...
Ingolme Posted October 15, 2009 Share Posted October 15, 2009 Can you post the entire HTML document?Actually, to begin with, your element needs to have "position: absolute" in its CSS to be able to move around:<img src="picme.jpg" style="position:absolute" id="picme" /> Link to comment Share on other sites More sharing options...
garyblackpool Posted October 15, 2009 Author Share Posted October 15, 2009 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <meta name="description" content="Free Web tutorials on HTML, CSS, XML, and XHTML"> <meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript"> <title>hello world</title> <style type= "text/css"> #picme{ position:absolute; top: 10%; left: 10%; </style> <script type="text/javascript"> var x = 10; //Starting Location - leftvar y = 10; //Starting Location - topvar dest_x = 4000; //Ending Location - leftvar dest_y = 400; //Ending Location - topvar interval = 1; //Move 10px every initializationfunction moveimg(){if(x > dest_x) { x -= interval;} else if(x < dest_x) { x += interval}if(y > dest_y) { y -= interval;} else if(y < dest_y) { y += interval}// Just in case we're closer to the destination than the motion intervalif(Math.abs(dest_x - x) < interval) x = dest_x;if(Math.abs(dest_y - y) < interval) y = dest_y;if (x != dest_x && y != dest_y) {// Repeat the operationdocument.getElementById("picme").style.left = y+'px';document.getElementById("picme").style.top = x+'px';if ((x+interval > dest_x) && (y+interval > dest_y)) {//Keep on calling this function every 100 microsecond// till the target location is reachedwindow.setTimeout('moveimg()',1000);}}} </script> </head><body onload="moveimg()"> <div id="picme"> <img src="picme.jpg" /></div> </body></html> Link to comment Share on other sites More sharing options...
chibineku Posted October 15, 2009 Share Posted October 15, 2009 Don't elements have to have inline style attributes to be altered by javascript that way? I'm sure I've tried in the past and failed for that reason... Link to comment Share on other sites More sharing options...
Ingolme Posted October 15, 2009 Share Posted October 15, 2009 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <meta name="description" content="Free Web tutorials on HTML, CSS, XML, and XHTML"> <meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript"> <title>hello world</title> <style type= "text/css"> #picme{ position:absolute; top: 10%; left: 10%; </style> <script type="text/javascript"> var x = 10; //Starting Location - leftvar y = 10; //Starting Location - topvar dest_x = 4000; //Ending Location - leftvar dest_y = 400; //Ending Location - topvar interval = 1; //Move 10px every initializationfunction moveimg(){if(x > dest_x) { x -= interval;} else if(x < dest_x) { x += interval}if(y > dest_y) { y -= interval;} else if(y < dest_y) { y += interval}// Just in case we're closer to the destination than the motion intervalif(Math.abs(dest_x - x) < interval) x = dest_x;if(Math.abs(dest_y - y) < interval) y = dest_y;if (x != dest_x && y != dest_y) {// Repeat the operationdocument.getElementById("picme").style.left = y+'px';document.getElementById("picme").style.top = x+'px';if ((x+interval > dest_x) && (y+interval > dest_y)) {//Keep on calling this function every 100 microsecond// till the target location is reachedwindow.setTimeout('moveimg()',1000);}}} </script> </head><body onload="moveimg()"> <div id="picme"> <img src="picme.jpg" /></div> </body></html> Here's the problem:#picme{position:absolute;top: 10%;left: 10%; You're missing a closing brace '}' here Don't elements have to have inline style attributes to be altered by javascript that way? I'm sure I've tried in the past and failed for that reason...No, they don't need to be inline unless you want to read them with Javascript. They still will affect the element until Javascript modifies the style attribute which takes precedence. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.