Member Avatar for stixoffire

Ok here it is in this forum, I am looking for how to do Info Tags - NOT a popup as I do not want to use the javascript Window.Open- I want something like the smart tags, but like the nice info windows that appear here in the DaniWeb Forums.. when you mouse over the link the next thing you see is an informational window , I have seen this also on Amazon and MonsterTemplates. How do I do this using DOT.NET - I know it is a client side action, so how can I do it ? Do I need to use Javascript.. Or does someone know a DOT NET way to do the same thing....???? :?: :eek:

  • 3 Contributors
  • 4 Replies
  • 103 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by stixoffire
Member Avatar for hollystyles

You need to use javascript, any .NET component would do it by emitting javascript anyway. Here is a little hoverover javascript I made, feel free to use it directly or maybe it will help you to make your own.

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
// Author: Holly Styles
// Copyright: Weblogik 2006
//
// Description; basic hover over tool tip with drop shadow
//
// Usage:
// set the onmouseover event in the element for which you want the hovertext
// to appear. The second parameter of the showHoverHelp function is for the id of any elements 
// that have an infinite z-Index like drop down boxes so they can be hidden and not overlap
// the hover box.
//
// Examples:
// <img src="images/myimage.gif" onmouseover="showHoverHelp('My hover text', '', event);" />
//
// Compatability:
// IE 6, Firefox 1.5, (opera, safari, etc. should work but not tested)
//
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function showHoverHelp(helpText, hideElement, event)
{
	//get event target
	if(typeof event == "undefined")
	{
		event = window.event;
	}
	var eventTarget = getEventTarget(event);
	
	//drop previous hover if exists
	dropHoverHelp();
		
	//get position of target
	var eventTargetPos = getPosition(eventTarget);
	
	//get width of target
	var offsetLeft = eventTarget.offsetWidth;
	
	//create absolute positioned div element
	var hoverBox = document.createElement("DIV");
	var dropShadow = document.createElement("DIV");
	
	hoverBox.id = "hoverHelp";
	dropShadow.id = "dropShadow";
	
	hoverBox.innerHTML = helpText;
	dropShadow.innerHTML = helpText;
	
	hoverBox.style.visible = false;
	dropShadow.style.visible = false;
	
	hoverBox.style.position = "absolute";
	dropShadow.style.position = "absolute";
	
	hoverBox.style.left = eventTargetPos[0] + offsetLeft;
	hoverBox.style.top = eventTargetPos[1];
	dropShadow.style.left = (eventTargetPos[0] + offsetLeft) + 10;
	dropShadow.style.top = eventTargetPos[1] + 10;
	
	//style the element
	hoverBox.style.backgroundColor = "#ffffdd";
	dropShadow.style.color = "#cccccc";
	dropShadow.style.backgroundColor = "#cccccc";
	
	dropShadow.style.float = "left";
	dropShadow.style.filter = "alpha(opacity=70)";
	dropShadow.style.opacity = "0.7";
	
	hoverBox.style.borderStyle = "dashed";
	dropShadow.style.borderStyle = "dashed";
	hoverBox.style.borderWidth = "thin";
	dropShadow.style.borderWidth = "thin";
	dropShadow.style.borderColor = "#ccccdd";
	hoverBox.style.padding = "0.2cm";
	dropShadow.style.padding = "0.2cm";
	
	
	//attach event handler
	attachEventListener(eventTarget, "mouseout", hideHoverHelp, false);
	
	//hide drop-downs with infinite z-index
	if(hideElement != "")
	{
		document.getElementById(hideElement).style.visibility = "hidden";
		hoverBox.hiddenElement = hideElement;
	}
	
	//show the element
	dropShadow = document.getElementsByTagName("body")[0].appendChild(dropShadow);
	hoverBox = document.getElementsByTagName("body")[0].appendChild(hoverBox);
	hoverBox.style.visible = true;
	dropShadow.style.visible = true;
}

function hideHoverHelp(event)
{
	//detach event listener
	if(typeof event == "undefined")
	{
		event = window.event;
	}
	eventTarget = getEventTarget(event);
	detachEventListener(eventTarget, "mouseout", hideHoverHelp, false);
	
	//if (mouse pos x (left) + errmargin > hover left && > hover top and < than top+height)
	
	var mousePos = getMousePosition(event);
	var hoverBox = document.getElementById("hoverHelp");
	
	if(hoverBox != null)
	{
		var hoverPos = getPosition(hoverBox);
		
		if(mousePos[0] >= hoverPos[0] && mousePos[0] < (hoverPos[0]+hoverBox.offsetWidth) && mousePos[1] > hoverPos[1] && mousePos[1] < (hoverPos[1]+hoverBox.offsetHeight))
		{
			//attach event listener to hover box
			attachEventListener(hoverBox, "mouseout", hideHoverHelp, false);
		}
		else
		{
			//else call dropHoverHelp()
			dropHoverHelp();
		}
	}
	
}

