SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist
    Join Date
    Aug 2004
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how -> OOP in js using this keyword

    I have several function to cause an animated ease movement -its working.
    However, i currently have it working using global variables as I don't know how to convert it to oop.

    For each node that has the onclick event... when clicked i would like another instance to be created. If clicked again...for backward movement I would like to use the same instance.

    Thanks for the help:
    Working example is at:
    http://leblanc.blogsyndrome.com/b/Be...h+PHP#comments
    click on expand and collapse (note: for some reason collapse only works in firefox)
    PHP Code:
    // Leblanc Meneses
        
    var node;
        
        var 
    _end;
        var 
    t;
        
        var 
    totalheight;
        var 
    defaultheight=200;

        
        
    //expand/collapse ease
        
    function expcollease(n,action){
             
    x  n.previousSibling;
             
    node  x.previousSibling;
             
    _end=false;
             
    t=0;
             
             if(
    action=='expand'){
               
    totalheight node.scrollHeight;
               if(
    totalheight<=defaultheight//small comment in which space is sufficent wit defaultheight already given
                
    return;
               
    applyexpandeffect();
               
    n.setAttribute('onclick',"expcollease(this,'collapse');");
               
    styleupdate n.getAttribute("style").replace(/expand/g"collapse");
               
    n.setAttribute('style',styleupdate);
             }if(
    action=='collapse'){
               
    totalheight parseInt(node.style.height);
               if(
    totalheight<=defaultheight)
                return;
                
    applycollapseeffect();
               
    n.setAttribute('onclick',"expcollease(this,'expand');");
               
    styleupdate n.getAttribute("style").replace(/collapse/g"expand");
               
    n.setAttribute('style',styleupdate);
             }else{
               return;
             }
        }
        
             
        function 
    applyexpandeffect(){
             if(!
    _end){
               
    t=t+.01;
               var 
    unitSign easecurve(t);
               if(
    unitSign >-(defaultheight-20)){//
                      //stop once fully expanded //reaches total height
                      
    if( parseInt(node.style.height) >= totalheight){
                         
    _end=true;
                      }else{
                         
    //parseInt(node.style.height)+ unitSign   - constantly increments not what we want function should return new value of curve
                         
    node.style.height=( unitSign defaultheight )+'px ';
                      }
               }
               var 
    window.setTimeout("applyexpandeffect();"10 );
             }
         }
         

        function 
    applycollapseeffect(){
             if(!
    _end){
               
    t=t+.01;
               var 
    unitSign easecurve(t);
                  
    //stop once back to default value
                  
    if( parseInt(node.style.height) <= defaultheight){
                     
    _end=true;
                  }else{
                     
    //parseInt(node.style.height)+ unitSign   - constantly increments not what we want function should return new value of curve
                     
    node.style.height=( totalheight-unitSign)+'px ';
                  }
               var 
    window.setTimeout("applycollapseeffect();"10 );
             }
         }


        function 
    easecurve(x){
            return (
    totalheight)*(1-Math.exp(-x/1));
        } 
    example is a solution to help me create what was said here: http://www.codingforums.com/showpost...8&postcount=11
    Last edited by leblanc; Oct 15, 2005 at 18:15. Reason: added extra link

  2. #2
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's an example of something you could try:
    Code:
    <html>
    
    <script type="text/javascript" language="javascript">
    <!-- Hide from browsers without javascript
    
    var objs_collection = {};  //to hold the objects created
    
    function MyObject(divNum) //constructor function
    {
    	this.color = "blue";
    	this.num = divNum;
    }
    
    function createObj(div) //calls the constructor function if no object exists for that node
    {
    	if(!div.clicked)  //when the div is first clicked, the 'clicked' property does not exist
    	{
    		var divNum = div.id.charAt(1); //get the div number
    		objs_collection[divNum] = new MyObject(divNum);  //create a new object
    		
    		div.clicked = "yes";  //attaches the 'clicked' property to the js div object
    		alert("object created");
    	}
    	else
    	{
    		alert("NO object created");
    	}
    }
    
    function show()  //display the objects
    {
    	var str = "";
    
    	var obj;
    	for(obj in objs_collection)
    	{
    		str += "An object with num = " + objs_collection[obj].num + " exists.\n"
    	}
    	alert(str);
    }
    
    // End hiding -->
    </script>
    </head>
    <body>
    
    <div id="d0" onclick="createObj(this)">div0-click me</div>
    <div id="d1" onclick="createObj(this)">div1-click me</div>
    <div>&nbsp;</div>
    <div onclick="show()">click to see the existing objects</div>
    
    </body>
    </html>

  3. #3
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or, you could attach the object directly to the node if that suits your purposes better:

    Code:
    <html>
    <script type="text/javascript" language="javascript">
    <!-- Hide from browsers without javascript
    
    function MyObject(color) //constructor function
    {
    	this.color = color;
    }
    
    function createObj(div, color) 
    {
    	if(!div.obj)  //when the div is first clicked, the 'obj' property for the div does not exist
    	{
    		div.obj = new MyObject(color);  //create a new object and attach it to the div
    		alert("object created");
    	}
    	else
    	{
    		alert("NO object created");
    	}
    }
    
    function show()  //display the objects
    {
    	var str="";
    	var divs = document.getElementsByTagName("div");  //get all the divs
    	for(var i = 0, len = divs.length; i < len; i++)
    	{
    		if(divs[i].obj) //tests whether the div has an obj property
    		{
    			str += "There is a " + divs[i].obj.color + " object for " +divs[i].id +".\n";
    		}
    	}
    	alert(str);  //display the results
    }
    
    // End hiding -->
    </script>
    </head>
    <body>
    
    <div id="d0" onclick="createObj(this, 'red')">div0-click me</div>
    <div id="d1" onclick = "createObj(this, 'blue')">div1-click me</div>
    <div>&nbsp;</div>
    <div onclick="show()">click to see the existing objects</div>
    
    </body>
    </html>

  4. #4
    SitePoint Evangelist
    Join Date
    Aug 2004
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Perfect!!!

    Your a lot of help - thanks!


    PHP Code:
    function createObj(div//calls the constructor function if no object exists for that node
    {
        if(!
    div.clicked)  //when the div is first clicked, the 'clicked' property does not exist
        
    {
            var 
    divNum div.id.charAt(1); //get the div number
            
    objs_collection[divNum] = new MyObject(divNum);  //create a new object
            
            
    div.clicked "yes";  //attaches the 'clicked' property to the js div object
            
    alert("object created");
        }
        else
        {
            
    alert("NO object created");
        }


    In my scenario I will have to change values on the 2nd click... which is what you have as:
    PHP Code:
    else
    {
       
    alert("NO object created");

    How would i grab current values of the object and change them when inside the else statement. Would you happen to have any examples where function MyObject(color) contains member functions?

    Thanks again!!

    - lm

  5. #5
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How would i grab current values of the object and change them when inside the else statement.
    In that case, it would be more helpful to attach the object to the node, like in my second example, rather than store the objects in an array. Inside the createObj() function--including the else branch--the 'div' parameter is a reference to the node that was clicked. So, you can use div.obj to refer to the object that was previously attached to the node, and then you can change any of the object's properties or call it's methods.

    Note: Javascript allows you to assign properties and methods to objects at will--even objects the programmer didn't create, like a node object. So, you can take a reference to a node object and assign it a new property, including a reference to another object:

    div.obj = new MyObject();

    Writing Object.someName creates the property.


    Would you happen to have any examples where function MyObject(color) contains member functions?
    Code:
    function func1()
    {
    	alert("hello");
    }
    
    function MyObject(color) //constructor function
    {
    	this.color = color;
    	this.greeting = func1;
    }
    
    var anObj = new MyObject("blue");
    anObj.greeting();
    Or,
    Code:
    function MyObject(color) //constructor function
    {
    	this.color = color;
    	this.show = function(){alert("My color is: " + color)};
    }
    
    var anObj = new MyObject("red");
    anObj.show();
    Note the function execution operator is: (). So, if you write that after the function name or a reference to the function, e.g.:

    anObj.show();

    the function will execute.

  6. #6
    SitePoint Evangelist
    Join Date
    Aug 2004
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    got it working in oop... critiques? - on how it can be better?

    Demo at: http://www.blogsyndrome.com/ajax/oop...cript--op.html

    Thanks 7stud for getting me started in js oop

    now collapse and expand is working in IE and firefox..

    PHP Code:
    <script type="text/javascript">
        
    // t: current time, b: beginning value, c: change in position, d: duration
        //http://www.codingforums.com/showthread.php?t=242
        //expand/collapse ease
        
    function expcollease(n){
             
    x  n.previousSibling;
             
    div  x.previousSibling;
             if(!
    div.obj){  //when the div is first clicked, the 'obj' property for the div does not exist
                
    div.obj = new easeEffect(div);  //create a new object and attach it to the div
                
    div.obj.expand();

                
    styleupdate n.getAttribute("style").replace(/expand/g"collapse");
                
    n.setAttribute('style',styleupdate);
             }else{
                 if(
    div.obj.effect=='collapse'){
                   
    div.obj.totalheight parseInt(div.style.height);
                   if(
    div.obj.totalheight<=div.obj.defaultheight)//small comment in which default space is sufficent height
                      
    return;

                   
    div.obj.resetVariables();
                   
    div.obj.collapse();
                   
    div.obj.effect='expand';

                   
    styleupdate n.getAttribute("style").replace(/collapse/g"expand");
                   
    n.setAttribute('style',styleupdate);
                 }else{
    //expand
                   
    div.obj.totalheight div.scrollHeight;
                   if(
    div.obj.totalheight <= div.obj.defaultheight)
                      return;
                      
                   
    div.obj.resetVariables();
                   
    div.obj.expand();
                   
    div.obj.effect='collapse';

                   
    styleupdate n.getAttribute("style").replace(/expand/g"collapse");
                   
    n.setAttribute('style',styleupdate);
                 }
             }
        }



        function 
    easeEffect(nodeAttachedTo){
            
    //Default Values
            
    this.id 'test';
            
    window[this.id] = this
            
    this.effect 'collapse';
            
    this._stop false;
            
    this.totalheight nodeAttachedTo.scrollHeight;
            
    this.defaultheight=200;
            
    this.duration=10;
            
    this.time 0;
            
            
            
            
    this.resetVariables = function(){
               
    this.time=0;               
               
    this._stop=false;
            }
            
            
            
            
    //f=function, t=sleep amount
            
    this.setTimeOut = function(f,t){
              
    setTimeout("window."+this.id+"."+ft);
            }
            
            
        
            
    this.expand = function(){
                     if(!
    this._stop){
                       
    this.time this.time + (.01);
                       var 
    unitSign this.curve();
                       if(
    unitSign >-(this.defaultheight 20)){//
                              //stop once fully expanded //reaches total height
                              
    if( parseInt(nodeAttachedTo.style.height) >= this.totalheight){
                                 
    this._stop true;
                                 
    this.totalheight parseInt(nodeAttachedTo.style.height);
                              }else{
                                 
    //parseInt(node.style.height)+ unitSign   - constantly increments not what we want function should return new value of curve
                                 
    nodeAttachedTo.style.height=( unitSign this.defaultheight )+'px ';
                              }
                       }
                       
    this.setTimeOut("expand();"this.duration );
                     }
            }
                 
            
            
            
    this.collapse = function(){
                     if(!
    this._stop){
                       
    this.time this.time + (.01);
                       var 
    unitSign this.curve();
                          
    //stop once back to default value
                          
    if( parseInt(nodeAttachedTo.style.height) <= this.defaultheight){
                              
    this._stop true;
                              
    this.totalheight parseInt(nodeAttachedTo.style.height);
                          }else{
                             
    nodeAttachedTo.style.height=( this.totalheight unitSign )+'px ';
                          }
                        
    this.setTimeOut("collapse();"this.duration );
                     }
            }
            
            
            
            
            
    this.curve = function(){
                    return (
    this.totalheight)*(1-Math.exp(-(this.time)/1));
            }
            
        }
        
    </script> 


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
  •