Location: PHPKode > scripts > Right Click Pop-up > right-click-pop-up/class.rightclick.php
<?
	/**
	* RightClick Class is a great class to create a simple right click context popup menu to any/all of your web pages.
	* It is very easy to use and work with. If you want multiple popup menus, all different within the page, then instantiate the class each time you print a new menu.
	* The contents of this page are:
	* 	class.rightclick.php
	* 	example.html
	* 	images directory
	*
	* This is my first opensource class, so if there are any issues with it, please let me know via email.
	*
	* I hope this works well for everyone, it has be amazing for me.
	*
	* @author		Dean Berman	<hide@address.com>
	* @version		1.0 - 11/16/2007
	* @copyright	DB Web Development 2007
	*/
    class RightClick {

    	/**
    	* ImagesArray is a default stored array which gives access to the image icons that are associated within the sytem
    	* - standard image size: 14x14
    	* @var	mixed
    	*/
    	private $imagesArray = array(
    		'add' => array('image1' => 'addIcon_01.jpg', 'image2' => 'addIcon_02.jpg'),
    		'copy' => array('image1' => 'copyIcon_01.jpg', 'image2' => 'copyIcon_02.jpg'),
    		'delete' => array('image1' => 'deleteIcon_01.jpg', 'image2' => 'deleteIcon_02.jpg'),
    		'download' => array('image1' => 'downloadIcon_01.jpg', 'image2' => 'downloadIcon_02.jpg'),
    		'edit' => array('image1' => 'editIcon_01.jpg', 'image2' => 'editIcon_02.jpg'),
    		'print' => array('image1' => 'printIcon_01.jpg', 'image2' => 'printIcon_02.jpg'),
    		'save' => array('image1' => 'saveIcon_01.jpg', 'image2' => 'saveIcon_02.jpg'),
    		'search' => array('image1' => 'searchIcon_01.jpg', 'image2' => 'searchIcon_02.jpg'),
    		'upgrade' => array('image1' => 'upgradeIcon_01.jpg', 'image2' => 'upgradeIcon_02.jpg'),
    		'view' => array('image1' => 'viewIcon_01.jpg', 'image2' => 'viewIcon_02.jpg')
    	);

    	/**
    	* RCArray is a private variable that stores the options that the User specifies to be printed in the popup menu.
    	* @var	mixed
    	*/
    	private $rcArray = NULL;

    	private $rcArrayCounter = 0;

    	private $defaultHidDivWidth = 95;

    	/**
    	* RightClick Class Constructor
    	*
    	* @param	void
    	* @return	void
    	*/
        function RightClick() {
        }

        /**
    	* Call this function to clear variable and create a new Right Click popup menu
    	*
    	* @param	void
    	* @return	void
        */
        public function NewRightClick() {
        	$this->rcArrayCounter++;
			unset($this->rcArray);
			$this->rcArray = array();
		}

        /**
        * CreateLink is called to create a link/row in the popup menu
        *
        * @param	string		Label to be displayed in the drop down
        * @param	string		Icon Image Action Type (from $imagesArray)
        * @param	string		HTML On Click Action (url or javascript function)
        * @param	string		HTML On Click Action Type (Value Options: 'javascript' or 'link')
        * @return	void
        */
        public function CreateLink($label, $iconType, $onclickAction, $onclickActionType='javascript') {
        	$this->rcArray[] = array('label' => $label, 'type' => $iconType, 'action' => $onclickAction, 'actionType' => $onclickActionType);
		}

        /**
        * Call GenerateRightClick at the position in the HTML to print your output to the source code/page (can be printed anywhere after you create your HTML Tag ID object in the code.
        *
        * @param	string		HTML Tag ID
        * @return	void
        */
		public function GenerateRightClick($hiddenDivID='hidDiv') {
			if($this->rcArrayCounter == 0) {
        		$this->GenerateCursorJS();
			}
        	$this->GenerateOnContextMenuJS($hiddenDivID);
        	$this->GenerateStyleCSS($hiddenDivID, $this->GetTheLongestLable());
        	$this->GenerateRCHTML($hiddenDivID);
		}

		private function GetTheLongestLable() {
			$maxCharacters = 8;
			$initMaxCharacters = $maxCharacters;
			for($i = 0, $icnt = count($this->rcArray); $i < $icnt; $i++) {
				if(strlen($this->rcArray[$i]['label']) > $maxCharacters) {
					$maxCharacters = strlen($this->rcArray[$i]['label']);
				}
			}
			if($maxCharacters > $initMaxCharacters) {
				return ($this->defaultHidDivWidth + (($maxCharacters - $initMaxCharacters) * 5));
			}
			return $this->defaultHidDivWidth;
		}

		/**
		* GenerateRCHTML function is called from GenerateRightClick to generate the actual source code output to be displayed on the page.
		*
		* @param	string		HTML Tag ID
		* @return	void
		*/
		private function GenerateRCHTML($hiddenDivID) {
?>
			<div id="<?=$hiddenDivID?>">
				<table id="<?=$hiddenDivID?>_table" align="center" width="100%" border="0" cellpadding="0" cellspacing="0">
					<tr align="left">
						<td colspan="2" class="<?=$hiddenDivID?>_X" onclick="document.getElementById('<?=$hiddenDivID?>').style.display = 'none';">&nbsp;&nbsp;X</td>
					</tr>
<?
					$counter = 0;
					for($i = 0, $icnt = count($this->rcArray); $i < $icnt; $i++) {
?>
						<tr valign="middle">
							<td
								align="center"
								class="<?=$hiddenDivID?>_link_mover_img"
								onclick="<?=(($this->rcArray[$i]['actionType'] == 'link') ? "window.location = '{$this->rcArray[$i]['action']}';" : "{$this->rcArray[$i]['action']};")?>"
							><img id="<?=$hiddenDivID?>_link_<?=$i?>_img" src="images/<?=$this->imagesArray[$this->rcArray[$i]['type']]['image2']?>"></td>
							<td
								align="left"
								class="<?=$hiddenDivID?>_link_mout"
								onmouseover="this.className = '<?=$hiddenDivID?>_link_mover';"
								onmouseout="this.className = '<?=$hiddenDivID?>_link_mout';"
								onclick="<?=(($this->rcArray[$i]['actionType'] == 'link') ? "window.location = '{$this->rcArray[$i]['action']}';" : "{$this->rcArray[$i]['action']};")?>"
							><?=$this->rcArray[$i]['label']?></td>
						</tr>
<?
					}
?>
				</table>
			</div>
<?
		}

		/**
		* GenerateOnContextMenuJS is called from GenerateRightClick to print a simple javascript 'window.onload' function for your right click context menu option.
		*
		* @param	string		HTML Tag ID
		* @return	void
		*/
		private function GenerateOnContextMenuJS($hiddenDivID) {
?>
			<script>
				function onLoadFunction_<?=$this->rcArrayCounter?>() {
					document.getElementById('init_<?=$hiddenDivID?>').oncontextmenu = function() {
						document.getElementById('<?=$hiddenDivID?>').style.left = actualX;
						document.getElementById('<?=$hiddenDivID?>').style.top = actualY;
						document.getElementById('<?=$hiddenDivID?>').style.display = 'block';
						return false;
					}
				}
				onLoadFunction_<?=$this->rcArrayCounter?>();
			</script>
<?
		}

		/**
		* GenerateStyleCSS is called from GenerateRightClick to generate the css style in the source code for your popup menu.
		*
		* @param	string		HTML Tag ID
		* @return	void
		*/
		private function GenerateStyleCSS($hiddenDivID, $hiddenDivLength) {
?>
			<style>
				#init_<?=$hiddenDivID?> {
					cursor: url('images/rightclickcursor.gif'), auto;
				}
				#<?=$hiddenDivID?> {
					font-family: Verdana, Arial;
					border: 2px solid #000000;
					position: absolute;
					width: <?=$hiddenDivLength?>px;
					display: none;
					font-weight: bold;
				}
				#<?=$hiddenDivID?>_table {
					font-family: Verdana, Arial;
					font-size: 10px;
					width: 100%;
				}
				#<?=$hiddenDivID?>_table td {
					font-family: Verdana, Arial;
					height: 20px;
					padding-top: 2px;
					padding-bottom: 2px;
