Re: Re: Interactive canvas example

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

 



>JS I suppose. Though it creates a DIV element on demand. The function
>in question is RGraph.Tooltip() in RGraph.common.js.

OK, I found it. Thank you for showing me. I was thinking of something
similar recently.

/**
* Shows a tooltip next to the mouse pointer
*
* @param text The tooltip text
* @return     The tooltip object - a DIV
*/
RGraph.Tooltip = function (canvas, text, x, y)
{
	/**
	* Hide any currently shown tooltip
	*/
	if (RGraph.tooltip) {
		RGraph.tooltip.style.display = 'none';
		RGraph.tooltip = null;
	}

	/**
	* Show a tool tip
	*/
	var obj  = document.createElement('DIV');
	obj.style.position        = 'absolute'
	obj.style.backgroundColor = '#FFFFE1';
	obj.style.border          = '1px solid #333';
	obj.style.borderRight     = '2px solid #333';  // Set the right and
bottom borders to be a little thicker - gives the effect of a drop
shadow
	obj.style.borderBottom    = '2px solid #333'; // Set the right and
bottom borders to be a little thicker - gives the effect of a drop
shadow
	obj.style.display         = 'block'
	obj.style.visibility      = 'visible';
	obj.style.paddingLeft     = '3px';
	obj.style.paddingRight    = '3px';
	obj.style.fontFamily      = 'Tahoma';
	obj.style.fontSize        = '10pt';
	obj.innerHTML             = text;

	document.body.insertBefore(obj, canvas);

	obj.style.left            = (canvas.offsetLeft) + x + 3;
	obj.style.top             = (canvas.offsetTop + y) - obj.offsetHeight;
	
	/**
	* Install the function for hiding the tooltip.
	*
	* FIXME Not sure how this will affect any existing document.onclick event
	*/
	document.body.onclick = function ()
	{
		RGraph.tooltip.style.display = 'none';
	}
	
	/**
	* Keep a reference to the object
	*/
	RGraph.tooltip = obj;
}

Now I wonder why you are creating a new tooltip each time the user
clicks on the graph?
Why not do it the following way?

RGraph.Tooltip = function (canvas, text, x, y)
{
	try {
		if (RGraph.tooltip) { // if tooltip already drawn
			RGraph.tooltip.innerHTML = text;
			RGraph.tooltip.style.left = (canvas.offsetLeft) + x + 3;
			RGraph.tooltip.style.top = (canvas.offsetTop + y) -
RGraph.tooltip.offsetHeight;
		} else { // create tooltip if not drawn yet
			var obj  = document.createElement('DIV');
			
			obj.style.position        = 'absolute'
			obj.style.backgroundColor = '#FFFFE1';
			obj.style.border          = '1px solid #333';
			obj.style.borderRight     = '2px solid #333';  // Set the right and
bottom borders to be a little thicker - gives the effect of a drop
shadow
			obj.style.borderBottom    = '2px solid #333'; // Set the right and
bottom borders to be a little thicker - gives the effect of a drop
shadow
			obj.style.display         = 'block'
			obj.style.visibility      = 'visible';
			obj.style.paddingLeft     = '3px';
			obj.style.paddingRight    = '3px';
			obj.style.fontFamily      = 'Tahoma';
			obj.style.fontSize        = '10pt';
			/*
				//alternatively one could create a tooltip css class since this is
presentation
				obj.className = 'tooltip'; //IE
				obj.setAttribute('class', 'tooltip'); // W3C DOM
			*/
			document.body.insertBefore(obj, canvas);
			
			RGraph.tooltip = obj;
			
			document.body.onclick = function ()
			{
				RGraph.tooltip.style.left = '-999'; //older opera fix
			}
			
			return RGraph.Tooltip(canvas, text, x, y);
		}
		return RGraph.tooltip; // return tooltip obj as stated in functions comment
	} catch(e) {
		return false;	
	}
}

Secondly CanvasTextFunctions.letters() really is in a class of its own.
And why dont you use prototype [1]?

[1] http://www.w3schools.com/jsref/jsref_prototype_array.asp

//A yeti

-- 
PHP General Mailing List (http://www.php.net/)
To unsubscribe, visit: http://www.php.net/unsub.php


[Index of Archives]     [PHP Home]     [Apache Users]     [PHP on Windows]     [Kernel Newbies]     [PHP Install]     [PHP Classes]     [Pear]     [Postgresql]     [Postgresql PHP]     [PHP on Windows]     [PHP Database Programming]     [PHP SOAP]

  Powered by Linux