Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Extending an Element

    What I am trying to do is create a 'virtual' pop-up using javascript. It is a class that is essentially a span with a few added functions to place easily and show it. What I want to do is extend the span class so that I don't have to create a function for every attribute that I want to change and I don't want to have to write popup.container.firstChild.style.color='foo'; and things like that. I would instead want it to use standard style elements like popup.style.backroundColor='green'; for an example. I feel like this should be easy.

    Thanks for any help.
    Kevin

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    945
    Thanks
    19
    Thanked 205 Times in 203 Posts
    Code:
    <html>
    <span id="expandedSpan" style="display:none">I'm a virtual popup</span>
    
    
    <script>
     var expandedSpan = (function(){
     this.el = document.getElementById('expandedSpan')
     el.style.position = 'absolute';
     el.style.display = 'none';
     el.left = el.style.left;
     el.top = el.style.top;
     this.show = function(){el.style.display='block'};
     this.hide = function(){el.style.display='none'};
     this.moveTo = function(x,y){el.style.left = y;el.style.top = x;}
     return this;
    })()
    
    expandedSpan.show();
    expandedSpan.moveTo(50,50);
    
    </script>
    </html>

  • #3
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DaveyErwin View Post
    Code:
    <html>
    <span id="expandedSpan" style="display:none">I'm a virtual popup</span>
    
    
    <script>
     var expandedSpan = (function(){
     this.el = document.getElementById('expandedSpan')
     el.style.position = 'absolute';
     el.style.display = 'none';
     el.left = el.style.left;
     el.top = el.style.top;
     this.show = function(){el.style.display='block'};
     this.hide = function(){el.style.display='none'};
     this.moveTo = function(x,y){el.style.left = y;el.style.top = x;}
     return this;
    })()
    
    expandedSpan.show();
    expandedSpan.moveTo(50,50);
    
    </script>
    </html>
    Thank you but unless I am mistaken you still have to run expandedSpan.el.style.color = #000000; and if you change expandedSpan.el.top it won't modify el.style.top

    Thank you for your try though.

  • #4
    Regular Coder
    Join Date
    Aug 2010
    Posts
    945
    Thanks
    19
    Thanked 205 Times in 203 Posts
    Quote Originally Posted by youarefunny View Post
    Thank you but unless I am mistaken you still have to run expandedSpan.el.style.color = #000000; and if you change expandedSpan.el.top it won't modify el.style.top

    Thank you for your try though.
    Code:
    <html>
    <span id="expandedSpan" style="display:none">I'm a virtual popup</span>
    
    
    <script>
     var expandedSpan = (function(){
     this.el = document.getElementById('expandedSpan');
     el.style.position = 'absolute';
     el.style.display = 'none';
     this.show = function(){el.style.display='block'};
     this.hide = function(){el.style.display='none'};
     this.moveTo = function(x,y){el.style.left = y;el.style.top = x;};
     this.Top = function(){return el.style.top};
     this.setColor = function(color){el.style.color = color};
     this.Color = function(){return el.style.color};
     return this;
    })()
    
    expandedSpan.show();
    expandedSpan.moveTo(50,50);
    alert(expandedSpan.Top())
    expandedSpan.moveTo(60,60);
    alert(expandedSpan.Top());
    expandedSpan.setColor('red');
    alert(expandedSpan.Color());
    </script>
    </html>

  • #5
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DaveyErwin View Post
    Code:
    <html>
    
     this.Color = function(){return el.style.color};
    
    expandedSpan.setColor('red');
    
    </html>
    This is were I am now but I don't want a new function for every setting i need to set. I was wondering if you could add new functions (meathos) to a span object or something.

  • #6
    Regular Coder
    Join Date
    Aug 2010
    Posts
    945
    Thanks
    19
    Thanked 205 Times in 203 Posts
    try this with the above code ...

    expandedSpan.el.style.color = "green";

    if you dont like the get and set for color
    just leave it off

    Code:
    <html>
    <span id="expandedSpan" style="display:none">I'm a virtual popup</span>
    
    
    <script>
     var expandedSpan = (function(){
     this.el = document.getElementById('expandedSpan');
     el.style.position = 'absolute';
     el.style.display = 'none';
     this.show = function(){el.style.display='block'};
     this.hide = function(){el.style.display='none'};
     this.moveTo = function(x,y){el.style.left = y;el.style.top = x;};
     this.Top = function(){return el.style.top};
     return this;
    })()
    
    expandedSpan.show();
    expandedSpan.moveTo(50,50);
    alert(expandedSpan.Top())
    expandedSpan.moveTo(60,60);
    alert(expandedSpan.Top());
    expandedSpan.el.style.color = 'red'
    alert(expandedSpan.el.style.color);
    
    
    
    </script>
    </html>
    Last edited by DaveyErwin; 10-12-2010 at 11:43 PM.

  • #7
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DaveyErwin View Post
    try this with the above code ...

    expandedSpan.el.style.color = "green";
    Yes this works but I was wondering if there was any way to get rid of the .el..

  • #8
    Regular Coder
    Join Date
    Aug 2010
    Posts
    945
    Thanks
    19
    Thanked 205 Times in 203 Posts
    of course you dont need any of that code at all

    var expandedSpan = document.getElementById('expandedSpan');
    expandedSpan.style.color = 'green';

  • #9
    Regular Coder
    Join Date
    Aug 2010
    Posts
    945
    Thanks
    19
    Thanked 205 Times in 203 Posts
    Quote Originally Posted by youarefunny View Post
    Yes this works but I was wondering if there was any way to get rid of the .el..
    yes just have it return el instead of returning this

  • #10
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DaveyErwin View Post
    yes just have it return el instead of returning this
    What exactly do you mean? Could you please give me an example.

  • #11
    Regular Coder
    Join Date
    Aug 2010
    Posts
    945
    Thanks
    19
    Thanked 205 Times in 203 Posts
    Quote Originally Posted by youarefunny View Post
    What exactly do you mean? Could you please give me an example.
    Well, let's do this , you post some code
    and i will help you make it work just as
    you would like it to work.

  • #12
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Code:
    function popUp ( content )
    {
    	this.CONTAINER = document.createElement('div');
    	this.CONTAINER.style.margin = '3px';
    	this.CONTAINER.style.position = 'fixed';
    	
    	this.xcent = true;
    	this.ycent = true;
    	
    	this.CLOSE = document.createElement('a');
    	this.CLOSE.onclick = function(){$(this.parentNode).hide();};
    	this.CLOSE.innerHTML = 'Close';
    	this.CLOSE.style.textAlign = 'right';
    	
    	this.SPAN = document.createElement('span');
    	this.SPAN.style.display = 'inline';
    	
    	this.timeout = null;
    	
    	/////	Set-up
    	this.CONTAINER.style.display = 'none';
    	if ( content ) this.SPAN.innerHTML = content;
    	
    	document.body.appendChild(this.CONTAINER);
    	this.CONTAINER.appendChild(this.CLOSE);
    	this.CONTAINER.appendChild(this.SPAN);
    	
    	this.pos = function ( x, y )
    	{	
    		if (x)
    		{
    			if ( isNaN(parseInt(x)) ) 	//	Center
    			{
    				this.xcent = true;	//	Set it to be centered when it is displayed
    				
    				if ( this.CONTAINER.style.display == 'block' ) this.display();	//	If it is already displayed center it.
    			}
    			else if ( parseInt(x) < 0 )	//	Position from right of screen
    			{
    				this.CONTAINER.style.right = x.substr(1);
    				this.xcent = false;
    			}
    			else
    			{
    				this.CONTAINER.style.left = x;
    				this.xcent = false;
    			}
    			
    		}
    		
    		if (y)
    		{
    			if ( isNaN(parseInt(y)) ) 	//	Center
    			{
    				this.ycent = true;	//	Set it to be centered when it is displayed
    				
    				if ( this.CONTAINER.style.display == 'block' ) this.display();	//	If it is already displayed center it.
    			}
    			else if ( parseInt(y) < 0 )	//	Position from right of screen
    			{
    				this.CONTAINER.style.bottom = y.substr(1);
    				this.ycent = false;
    			}
    			else
    			{
    				this.CONTAINER.style.top = y;
    				this.ycent = false;
    			}
    			
    		}
    	};
    	
    	this.size = function (x, y)
    	{		
    		if (x)
    		{
    			this.CONTAINER.style.width = x;			
    		}
    		
    		if (y)
    		{
    			this.CONTAINER.style.height = y;
    		}
    	};
    	this.close = function ( mode )
    	{
    		if (mode)	this.CLOSE.style.display = 'block';
    		else		this.CLOSE.style.display = 'none';
    	};
    		
    	this.display = function ( )
    	{
    		this.CONTAINER.style.display = 'block';
    		
    		if ( this.xcent == true )
    		{
    			var x = window.innerWidth / 2;		//	Half the width of the window
    			x -= this.CONTAINER.offsetWidth / 2	//	Take away half the size of the element
    			
    			this.CONTAINER.style.left = x + 'px';	//	Put it there
    		}
    		if ( this.ycent == true )
    		{
    			var y = window.innerHeight / 2;		//	Half the width of the window
    			y -= this.CONTAINER.offsetHeight / 2	//	Take away half the size of the element
    			
    			this.CONTAINER.style.top = y + 'px';	//	Put it there
    		}
    		
    		this.CONTAINER.style.display = 'none';
    		$(this.CONTAINER).show(500);
    		
    	};
    	
    	this.hide = function ( )	{$(this.CONTAINER).hide(1000);};
    }
    Please note that $(this.foo).hide() is jquery basicly animates setting style.display to none.

    I would like to change this so instead of.
    popUp.CONTAINER.style.foo
    I could do
    popUp.style.foo

    Thank you so much

  • #13
    Regular Coder
    Join Date
    Aug 2010
    Posts
    945
    Thanks
    19
    Thanked 205 Times in 203 Posts
    Code:
    <html>
    <body>
    </body>
    <script>    function PopUp(content) {
            this.CONTAINER = document.createElement('div');
            this.CONTAINER.style.margin = '3px';
            this.CONTAINER.style.position = 'fixed';
    
            this.xcent = true;
            this.ycent = true;
    
            this.CLOSE = document.createElement('a');
            this.CLOSE.onclick = function () { $(this.parentNode).hide(); };
            this.CLOSE.innerHTML = 'Close';
            this.CLOSE.style.textAlign = 'right';
    
            this.SPAN = document.createElement('span');
            this.SPAN.style.display = 'inline';
    
            this.timeout = null;
    
            /////	Set-up
            //this.CONTAINER.style.display = 'none';
            if (content) this.SPAN.innerHTML = content;
    
            document.body.appendChild(this.CONTAINER);
            this.CONTAINER.appendChild(this.CLOSE);
            this.CONTAINER.appendChild(this.SPAN);
    
            this.pos = function (x, y) {
                if (x) {
                    if (isNaN(parseInt(x))) 	//	Center
                    {
                        this.xcent = true; //	Set it to be centered when it is displayed
    
                        if (this.CONTAINER.style.display == 'block') this.display(); //	If it is already displayed center it.
                    }
                    else if (parseInt(x) < 0)	//	Position from right of screen
                    {
                        this.CONTAINER.style.right = x.substr(1);
                        this.xcent = false;
                    }
                    else {
                        this.CONTAINER.style.left = x;
                        this.xcent = false;
                    }
    
                }
    
                if (y) {
                    if (isNaN(parseInt(y))) 	//	Center
                    {
                        this.ycent = true; //	Set it to be centered when it is displayed
    
                        if (this.CONTAINER.style.display == 'block') this.display(); //	If it is already displayed center it.
                    }
                    else if (parseInt(y) < 0)	//	Position from right of screen
                    {
                        this.CONTAINER.style.bottom = y.substr(1);
                        this.ycent = false;
                    }
                    else {
                        this.CONTAINER.style.top = y;
                        this.ycent = false;
                    }
    
                }
            };
    
            this.size = function (x, y) {
                if (x) {
                    this.CONTAINER.style.width = x;
                }
    
                if (y) {
                    this.CONTAINER.style.height = y;
                }
            };
            this.close = function (mode) {
                if (mode) this.CLOSE.style.display = 'block';
                else this.CLOSE.style.display = 'none';
            };
    
            this.display = function () {
                this.CONTAINER.style.display = 'block';
    
                if (this.xcent == true) {
                    var x = window.innerWidth / 2; 	//	Half the width of the window
                    x -= this.CONTAINER.offsetWidth / 2	//	Take away half the size of the element
    
                    this.CONTAINER.style.left = x + 'px'; //	Put it there
                }
                if (this.ycent == true) {
                    var y = window.innerHeight / 2; 	//	Half the width of the window
                    y -= this.CONTAINER.offsetHeight / 2	//	Take away half the size of the element
    
                    this.CONTAINER.style.top = y + 'px'; //	Put it there
                }
    
                this.CONTAINER.style.display = 'none';
                //$(this.CONTAINER).show(500);
    
            };
    
            //this.hide = function ( )	{$(this.CONTAINER).hide(1000);};
    	return this.CONTAINER;
        }
    
    
    
        popUp = new PopUp('hi')
        popUp.style.color = 'green'
    
    </script>
    </html>

  • Users who have thanked DaveyErwin for this post:

    youarefunny (10-14-2010)

  • #14
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you for putting me on the right track.

    The only difference it that all the functions now must be a meathod of CONTAINER

    here is the working code:
    Code:
    function popUp ( content )
    {
        this.CONTAINER = document.createElement('div');
        this.CONTAINER.style.margin = '3px';
        this.CONTAINER.style.position = 'fixed';
        
        this.CONTAINER.xcent = true;
        this.CONTAINER.ycent = true;
        
        this.CONTAINER.CLOSE = document.createElement('a');
        this.CONTAINER.CLOSE.onclick = function(){$(this.parentNode).hide();};
        this.CONTAINER.CLOSE.innerHTML = 'Close';
        this.CONTAINER.CLOSE.style.textAlign = 'right';
        
        this.CONTAINER.SPAN = document.createElement('span');
        this.CONTAINER.SPAN.style.display = 'inline';
        
        this.CONTAINER.timeout = null;
        
        /////    Set-up
        this.CONTAINER.style.display = 'none';
        if ( content ) this.CONTAINER.SPAN.innerHTML = content;
        
        document.body.appendChild(this.CONTAINER);
        this.CONTAINER.appendChild(this.CONTAINER.CLOSE);
        this.CONTAINER.appendChild(this.CONTAINER.SPAN);
        
        this.CONTAINER.pos = function ( x, y )
        {    
            if (x)
            {
                if ( isNaN(parseInt(x)) )     //    Center
                {
                    this.xcent = true;    //    Set it to be centered when it is displayed
                    
                    if ( this.style.display == 'block' ) this.display();    //    If it is already displayed center it.
                }
                else if ( parseInt(x) < 0 )    //    Position from right of screen
                {
                    this.style.right = x.substr(1);
                    this.xcent = false;
                }
                else
                {
                    this.style.left = x;
                    this.xcent = false;
                }
                
            }
            
            if (y)
            {
                if ( isNaN(parseInt(y)) )     //    Center
                {
                    this.ycent = true;    //    Set it to be centered when it is displayed
                    
                    if ( this.style.display == 'block' ) this.display();    //    If it is already displayed center it.
                }
                else if ( parseInt(y) < 0 )    //    Position from right of screen
                {
                    this.style.bottom = y.substr(1);
                    this.ycent = false;
                }
                else
                {
                    this.style.top = y;
                    this.ycent = false;
                }
                
            }
        };
        
        this.CONTAINER.size = function (x, y)
        {        
            if (x)
            {
                this.style.width = x;            
            }
            
            if (y)
            {
                this.style.height = y;
            }
        };
        
        this.CONTAINER.color = function ( color )    { this.SPAN.style.color=color;};    
        this.CONTAINER.bgColor = function ( color )    { this.style.backgroundColor=color;};
        this.CONTAINER.close = function ( mode )
        {
            if (mode)    this.CLOSE.style.display = 'block';
            else        this.CLOSE.style.display = 'none';
        };
            
        this.CONTAINER.display = function ( )
        {
            this.style.display = 'block';
            
            if ( this.xcent == true )
            {
                var x = window.innerWidth / 2;        //    Half the width of the window
                x -= this.offsetWidth / 2    //    Take away half the size of the element
                
                this.CONTAINER.style.left = x + 'px';    //    Put it there
            }
            if ( this.ycent == true )
            {
                var y = window.innerHeight / 2;        //    Half the width of the window
                y -= this.offsetHeight / 2    //    Take away half the size of the element
                
                this.style.top = y + 'px';    //    Put it there
            }
            
            this.style.display = 'none';
            $(this).show(500);
            
        };
        
        this.CONTAINER.hide = function ( )    {$(this).hide(1000);};
        return this.CONTAINER;
    }


  •  

    Tags for this Thread

    Posting Permissions

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