How to show sections of the page on mouse over, and hide them on mouse out? - El Toro - Find articles about Visualforce, Apex, Force.com and Salesforce in general

Print Preview

How to show sections of the page on mouse over, and hide them on mouse out?

This is accomplished using Javascript, using something like this:

// Copyright 2006,2007 Bontrager Connection, LLC
// http://bontragerconnection.com/ and http://willmaster.com/
// Version: July 28, 2007
var cX = 0;
var cY = 0;
var rX = 0;
var rY = 0;
function UpdateCursorPosition(e){
	cX = e.pageX;
	cY = e.pageY;
}
function UpdateCursorPositionDocAll(e){
	cX = event.clientX;
	cY = event.clientY;
}
function AssignPosition(d) {
	if(self.pageYOffset) {
		rX = self.pageXOffset;
		rY = self.pageYOffset;
	} else if(document.documentElement && document.documentElement.scrollTop) {
		rX = document.documentElement.scrollLeft;
		rY = document.documentElement.scrollTop;
	} else if(document.body) {
		rX = document.body.scrollLeft;
		rY = document.body.scrollTop;
	}
	if(document.all) {
		cX += rX;
		cY += rY;
	}
	d.style.left = (cX+10) + "px";
	d.style.top = (cY+10) + "px";
}
function HideContent(d) {
	if(d.length < 1) {
		return;
	}
	document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
	if(d.length < 1) {
		return;
	}
	var dd = document.getElementById(d);
	AssignPosition(dd);
	dd.style.display = "block";
}
function ReverseContentDisplay(d) {
	if(d.length < 1) {
		return;
	}
	var dd = document.getElementById(d);
	AssignPosition(dd);
	if(dd.style.display == "none") {
		dd.style.display = "block";
	} else {
		dd.style.display = "none";
	}
}
if (document.all) {
	document.onmousemove = UpdateCursorPositionDocAll;
}
else {
	document.onmousemove = UpdateCursorPosition;
}

You can put that Javascript inside this HTML code (remember that anything that can go in the browser can be written in Visualforce)

<html>
	<head>
		<script type="text/javascript" language="JavaScript">
			<!-- Put Jvascript here -->
		</script>
	</head>
	<body>
		<a onmouseover="ShowContent('uniquename3'); return true;"
			onmouseout="HideContent('uniquename3'); return true;"
			href="javascript:ShowContent('uniquename3')">
			[show on mouseover, hide on
		mouseout]</a>
		<div id="uniquename3" style="display:none; position:absolute;
			border-style: solid; background-color: white; padding: 5px;">
			Content goes
		here.</div>
	</body>
</html>

comments powered by Disqus

© El Toro . IT @ 2013
Andrés Pérez