The easiest way to use the HoverPanel is by using the Web Connection control for it. If you're using a Web Connection page, just drop the HoverPanel control onto the page. The control is essentially a container that will be filled by the callback.
If you want to do what you're doing with JavaScript code alone - you have to provide the panel in HTML markup. IOW, create some HTML markup give it an ID, then use that ID (ie. your 'Panel') - when the callback is made it will be filled by the result data.
I'm new to web development in general and I like the HoverPanel example and hope to use that idea. But there's just too much stuff in the HoverPanel example that is new to me so I'm trying to trim it down to something really simple and then start adding bits of functionality as I get my head around it.
Ultimately, I would like to be able to provide an HTML fragment that contains objects to mouse-over in order to display a HoverPanel with data related to the object.
But first, I am just trying to come up with a static HTML page that will show static HTML in a panel but I'm having no success. I have pasted in the code snippets from the "Client Class HoverPanel" help topic but I don't know what else needs to be in the HTML file.
Here's what I have so far (please forgive any apparent stupidity).
When I hover over the "Click me" HREF, nothing happens.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Hover Panel TEst</TITLE><scriptsrc="/wconnect/scripts/jquery.js"type="text/javascript"></script><scriptsrc="/wconnect/scripts/ww.jquery.js"type="text/javascript"></script></HEAD><body><formid="form1"method="post"><ahref="default.htm"onmouseover="HoverTest(event)"onmouseout="HoverTestHide()"> Click me</a><scripttype="text/javascript">
// *** Best to use a global var for the Hover Panel
// *** Pass in the name of the HoverPanel Server Control and a URL
var Hover = new HoverPanel("Panel","HelloWorld.htm");
function HoverTest(event)
{
Hover.navigateDelay = 400;
Hover.adjustWindowPosition = true;
Hover.eventHandlerMode = "ShowHtmlAtMousePosition"
Hover.shadowOpacity = .10;
Hover.shadowOffset = 10;
Hover.hoverOffsetRight = 30;
// *** Start the actual callback: Event object, QueryString, PostData, ErrorHandler
// *** Hover.startCallback(event,"id=11074",null,OnError);
Hover.startCallback(event);
}
function HoverTestHide()
{
Hover.hide();
}</script></form></body></HTML>
Any help would be appreciated. Thanks.