Additional Tabs

Overview

When inserting links in the Classic Editor,  two additional tabs will be available, Popup and Events. These contain additional parameters for configuring link behaviors. 

Popup Tab

The Popup tab of the Insert/Edit Link tool provides the functionality for creating and configuring a link that opens a new window when clicked by a page visitor. In terms of specific content, this page design might be utilized with a list of faculty biographies where a larger image of the faculty member is displayed in the new window when a thumbnail image is clicked. Another example is a list of courses that includes smaller bits of content that open in a new window when clicked.

Popup Tab in Insert/Edit Link Tool

This functionality in the WYSIWYG uses JavaScript with HTML and creates an onClick event handler that uses the open() method on the window object. Defining the JavaScript popup here adds the appropriate scripting to the page. Clicking the link opens the linked-to page in a new window, of which the size, location, and other properties are defined with the Popup tab. Various browsers may have different interpretations for rendering the script in a browser window especially as some attributes maybe obsolete in the working version of HTML5.

Click for a popup example. Note that the example additionally includes an example of using JavaScript to swap the image when it is hovered over.

Adding a Popup Window

  1. Select text for a new link or configure an existing link by clicking the Insert/Edit Link.
  2. Choose the Popup tab.
  3. Choose the JavaScript Popup checkbox.
  4. Adjacent to Popup URL, click the Browse icon and select the file to which to link.
  5. Configure any additional properties and options.
  6. Click Insert or Update.

More Details

When defining a popup window only the Popup URL is required. Properties for the window include: 

  • JavaScript Popup: Select the checkbox to enable the link as a popup and make the other properties and options available.
  • Popup URL: This defines the URL that will open in the new window; browse to a file to which to link or enter the URL for it.
  • Window Name: Optional. For window.open this defines the name attribute, which can be a target attribute or can define the name of the window. If left blank, the window opens in a new window. The target attributes are the same as for those that can normally be defined for a link:

_blank: The default opens the URL in a new window

_parent: Opens the window into a parent frame

_self: Opens the window by replacing the current page

_top: Opens the window with the URL replacing a frameset (if applicable)

  • Size: Defines the height and width, respectively, of the window in pixels.
  • Position: Defines the position of the window in terms of left and top (position x/y is deprecated); in other words in pixels from the left of the parent browser window and from the top of the parent.

Options

The syntax for the Window open() method is:

window.open(URL,name,specs,replace)

The URL and name attributes can be defined with the properties as described above. Several of the values for the specs (features) attribute can take can additionally be defined within the Options box. The additional options include include:

  • Show Location Bar: When selected adds the value of location=yes which allows the window to display the locations/address bar.
  • Show Menu Bar: When selected adds the value of menubar=yes which displays the menu bar.
  • Show Toolbars: When selected adds the value of toolbar=yes which displays the browser toolbar, which can include the back, forward, reload, and stop buttons.
  • Show Status Bar: When selected adds the value of status=yes which allows for the status bar in the window, Firefox no longer shows the Status bar at all times.
  • Show Scrollbars: When selected adds the value of scrollbars=yes which allows for the scrollbars bar in the window. This feature may be recommended to be used for accessibility reasons.
  • Make Window Resizable: When selected adds the value of resizable=yes which allows the user to resize the window, keep in mind that various browsers may include a grippy on a secondary window regardless of this setting. This feature may be recommended to be used for accessibility reasons.
  • Dependent (Mozilla/Firefox Only): When selected adds the value of dependent=yes which makes the secondary window dependent upon its parent; that is, if the parent is closed, the secondary window is closed; if the parent window is minimized, the secondary window is minimized.

Consider the following screenshot examples of the different usage of the settings.

The first example defines the size of the window as 100 by 100 pixels, has not defined a position, but has selected all options. Note that the window includes scrollbars, and includes the location bar in the popup window, the window can also be resized. By default, it is located on top of the original window and in the default location.                

Window with Jack

The next image shows a popup with different specifications. The window is sized to 300 x 300 pixels, and none of the options are selected (except for Insert 'return false') so the scrollbars and location bar are no longer visible.

Window with Jack

Additionally, the replace parameter is defined with the Insert 'return false' checkbox. By default, this option is selected. This is an optional parameter that specifies if the URL should add a new entry or replace the what is currently loaded in browsing content. This parameter adds the following:

return false;

If the name attribute is left blank and the Insert 'return false' checkbox is cleared, then when the link is clicked the URL is opened in the new window as well as in the current window.

Replace Loads Both

 

Code Example

The following code example shows the JavaScript that is added to the a href for the page.

<a onclick="window.open('/examples-directory/popupexample.html','newwin','width=250,height=250');return false;" href="/examples-directory/popupexample.html">JavaScript Popup Screen</a>

Final Note

Dependency tags are honored when inserting a link to a popup window.

Events Tab

The Events tab of the Insert/Edit Link modal is similar to the Popup tab in that it can be used to define an alternative event for a link. Fill each desired event field with the desired string of JavaScript to enable the alternative event.

Events Tab in Insert/Edit Link Tool

Event Handlers Reference

Attribute Usage Values Notes

onFocus

HTML Form

Fires when an element receives focus from a pointing device or through tab navigation.

Does not bubble; not cancelable.

onBlur

HTML Form

Fires when an element loses focus either via the pointing device or by tabbing navigation.

Does not bubble; not cancelable.

onClick

Mouse

Fires when an element is clicked. Sequence is mousedown, mouseup, click.

Bubbling and cancelable.

onDblClick

Mouse

Fires when the pointing device button is double clicked over an element.

Bubbling and cancelable.

onMouseDown

Mouse

Fires when the pointing device button is pressed over an element.

Bubbling and cancelable.

onMouseUp

Mouse

Fires when the pointing device button is released over an element.

Bubbling and cancelable.

onMouseOver

Mouse

Fires when the pointing device is moved onto an element.

Bubbling and cancelable.

onMouseMove

Mouse

Fires when the pointing device is moved while it is over an element.

Bubbling not cancelable.

onMouseOut

Mouse

Fires when the pointing device is moved away from an element.

Bubbling and cancelable.

onKeyPress

Keyboard

Fires after keydown, when a key on the keyboard is pressed.

Bubbling and cancelable.

onKeyDown

Keyboard

Fires before keypress, when a key on the keyboard is pressed.

Bubbling and cancelable.

onKeyUp

Keyboard

Fires when a key on the keyboard is released.

Bubbling and cancelable.