Close a JS popup box

Discussion in 'Programming' started by fadetoblack22, Oct 19, 2009.

  1. #1
    I have a JS popup box that uses the code at the bottom of this message. However it doesn't have a close function.


    It is displayed with this html:

    <div id="xbox">
    				<h1>test</h1>
    				<p>
    				Welcome to <a href="http://www.phpletter.com/">Phpletter.com</a> Open Source Centre!</p>
    
    <p>The <a href="http://www.phpletter.com/">Phpletter.com</a> Open Source Development Team is dedicated to developing web2.0 ready PHP Based Projects, powered by Jquery Javascript Library
    
    <a href="#" onclick="return xbox.show()">Show</a>  
    <a href="#" onclick="return xbox.hide()"">Hide</a>  
    
    
    <p>Our goal is to provide you with easy to use powerful tools that allow you to maintain the contents, images and files of your web site, and provide PHP developers with time saving web based applications.</p>
    				</p>
    			</div>
    HTML:


    This is the code that I am using to close it:

    <script type="text/javascript"> 
    xbox.hide = function()  
    {  
        xbox.menu.style.display='none';  
        return false;  
    }  
      
    xbox.show = function()  
    {  
        xbox.menu.style.display='block';  
        return false;  
    }  
    </script>
    HTML:

    Is any one able to help?



    /**
    *	@auth Logan Cai
    *	@email cailongqun#yahoo.com.cn  (replace # with @)
    *	@ this plugin is based on the nice javascript provided by http://www.jtricks.com/javascript/navigation/floating.html
    *   @version 1.0
    *	
    */
    function floatingBox(box, options, index)
    {
        this.targetX = -250;
        this.targetY =  10;
        this.interval = 50;
        this.menu = box;
        this.index = index;
        this.options = options;
        this.hasInner = typeof(window.innerWidth) == 'number';
        this.hasElement =  document.documentElement
            && document.documentElement.clientWidth;    
    	this.move = function ()
    	{//move function start
    		jQuery(this.menu).css('left', this.nextX + 'px').css('top', this.nextY + 'px');
    	};  
    	this.computeShifts = function ()
    	{
    	    var de = document.documentElement;	
    	    this.shiftX =
    	        this.hasInner
    	        ? pageXOffset
    	        : this.hasElement
    	          ? de.scrollLeft
    	          : document.body.scrollLeft;
    	    if (this.targetX < 0)
    	    {
    	        if (this.hasElement && this.hasInner)
    	        {
    	            // Handle Opera 8 problems
    	            this.shiftX +=
    	                de.clientWidth > window.innerWidth
    	                ? window.innerWidth
    	                : de.clientWidth
    	        }
    	        else
    	        {
    	            this.shiftX +=
    	                this.hasElement
    	                ? de.clientWidth
    	                : this.hasInner
    	                  ? window.innerWidth
    	                  : document.body.clientWidth;
    	        }
    	    }
    	
    	    this.shiftY = 
    	        this.hasInner
    	        ? pageYOffset
    	        : this.hasElement
    	          ? de.scrollTop
    	          : document.body.scrollTop;
    	    if (this.targetY < 0)
    	    {
    	        if (this.hasElement && this.hasInner)
    	        {
    	            // Handle Opera 8 problems
    	            this.shiftY +=
    	                de.clientHeight > window.innerHeight
    	                ? window.innerHeight
    	                : de.clientHeight
    	        }
    	        else
    	        {
    	            this.shiftY +=
    	                this.hasElement
    	                ? document.documentElement.clientHeight
    	                : this.hasInner
    	                  ? window.innerHeight
    	                  : document.body.clientHeight;
    	        }
    	    }
    	};
    	this.doFloat = function()
    	{
    	    var stepX, stepY;
    	
    	    this.computeShifts();
    	
    	    stepX = (this.shiftX + 
    	        this.targetX - this.nextX) * .07;
    	    if (Math.abs(stepX) < .5)
    	    {
    	        stepX = this.shiftX +
    	            this.targetX - this.nextX;
    	    }
    	
    	    stepY = (this.shiftY + 
    	        this.targetY - this.nextY) * .07;
    	    if (Math.abs(stepY) < .5)
    	    {
    	        stepY = this.shiftY + 
    	            this.targetY - this.nextY;
    	    }
    	
    	    if (Math.abs(stepX) > 0 ||
    	        Math.abs(stepY) > 0)
    	    {
    	        this.nextX += stepX;
    	        this.nextY += stepY;
    	        this.move();
    	    }
    		
    	    setTimeout('funcFloating[' + this.index + '].func()', this.interval);
    	};	
    	this.initSecondary = function()
    	{
    	    this.computeShifts();
    	    this.nextX = this.shiftX +
    	        this.targetX;
    	    this.nextY = this.shiftY +
    	        this.targetY;
    	    this.move();
    	};	
    	this.position = function(targetX, targetY)
    	{
    		if(typeof(targetX) == 'number')
    		{
    			this.targetX = targetX;
    		}else if(typeof(targetX) == 'string')
    		{
    			switch(targetX)
    			{
    				case 'left':
    					this.targetX = 5;
    					break;
    				case 'right':
    					this.targetX = -((jQuery(this.menu).outerWidth()) + 5);
    					break;									
    			}
    			
    		}	
    		if(typeof(targetY) == 'number')
    		{
    			this.targetY = targetY;
    		}else if(typeof(targetY) == 'string')
    		{
    			switch(targetY)
    			{
    				case 'top':
    					this.targetY= 5;
    					break;
    				case 'bottom':
    
    					this.targetY = -((jQuery(this.menu).outerHeight() + 5));
    					
    					break;								
    			}
    			
    		}				
    		
    	};
    	this.init = function()
    	{
    		jQuery(this.menu).css('position', 'absolute');
    		if(typeof(this.options)  == 'object')
    		{
    			for(var i in this.options)
    			{
    				switch(i)
    				{
    					
    					case 'targetX':
    					case 'targetY':
    						if(typeof(this.options[i]) == 'number')
    						{
    							this[i] = this.options[i];
    						}else if(typeof(this.options[i]) == 'string')
    						{
    							switch(this.options[i])
    							{
    								case 'top':
    									this.targetY= 5;
    									break;
    								case 'bottom':
    									this.targetY = -((jQuery(this.menu).outerHeight() + 5));									
    									break;
    								case 'left':
    									this.targetX = 5;
    									break;
    								case 'right':
    									this.targetX = -((jQuery(this.menu).outerWidth()) + 5);
    									break;									
    							}
    							
    						}
    						break;	
    					default:
    						this[i] = this.options[i];				
    				}
    			}
    		}		
    		
    	    this.initSecondary();
    	    this.doFloat();
    	}
    		      
    };
    
    // Some browsers init scrollbars only after
    // full document load.
    var funcFloating = {};
    jQuery.fn.floating = function(options)
    {
    	return jQuery(this).each(
    	
    		function(i)
    		{		
    			var nextIndex = 0;
    			for(var index in funcFloating)
    			{
    				nextIndex = parseInt(index);
    			}	
    			funcFloating[nextIndex + 1] = {};	
    			funcFloating[nextIndex + 1].box = this;	
    			funcFloating[nextIndex + 1].obj = new floatingBox(this, options, (nextIndex + 1));
    			funcFloating[nextIndex + 1].func = function(){ funcFloating[nextIndex + 1].obj.doFloat(); };
    			if (document.layers)
    			{
    				funcFloating[nextIndex + 1].obj.init();
    			}else
    			{
    				
    				funcFloating[nextIndex + 1].obj.init();
    				funcFloating[nextIndex + 1].obj.initSecondary();
    			}
    			
    		}
    	);
    };
    jQuery.fn.floatingPosition = function(targetX, targetY)
    {
    	return jQuery(this).each(
    	
    		function(i)
    		{	
    			for(var j in funcFloating)
    			{
    				if(funcFloating[j].box == this)
    				{
    					funcFloating[j].obj.position(targetX, targetY);
    				}
    			}
    			
    		}
    	);	
    };
    Code (markup):
     
    fadetoblack22, Oct 19, 2009 IP
  2. fadetoblack22

    fadetoblack22 Well-Known Member

    Messages:
    2,399
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    160
    #2
    As no one replied, I have changed what I am doing, so the help is no longer required :)
     
    fadetoblack22, Oct 19, 2009 IP