Skip over navigation

Roxen Interactive RXML Help

<js-popup></js-popup>

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
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
label=string

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

id-prefix
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
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
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
    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
    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
    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
    event=javascript event (onMouseOver)

    The javascript event that should trigger the popup.

    z-index
    z-index=number (1)

    The z index for the popup's div tag.