function dropHoverHelp()
{
	var dropShadow = document.getElementById("dropShadow");
	var hoverBox = document.getElementById("hoverHelp");
	
	if(dropShadow != null)
	{
		dropShadow = document.getElementsByTagName("body")[0].removeChild(dropShadow);
		dropShadow = null;
	}
	
	if(hoverBox != null)
	{
		//unhide drop-downs with infinite z-index
		if(typeof hoverBox.hiddenElement != "undefined")
			document.getElementById(hoverBox.hiddenElement).style.visibility = "visible";
		hoverBox = document.getElementsByTagName("body")[0].removeChild(hoverBox);
		hoverBox = null;
		
	}
}

function getEventTarget(event)
{
	var targetElement = null;
	
	if (typeof event.target != "undefined")
	{
		targetElement = event.target;
	}
	else
	{
		targetElement = event.srcElement;
	}

	while (targetElement.nodeType == 3 && targetElement.parentNode != null)
	{
		target.Element = targetElement.parentNode;
	}

	return targetElement;
}

function getPosition(theElement)
{
	var positionX = 0;
	var positionY = 0;
	
	while (theElement != null)
	{
		positionX += theElement.offsetLeft;
		positionY += theElement.offsetTop;
		theElement = theElement.offsetParent;
	}

	return [positionX, positionY];
}

function addLoadListener(fn)
{
	if (typeof window.addEventListener != 'undefined')
	{
		window.addEventListener('load', fn, false);
	}
	else if (typeof document.addEventListener != 'undefined')
	{
		document.addEventListener('load', fn, false);
	}
	else if (typeof window.attachEvent != 'undefined')
	{
		window.attachEvent('onload', fn);
	}
	else
	{
		var oldfn = window.onload;
		if (typeof window.onload != 'function')
		{
			window.onload = fn;
		}
		else
		{
			window.onload = function()
			{
				oldfn();
				fn();
			};
		}
	}
}

function getScrollingPosition()
{
	var position = [0, 0];

	if (typeof window.pageYOffset != "undefined")
	{
		position = [
			window.pageXOffset,
			window.pageYOffset
		];
	}
	else if (typeof document.documentElement.scrollTop != "undefined" && document.documentElement.scrollTop > 0)
	{
		position = [
			document.body.scrollLeft,
			document.body.scrollTop
		];
	}
	else if (typeof document.body.scrollTop != "undefined")
	{
		position = [
			document.body.scrollLeft,
			document.body.scrollTop
		];
	}

	return position;
}

function getMousePosition(event)
{
	var scrollingPosition = getScrollingPosition();
	var mousePosition = [0, 0];
	
	if(typeof event.pageX != "undefined" && typeof event.x != "undefined")
	{
		mousePosition[0] = event.pageX;
		mousePosition[1] = event.pageY;
	}
	else
	{
		mousePosition[0] = event.clientX + scrollingPosition[0];
		mousePosition[1] = event.clientY + scrollingPosition[1];
	}
	
	return mousePosition;
}

function attachEventListener(target, eventType, functionRef, capture)
{
	if (typeof target.addEventListener != 'undefined')
	{
		target.addEventListener(eventType, functionRef, capture);
	}
	else if (typeof target.attachEvent != 'undefined')
	{
		target.attachEvent('on' + eventType, functionRef);
	}
	else
	{
		eventType = 'on' + eventType;

		if (typeof target[eventType] == 'function')
		{
			var oldListener = target[eventType];

			target[eventType] = function()
			{
				oldListener();

				return functionRef();
			};
		}
		else
		{
			target[eventType] = functionRef;
		}
	}
}

function detachEventListener(target, eventType, functionRef, capture)
{
	if (typeof target.removeEventListener != "undefined")
	{
		target.removeEventListener(eventType, functionRef, capture);
	}
	else if (typeof target.detachEvent != "undefined")
	{
		target.detachEvent('on' + eventType, functionRef);
	}
	else
	{
		target['on' + eventType] = null;
	}
}
Member Avatar for stixoffire

Thank You for the code - this is exactly what I was looking for.
I simply can call this from an OnMouseOver event from within my DOT NET code and it should work...

Member Avatar for f1 fan

for much nicer rollovers and other more powerful tools use AJAX. Get the microsoft ajax toolkits and most of it is done for you.

Member Avatar for stixoffire

for much nicer rollovers and other more powerful tools use AJAX. Get the microsoft ajax toolkits and most of it is done for you.

I thought MS Ajax only worked with NET 2.0 - I will need to revisit that and see..

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.