Slide Out Panel Magic User Guide

Installing Slide Out Panel 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 Slide Out Panel Magic

There are 3 ways to access Slide Out Panel 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. Slide Out Panel Magic is the last one in the screen capture below

2. Insert Panel

Switch to the PVII category. Slide Out Panel Magic is the last one in the screen capture below

3. Insert Menu

Choose Insert > Studio VII > Slide Out Panel Magic by PVII

SOP Text and Image Triggers

SOP Triggers can be assigned in the following ways:

Existing Text

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

Edit the Text if you need to.

Existing Image

Select an existing image and open the SOP 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 SOP 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 SOP 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 SOP 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 SOP UI and edit the placeholder "Trigger Text" in the Text box to the text you'd like to use.

Slide Out Panel Magic Interface: Options & Settings

The Slide Out Panel Magic interface makes customizing your widget easy!

The SOP Interface

Creating a new SOP instance

The SOP UI allows you to easily define and configure SOP 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 SOP 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 SOP 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.

Slide Out Panel

The Slide Out Panel content box is, or will be displayed on your page in Dreamweaver Design View, where it will be fully editable.

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 Style
  • Set any or all of the following attributes:
    Borders, ,No padding, or Transparency
  • Assign a User Class
  • Set a color for your Close Button
  • Set your Close Button to Fixed position

Options

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

Position

Choose one of the following options:

  • Slide in From Left
  • Slide in From Right

Z-Index

Set a value based on your layout and other positioned items that may be on your page.

Reset To Top on Open

This option is turned on by default. If you scroll down the panel and then close the panel, when you reopen it, it will be rest back to the top.

Panel Width

Set a width in pixels or percent.

Max Width

The maximum width your Slide Out Panel is allowed to occupy. SOP is adaptive by nature, so your box will never be wider than the available space within your viewport or window.

Min Width

Your Slide Out Panel 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.

Page Click to Close

This option is turned on by default. The open panel will close if you click or tap outside the panel onto the page.

Suppress Page Scroll

This option is turned off by default. Enabling it will disable page scrolling while the panel is open. The panel will still be scrollable, but the underlying page will not be scrollable until the panel is closed.

Show Scroll to Top Arrow

This option is turned on by default. As you scroll down the panel, an arrow will appear enabling you to quickly scroll back to the panel's top. It works similarly to our Scroll to Top widget.

Show Only One Panel at a Time

When you Trigger this Slide Out Panel, any other open one will be automatically closed.

Open on Page Load

Set your Slide Out Panel to open when your page first loads.

Delay By

Set a time (in seconds) that your browser will wait before opening your panel.

Animation

Slide Out Panels can be animated or not. The following animation methods are available:

  • None
  • Slide
  • Fade
  • Zoom

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 SOP widget on that page. The opener will look for the SOP widget number.

There are 2 methods available:

1. Anchor Method

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

The anchor index.htm#sop_1 will the first SOP Widget on the page.

2. URL Parameter Method

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

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

You can then give out the link so the SOP will open your specific SOP 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 Slide Out Panel Magic from links on the same page, use the SOP Control Actions described in the next section.

Control Behaviors

  • Select (click) a text link or image link to act as the behavior
  • Open your Dreamweaver Behaviors Panel (Shift + F4)
  • Click the plus sign (+) on the Behavior Panel
  • Choose Studio VII > Slide Out Panel> Slide Out Panel Control Actions to open the interface.

  • Select the ID of the Panel you wish to act on.
  • Select the action.
  • Click OK to apply the behavior.

The Actions

  • Open Panel
  • Close Panel
  • Trigger Panel
  • Close All SOP Panels

You can assign SOP Behaviors to the menu items in PVII menus, but you'll need to change the behavior event from the default onclick to onmousedown.

If you view a link to which you've assigned a Control Behavior, in Code View, it will look like this:

<a href="#" onClick="P7_SOPctrl('p7SOP_1','close')">

Since SOP default trigger events are always click/tap, links that you assign a control behavior to will always be null. If you use a hash value (#), makes sure to apply a return false. With a return false assigned, the above link would look like this:

<a href="#" onClick="P7_SOPctrl('p7SOP_1','close');return false">

CSS Editing

Slide Out Panel Magic links a single style sheet to your page: p7SOP-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.