SitePoint Sponsor |
|
User Tag List
Results 1 to 3 of 3
Thread: Having OOP problems
-
Sep 20, 2006, 19:35 #1
- Join Date
- Sep 2006
- Posts
- 2
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Having OOP problems
Hey guys. I just found sitepoint and its niice (good articles). Anyways, I would appreciate any help I can get. I just learned OOP and I am blown away. I like it. I am trying to make an animation script just for fun (not going to use the libraries available out there yet). I keep getting an error. I made this function called animate and it take 3 parameters:
id
prop
target_value
I think the main problem is the nested function. I am trying to do something recursive here within the function. I don't think I am passing the values back. Please help - I think I am stomped.
HTML Code:<html> <style> body { font-family:Century Gothic; font-size:12px; } #test_box { padding:5px; height:150px; width:150px; border:1px solid gray; position:absolute; top:50px; } </style> <script src="prototype.js" type="text/javascript"></script> <script language="javascript"> function getStyle(id, prop) { var obj = document.getElementById(id); if (obj.currentStyle) var curr_value = obj.currentStyle[prop]; else if (window.getComputedStyle) var curr_value = document.defaultView.getComputedStyle(obj,null).getPropertyValue(prop); return curr_value; } function animate(id, prop, target_value) { this.id = id; // Object id to be moved this.prop = prop; // Object style to be changed this.target_value = target_value; // Resulting value this.obj = $(this.id); // Reference the object this.move = function () { // Submethod to move var current_value = $(this.id).offsetLeft; $('curr_value').innerHTML = current_value; if (this.target_value < current_value) { // alert("target value is less than current value"); } else if (this.target_value > current_value) { $('test_box').style.left = parseInt(current_value) + 10 + 'px'; t = setTimeout(this.move(), 100); } else if (this.target_value == current_value) { clearTimeout(t); } } this.resize = function () { // Submethod being developed } } </script> </head> <body> <input type="button" value="get value" onclick="alert(getStyle('test_box', 'left'));" /> <input type="button" value="move left" onclick="move1 = new animate('test_box', 'left', 500); move1.move();" /> <p><div id="test_box"> This is a test box. </div> <div style="position:absolute; bottom:5px; left:5px;"> <table> <tr> <td>left</td> <td id="curr_value"></td> </tr> </table> </div> </body> </html>
-
Sep 21, 2006, 05:22 #2
- Join Date
- Oct 2004
- Location
- Troy, Mi
- Posts
- 231
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Get rid of your "this" direct reference. "this" refers to something else once you've instantiated the class. Change it around so that you create an internal var that references "this":
Code:var me = this;
Code:var animate = function(id, prop, target_value) { var me = this; me.id = id; // Object id to be moved me.prop = prop; // Object style to be changed me.target_value = target_value; // Resulting value me.obj = $(id); // Reference the object me.move = function() { var current_value = me.obj.offsetLeft; $('curr_value').innerHTML = current_value; if (me.target_value < current_value) { // //alert("target value is less than current value"); } else if (me.target_value > current_value) { $('test_box').style.left = parseInt(current_value) + 10 + 'px'; t = setTimeout(me.move, 100); } else if (me.target_value == current_value) { clearTimeout(t); } }; }
HTH,
Jon
-
Sep 21, 2006, 19:57 #3
- Join Date
- Sep 2006
- Posts
- 2
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
pretty cool. thanks man. i see you declared an instance within the function. ok ok. now time to add some calc equations to the speed.
Bookmarks