<js-popup></js-popup>

Provided by module: JavaScript Support: Tags

This tag creates a popup of its content and returns a link that activates the popup if the cursor hovers over the link.

This tag generates some javascript support strings that have to be inserted into the page with the <js-insert> tag. The strings are: div and style.

The components CrossPlatform.js and Popup.js must be included with the <js-include> tag in order to use this tag.

All arguments exept those given below are also transferred to the link.

Attributes

href="url" (javascript:void(0);)

If you didn't give a href argument of your own to the link, the javascript "do nothing" statement is filled in for you. In case you want to disable this behavior, provide an empty string as the href value.

label="string"

The link text. If omitted no link will be returned, useful in combination with the args-variable argument.

id-prefix="string"

The IDs of the div tags created will be prefixed by the specified string. Default is 'popup'. You only need to specify this to prevent name clashes if you include other pages using popups in your page.

shared-css-class="string"

Optional CSS class name which is applied to popups. This can be used to minimize the number of ID-specific styles that are generated.

props="javascript object name" (default_props)

The name of the javascript PopupProperties object that is created by the tag. This object contains various properties for the popup. PopupProperties is defined in the Popup.js component and takes two arguments: x, and y offsets from the target event for positioning of the popup at a desired location.

There are some methods available in the object to set properties:

setHideDelay

The time in ms it takes before the popup is hidden when the mouse leaves the popup (default is 300 ms).

setHide2ndClick

If the popups parent is clicked a second time, the popup will be hidden if this method was called.

setParentRightOffset

The x offset from the parent popups right border. This offset will only be used if the popup has a parent popup i.e. not at the top level. This offset overrides the x_offset.

setParentBottomOffset

The y offset from the parent popups bottom border. This offset will only be used if the popup has a parent popup i.e. not at the top level. This offset overrides the y_offset.

setPageX

Sets the popup to this absolute x coordinate.

setPageY

Sets the popup to this absolute y coordinate.

A small example that uses a props object:

<js-include file='CrossPlatform.js'/> <js-include file='Popup.js'/> <style><js-insert name='style'/></style> <js-insert name='div'/> <script language='javascript'> popup_props = new PopupProperties(15, 0); popup_props.setHide2ndClick(); popup_props.setHideDelay(500); </script> <js-popup props='popup_props' label='popup'> <h1>This is a popup!</h1> </js-popup>

args-variable="RXML form variable name"

Arguments to the generated anchor tag will be stored in this variable. This argument is useful if the target to the popup should be an image, see the example below.

<js-include file='CrossPlatform.js'/> <js-include file='Popup.js'/> <style><js-insert name='style'/></style> <js-insert name='div'/> <js-popup args-variable='popup-args'> <h1>This is a popup!</h1> </js-popup> <gtext ::='&form.popup-args;'>popup</gtext>

name-variable="RXML form variable name"

The name of the created popup item menu will be stored in this variable. This is useful if you want to write custom JavaScript code to refer to the popup menu.

event-variable="RXML form variable name"

Javascript trigger code will be stored in this variable. This argument is useful if multiple actions should be performed in the same event. For example rase the popup and change the css-class of the link.

<js-include file='CrossPlatform.js'/> <js-include file='Popup.js'/> <style><js-insert name='style'/></style> <js-insert name='div'/> <js-popup event-variable='popup-event'> <h1>This is a popup!</h1> </js-popup> <a href="#" class="link" onMouseOver="this.className='hover-link'; &form.popup-event;" onMouseOut="this.className='link'">popup</a>

event="javascript event" (onMouseOver)

The javascript event that should trigger the popup.

z-index="number" (1)

The z index for the popup's div tag.