<js-popup></js-popup>

Provided by module: Tags: Javascript Support

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.

label="string"

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

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>

event-variable="RXML form variable name"

Javascript trigger code will be stored in this variable. This argument is useful if multiple actions should be perormed 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.