/*					padding-left: 5px;*/
					font-size: 10px;
					font-weight: bold;
				}
				.<?=$hiddenDivID?>_X {
					font-family: Verdana, Arial;
					background-color: #888888;
					color: #FFFFFF;
					cursor: pointer;
					border-bottom: 1px solid #000000;
				}
				.<?=$hiddenDivID?>_link_mout {
					font-family: Verdana, Arial;
					background-color: #CCCCCC;
					color: #000000;
					text-decoration: none;
					padding-left: 2px;
				}
				.<?=$hiddenDivID?>_link_mover {
					font-family: Verdana, Arial;
					background-color: #AAAAAA;
					color: #000000;
					text-decoration: underline;
					cursor: pointer;
					padding-left: 2px;
				}
				.<?=$hiddenDivID?>_link_mout_img {
					background-color: #CCCCCC;
					border-right: 1px solid #000000;
				}
				.<?=$hiddenDivID?>_link_mover_img {
					background-color: #AAAAAA;
					cursor: pointer;
					border-right: 1px solid #000000;
				}
			</style>
<?
		}

		/**
		* GenerateCursorJS is called from GenerateRightClick to generate the cursor position on the page.
		*
		* @param	void
		* @return	void
		*/
		private function GenerateCursorJS() {
?>
			<script>
				/*
					The following JS is used for Mouse axis, etc.
				*/
				var actualX = 0;
				var actualY = 0;

				var IE = ((document.all) ? true : false);

				// If NS -- that is, !IE -- then set up for mouse capture
				if(!IE) {
					document.captureEvents(Event.MOUSEMOVE);
				}

				// Set-up to use getMouseXY function onMouseMove
				document.onmousemove = getMouseXY;

				// Temporary variables to hold mouse x-y pos.s
				var tempX = 0;
				var tempY = 0;

				// Main function to retrieve mouse x-y pos.s

				function getMouseXY(e) {
					if(IE) { // grab the x-y pos.s if browser is IE
						tempX = event.clientX + document.body.scrollLeft;
						tempY = event.clientY + document.body.scrollTop;
					} else {  // grab the x-y pos.s if browser is NS
						tempX = e.pageX;
						tempY = e.pageY;
					}
					// catch possible negative values in NS4
					if(tempX < 0) {
						tempX = 0;
					}
					if(tempY < 0) {
						tempY = 0;
					}
					// show the position values in the form named Show
					// in the text fields named MouseX and MouseY
					actualX = tempX;
					actualY = tempY;
					return true
				}
				/*
					End
				*/
			</script>
<?
		}
    }
?>
Return current item: Right Click Pop-up