SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy 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>

  2. #2
    SitePoint Addict jtrelfa's Avatar
    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;
    Then throughout your animate object, use "me" instead of "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); 
    		} 
    	};
    }
    You'll also notice that I removed the parentheses from the setTimeout function.

    HTH,

    Jon

  3. #3
    SitePoint Member
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •