0

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
5
Views
10 Years
Discussion Span
Last Post by stixoffire
0

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.

Attachments
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
// 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;
	}
}
0

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...

0

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

0

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..

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.