freddyw Posted December 11, 2008 Share Posted December 11, 2008 what im trying 2 acchieve is if the user makes a certain recipe, that is in the list a picture of a whisk will animate for a few seconds after clicking okay. i dont want it to animate of the recipe isnt a valid one. the JS i have so far is function left() { whisk_x = whisk_x - 10; if(whisk_x <= 0) { right(); }else { whisk1.style.left = whisk_x - 500; whisk_x = whisk_x - 500; whisk1.style.left = whisk_x - 500; timerID = setTimeout("left()", 25); } } function right() { whisk_x = whisk_x + 500; if(whisk_x>= max_x) { left(); } else { whisk_x = whisk_x + 500; whisk1.style.left = whisk_x + 500; timerID = setTimeout("right()", 25); } } var max_x = 1024; var whisk1 = document.getElementById("whisk"); var whisk_x = 500; right(); and in my html i have <img src="images/whisk.png" width="180px" height="160px" id="whisk"/> i know my js will only make it move automatically but it isnt even doing that. can someone please help. as you can see im doing some of the work myslf, just struggling to see more of the code (that mjdamato provided) im currently working on see this link http://www.phpfreaks.com/forums/index.php/topic,229425.0.html Quote Link to comment Share on other sites More sharing options...
Psycho Posted December 11, 2008 Share Posted December 11, 2008 Try this. The function takes four parameters: imgID = the id of the image maxWidth = the maximum horizontal distance to move the image moveStep = the number of pixels to move the image on each step through the function revs = the number of revolutions to move the image until the function stops You also need to set the global variables revCount and startMargin outside the function. <html> <head> <script type="text/javascript"> function animate(imgID, maxWidth, moveStep, revs) { imgObj = document.getElementById(imgID); var currentMargin = parseInt(imgObj.style.marginLeft); var moveStep = parseInt(moveStep); if (revCount==0) { revCount = 1; startMargin = currentMargin; } if ( (currentMargin+moveStep)>maxWidth || (currentMargin+moveStep)<startMargin ) { moveStep = moveStep * -1; } var newMargin = ( currentMargin + moveStep ); imgObj.style.marginLeft = newMargin+'px'; if (newMargin==startMargin) { revCount++; } if (revCount<=revs) { setTimeout("animate('"+imgID+"','"+maxWidth+"','"+moveStep+"','"+revs+"')", 30); } else { revolutions = 0; } } var revCount = 0; var startMargin = 0; </script> </head> <body> <img src="wisk.jpg" id="wisk" style="margin-left:0px;"> <br /> <button onclick="animate('wisk', 600, 20, 3);">Animate</button> </body> </html> Quote Link to comment Share on other sites More sharing options...
freddyw Posted December 11, 2008 Author Share Posted December 11, 2008 Thanks alot. Your grasp on javascript is truly amazing. i aspire to have your skills. how long have you used javascript for. and is there any books u can recomend? thanks again. i really appreciate it. Quote Link to comment Share on other sites More sharing options...
Psycho Posted December 12, 2008 Share Posted December 12, 2008 Thanks alot. Your grasp on javascript is truly amazing. i aspire to have your skills. how long have you used javascript for. and is there any books u can recomend? Thank you. I guess I started using JavaScript about 10 years ago. Other than a very superficial 1 day class in JavaScript all of my skills have been self-taught. Most of my learning has been done by 1) reviewing scripts by other people and breaking them down so I understand them, 2) Reading tutorials - especially when there is one specific to a new "thing" I want to do (e.g. AJAX), 3) Reading other "documentation" at good sites such as devguru.com, tizag.com, or w3schools.com. I don't own any JavaScript books, and the only programming books I have I aquired through various employment. All the information I need is available on the internet. You just have to be careful about the source of the information. Many of the "free script" sites contain really bad code in my opinion. But, they are useful for a starting point if you know what you are doing. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.