Client Class HoverPanel

This class provides easy to use pop up window functionality by calling back to a URL and retrieving the result content directly into a panel. Options allow for easy placement of the window and various simple effects like shadows and opacity of the window.

Note that this class can work without any server behavior - it simply requires some server URL to response with an HTML fragment. Note that the result should be an HTML FRAGMENT not a complete HTML page since the content is assigned to the innerHTML property of the panel.

To hook up a hover behavior:

<a href="somelink.htm" onmouseover="HoverTest(event)" onmouseout="HoverTestHide()">
Click me</a>

To make the calls:

// *** 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","InvoiceAbstract.aspx");
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);
}
function HoverTestHide(event)
{   
    Hover.hide();
}

Remarks

This class has no dependencies on server side features.

Class Members

MemberDescription

assignContent

Assigns HTML content to the panel or more specifically the element specified in htmlTargetClientId.

o.HoverPanel.assignContent(ContentString)

HoverPanel.hide

Hides the panel, making it invisible by setting display="none";

o.HoverPanel.hide()

HoverPanel.movePanelToPosition

Used to move the panel to a given position handling all the display aspects including opacity and shadow display. Pass in either x,y coordinates, and event object or nothing if an event object was provided with the call the startCallback.

o.HoverPanel.movePanelToPosition(x,y)

HoverPanel.show

Makes the panel visible at its last known position.

o.HoverPanel.show()

HoverPanel.showIFrame

Shows the IFrame in the various IFrame modes. You can use the regular hide methods to clear the window.

o.HoverPanel.showIFrame()

HoverPanel.startCallback

Main method that fires the actual request to the server. The serverUrl must be set at minimum before this method should be called.

o.HoverPanel.startCallback(event,querytString,postData,errorHandler)

adjustWindowPosition

Adjust the position of the window so that the window bumps up if it runs off the bottom or left if runs off the right to keep the content visible.

callbackErrorHandler

The error handler that is called when an error occurs retrieving the content.

callbackHandler

Optional client script handler called when the request completes. This event is fired just before the content is assigned to the panel and the HTML value of the response is provided as a parameter.

eventHandlerMode

Determines how the request is handled when the callback returns.

formName

The name of the form that is serialized and sent to the server when the postbackMode is POST. If not specified all form variables items are sent.

hoverOffsetBottom

Bottom offset for auto placed content.

hoverOffsetRight

The right offset for hover windows that are auto positioned. Adds this offset the auto position.

HoverPanel.navigateDelay

Determines the time in milliseconds before a call to startCallback actually triggers the callback on the server.

HoverPanel.shadowOpacity

Determines the opacity of the shadow.

htmlTargetClientId

The HTML client id of the control that is updated with the callback's result content. By default this value is the same as the control's controlId property so by default the full content of the panel is updated. By specifying a ControlId only that specific element is updated which allows for composition of reusable content inside of the panel.

panelOpacity

Determines the opacity of the panel. Default: 1

postbackMode

Determines how data is posted back to the server.

serverUrl

The Url used to access the server. This Url is set through the constructor typically but you can override it explicitly with this property.

shadowOffset

Determines the offset of the shadow if any. 0 means no shadow is displayed.


© West Wind Technologies, 1996-2018 • Updated: 04/27/14
Comment or report problem with topic