Pop Box Magic User Guide

Installing Pop Box Magic

Extension installer files come in 2 formats: MXP and ZXP. MXPs are supported by Extension Manager versions MX, MX2004, 8, CS3, CS4, CS5, CS5.5 and CS6. ZXP is supported by versions CS5.5 and higher. Version CC and higher have dropped support for the MXP format. To continue to support all Adobe customers, regardless of version, we include both the classic MXP and the new ZXP versions.

Dreamweaver CC 2015 (and higher) Extension Installation Information

As of CC 2015, Adobe has ceased to support its own Extension Manager. Use the PVII Extension Manager for Adobe Creative Cloud...

PVII Extension Manager for Adobe CC
( Windows and Mac)

Download and Install Instructions

 

Accessing Pop Box Magic

There are 3 ways to access Pop Box Magic. Choose the one most suitable to your workflow. When you open an interface, the system will detect the appropriate mode (Insert or Modify).

1. Insert Bar

Switch to the PVII category. Pop Box Magic is the last one in the screen capture below

2. Insert Panel

Switch to the PVII category. Pop Box Magic is the last one (orange) in the screen capture below

3. Insert Menu

Choose Insert > Studio VII > Pop Box Magic by PVII

PBX Text and Image Triggers

PBX Triggers can be assigned in the following ways:

Existing Text

Select a block of text and open the PBX interface. The selected text will appear in the Text box.

You can edit the Text if you like, but know that it will change the original text on your page.

Existing Image

Select an existing image and open the PBX interface. The img tag of the selected image will appear in the Text box.

You can edit the <img> tag, but do understand that it will affect the original image you had selected. It is better to edit or change the image in Design View, as it will safeguard you from corrupting the tag. If your Trigger is an image, the Style and Button Styles options will not be available.

Existing Link

If you want to assign a PBX to an existing link, whether that link is text or an image, simply place your cursor inside the link text on your page, or select the image, and open the PBX interface. If the link is text, then the link text from your page will be inside the Text box. If the link is an image, then the <img> tag will be listed in the PBX UI Text box.

Create a New Text Trigger

You can create a new Trigger by simply placing your cursor where you'd like it to appear. Open the PBX UI and edit the placeholder "Trigger Text" in the Text box to the text you'd like to use.

Pop Box Magic Interface: Options & Settings

The Pop Box Magic interface makes customizing your widget easy!

The PBX Interface

Creating a new PBX instance

The PBX UI allows you to easily define and configure PBX instances, one at a time, and once configured, the UI can be used to modify (edit) each instance as often as you like. Follow the steps below to create a new PBX instance:

Select a trigger, or position your cursor where you would like a new trigger to be created

Use the methods described in the preceding section PBX Text or Image Triggers.

Toggle Menu

 

If your Trigger is text, select a Style. If you choose Buttonized, the Button Styles options will become active, allowing you to set additional attributes.

User Class

You can assign an optional User Class for the Trigger. Enter the name of the class without the leading period (dot). You can also add multiple classes to either element. To do so, enter each class name separated by a space. To add the classes rounded and text-centered.

Pop Up Styles

These settings allow you to configure how your Pop Box looks.

Note: the popup content box is, or will be, displayed on your page in Dreamweaver Design View, where it is fully editable.

Style your Pop Up Box

  • Choose a Style
  • Set any or all of the following attributes:
    Borders, Rounded, Glass, Shadow, or No padding
  • Assign a User Class
  • Set a color for your Close Button

Options

The Options category allows you to assign behavior and positioning settings.

Mode

Choose one of the following options:

  • Position at Trigger: Left
  • Position at Trigger: Middle
  • Position at Trigger: Right

The above 3 options position your box below the Trigger and either at its left edge, its horizontal center, or its right edge.

  • Position at Cursor
  • Centered (vertically and horizontally in your window)
  • Lightbox (a modal overlay with page dimming. Similar to our Magic Box popups)

Max Width

The maximum width your Pop Box is allowed to occupy. PBX is adaptive by nature, so your box will never be wider than the available space within your viewport or window.

Min Width

Your Pop Box will never become narrower than the value set for Min Width. To ensure mobile phone compatibility, the value you set cannot be greater than 320px.

Vertical Offset

Enter a negative value to pull your Pop Box higher on the screen. A positive value will push your Pop Box down.

Horizontal Offset

A negative value will move your Pop Box to the left. A positive value will move it to the right.

Enable Mouse Over Action

With this option checked, your Trigger will operate onMouseOver (hover) or when tapped on a touch device. Disable this option and your Trigger will function onClick/Tap.

Show Only One Pop Up at a Time

When you Trigger a Pop Box, any other open one will be automatically closed.

Open on Page Load

Set your Pop Box to pop up when your page first loads.

Delay By

Enter the number of seconds to wait after page load before opening the Pop Box.

Page Click to Close

Enable this box to automatically close the Pop Box whenever the user clicks (or taps) on the page.

Animation

Pop Boxes can be animated or not. The following animation methods are available:

  • None
  • Fade
  • Zoom
  • Fold
  • Reveal

Duration

Set the time, in milliseconds, that the animation will span, from beginning to end. The default value of 400 is usually a good choice. Increase the number to slow the animation. Decrease the number to speed the animation up.

URL Parameters and Control Functions

URL Parameters:

An opener detection system is included that allows you to set up links with special parameters that will load a page and also open a specific PBX widget on that page. The opener will look for the PBX widget number.

There are 2 methods available:

1. Anchor Method

The system will look for "#pbx" plus a slide reference after the anchor.

The anchor index.htm#pbx1 will the first PBX Widget on the page.

2. URL Parameter Method

The system will look for "mbx=" in the URL parameter.

The URL parameter index.htm?pbx=2 will open the second PBX Widget on the page.

You can then give out the link so the PBX will open your specific PBX when the page first loads.

Note: This feature is meant to be used on links to your page from external locations ONLY. They are not meant to be used on links that are in your page. To control Pop Box Magic from links on the same page, use the PBX Control Actions described in the next section.

2. Control functions:

The PBX system includes these three control functions:

1. Open a specific PopBox:

P7_PBXctrl('p7PBX_1','open');

assigned to a text link it would look like this:

<a href="#" onclick="P7_PBXctrl('p7PBX_1','open',this);return false;">Open PopBox 1</a>

2. Close a specific PopBox:

P7_PBXctrl('p7PBX_1','close');

assigned to a text link it would look like this:

<a href="#" onclick="P7_PBXctrl('p7PBX_1','close',this);return false;">

3. Close ALL PopBoxes:

P7_PBXctrl('all','close');

assigned to a text link it would look like this:

<a href="#" onclick="P7_PBXctrl('all','close',this);return false;">Close All PopBoxes</a>

Note: We've also added a return false; directive to each of the control actions. This prevents the browser from excecuting the anchor on the null link. Be sure to inlcude the return false whenever the action is set to onclick.

CSS Editing

Pop Box Magic links a single style sheet to your page: p7PBX-01.css

Given the options available in the user interface, there should never be a reason for you to edit the styles. Should you need help with CSS, and you cannot figure it out, please contact us via one of the methods listed below.

Support Options

Before making a support inquiry, please be certain to have read the documentation that came with your product. Please include your Order Number, Dreamweaver version, as well as your computer operating system type in all support correspondence.

Support Forum

PVII maintains a Web Forum community. Go Direct to the Web Forum

E-Mail and Phone Support

E-Mail: support@projectseven.com

Phone: (336) 374-4611

Phone hours are 9:00am - 5:00pm Eastern Time U.S.