benjamin.morgan Posted December 15, 2012 Share Posted December 15, 2012 I am trying to animate some text for learning purposes, which I have done before, and now I can't seem to be able to do it. Basically I have some text positioned relative. It has an property of left: 10px;. In the javascript I want to use setInterval to add 50px every 500ms. I have pasted the code in a jsFiddle. http://jsfiddle.net/98d6X/1/ Why isn't it adding the px or moving? Link to comment Share on other sites More sharing options...
HartleySan Posted December 15, 2012 Share Posted December 15, 2012 It doesn't work because document.getElementById('move').style.left cannot be used to read styles set via CSS (i.e., left: 10px;). To do this properly with the method you're implementing, you either need to set something like the following in your JS before starting the animation, or you need to use a different CSS method (which differs depending on the browser) in order to read CSS styles/computer styles. document.getElementById('move').style.left = '10px'; Link to comment Share on other sites More sharing options...
benjamin.morgan Posted December 15, 2012 Author Share Posted December 15, 2012 When I add that line it doesn't even set the property. It doesn't even move it 10px to the right. http://jsfiddle.net/98d6X/2/ Link to comment Share on other sites More sharing options...
benjamin.morgan Posted December 15, 2012 Author Share Posted December 15, 2012 Solved. Thanks HartleySan. It was the window.onload causing the problem as well as it being initially set in javascript. I had to choose no wrap instead of onload on the side. I've never had that problem before! http://jsfiddle.net/98d6X/3/ Another problem that came up is if I use var mov = document.getElementById('move'); If i use mov.style.left it doesn't work anymore. I am putting the var mov as a global variable outside of the functions. It will only work if I create the same variable in both functions. Link to comment Share on other sites More sharing options...
HartleySan Posted December 15, 2012 Share Posted December 15, 2012 I couldn't understand the following, but so long as you solved the problem, no problem, I guess: Solved. Thanks HartleySan. It was the window.onload causing the problem as well as it being initially set in javascript. I had to choose no wrap instead of onload on the side. I've never had that problem before! Also, you can't access the variable mov globally if it's set in the anonymous function reference assigned to the window.onload event handler because mov is a local variable in that case. You could move the mov variable definition to outside the window.onload event handler definition (in other words, actually make it a global variable definition), and then you won't have to declare it twice (which is kind of nice because DOM calls are computationally expensive). Link to comment Share on other sites More sharing options...
benjamin.morgan Posted December 15, 2012 Author Share Posted December 15, 2012 I tried to do that! http://jsfiddle.net/98d6X/4/ but it didn't work . It should be a global variable. This is what I meant with the first part. I had to change this. http://awesomescreenshot.com/076pvoa39 Link to comment Share on other sites More sharing options...
HartleySan Posted December 15, 2012 Share Posted December 15, 2012 Not sure what to tell you, but I put your code in an HTML file and it runs fine in Chrome, FF and IE9. Here's the exact code I used. You can copy and paste the following code into a blank HTML file and it should work fine. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>setInterval test</title> <style> #move { border: #00F solid 1px; position: relative; width: 100px; } </style> </head> <body> <p id="move">MOVING</p> <button id="moveM">Move the text</button> <script> var mov = document.getElementById('move'); function move() { var int = setInterval(function () { mov.style.left = parseInt(mov.style.left) + 50 + 'px'; }, 500); } window.onload = function () { mov.style.left = '0px'; document.getElementById('moveM').onclick = move; }; </script> </body> </html> Lemme know what you find. Thanks. Link to comment Share on other sites More sharing options...
benjamin.morgan Posted December 15, 2012 Author Share Posted December 15, 2012 Thanks! I appreciate it. I guess it is just something with jsFiddle. I think I will start using codepen http://codepen.io/joe/pen/odfib Link to comment Share on other sites More sharing options...
benjamin.morgan Posted December 15, 2012 Author Share Posted December 15, 2012 http://codepen.io/benjaminmorgan/pen/drtCx Yay! I got everything working right! I also found out that if you nest intervals do NOT name them the same thing even if the interval gets cleared. It caused a weird bug! Link to comment Share on other sites More sharing options...
HartleySan Posted December 16, 2012 Share Posted December 16, 2012 It's not a bug, it's JS's normal behavior. Nested function definitions have access to variables in the outer functions. As such, you are literally overwriting the old variable if you do that. Also, I imagine that the reason your code didn't work before has something to do with JSFiddle. I've heard of such things before, but I never use the site, so don't really know. Lastly, as a small piece of advice, I wouldn't name a variable "int". It's not wrong, but it's advisable not to. In the future, if strict typecasting during variable declarations becomes possible in JS, your code will likely break with a variable called "int". Doesn't hurt to plan ahead. Link to comment Share on other sites More sharing options...
benjamin.morgan Posted December 16, 2012 Author Share Posted December 16, 2012 Thanks, Yeah, it was jsFIddle causing one of the problems, but the line I needed was document.getElementById('move').style.left = '10px'; Link to comment Share on other sites More sharing options...
Recommended Posts