WIDGETS

Hidden Div

The Hidden Div can be used to show content on your page when specific link/button is pressed or on first page load. It's similar to a popup. The term 'DIV' comes from the tag used in the HTML code (webpage format) to define a division (block or section) on a page. Hidden Div implementation in a page consists of two steps:

Insert the Hidden Div widget.
Set a Hidden Div hyperlink/button (optional). You don't need this step if you will set the Hidden Div to show on page load.

The widget is not displayed in EDIT mode. Switch to BROWSE mode or make an offline preview to see it in context. In EDIT mode you will see this icon displayed in the Main Screen:

To insert a Hidden Div widget:

Position the cursor | where you want to insert the widget.
Go to Editing Tools.
ClickWidgets button and select Hidden Div.
Adjust the form settings (see below) and press OK. You can change the settings later by double-clicking the widget icon while in EDIT mode.

To insert a Hidden Div hyperlink (optional):

Insert Hyperlink or Button with Link Type internal page and navigate to the Hidden Div you added.
Adjust any other hyperlink settings and press OK.

Note: When you insert Hidden Div hyperlink, you will see something like: javascript:showHdiv(8,1000) as the URL. The first parameter is div name and the second parameter is fade time in ms. If you don't want fading effect, set this parameter to 0. There are two more optional parameters - one to disable dragging (3rd parameter) and another one to define opacity of the Hidden Div (4th parameter). Example: show_Hdiv('mydiv',1000,false,0.7).

Widget Settings

Double-click the widget preview icon to open its settings window.

Content tab

Enter the Hidden Div content using the standard web editor tools for text formatting, images, tables, hyperlinks, flash, media objects, etc.

Layout tab

Set the design for your Hidden Div box.

Use the Refresh button to see how the Hidden Div will look after you make any changes to settings.

Use the Settings button to view the list of settings.

To load predefined settings or save the current settings for later use in other projects or pages, use the Presets option (at the top left corner). For more information see Presets.

Outer Frame

The Hidden Div box consists of two frames - outer and inner. Each frame has separate properties that you can modify.

Div Settings

Tag (edit box) - Include any extra settings in the Div tag.
ID (edit box) - Set a unique ID for the Div.
Title (edit box) - Sets a title, the text that shows when you move the cursor over the Hidden Div content while open.
Name (edit box) - Set a unique Hidden Div name. This is used so you can recognize the widget when inserting the Hidden Div hyperlink.
Show On Page Load (check box) - If checked, Hidden Div content will be displayed when page loads.
Add Cookie (check box) - If checked, the Hidden Div will show once on first page load (applicable only if Show On Page Load is checked).
Close On Clicked Outside Div (check box) - If checked, Hidden Div will close when you click outside it.

Position/Size

Position (drop-down menu) - Set the position of the Hidden Div box on the screen (applicable only if Show On Page Load is checked).
Top/Left (edit boxes) - Set the position of the top-left corner of the Hidden Div box on the screen.
Min Height (edit box) - Set the minimum height of the Hidden Div box.
Width (edit box) - Set the width of the Hidden Div box.

Padding

Adds space between the outer and inner frames. For more information see Padding Properties.

Border

Adds a border for the Hidden Div outer frame. For more information see Border Properties.

Border Radius

Creates round corners for the outer frame. For more information see Border Radius.

Box Shadow

Creates multiple drop shadows (outer or inner) on the outer frame, specifying values for color, size, blur and offset. For more information see Box Shadow.

Background

Sets the background color or image for the outer frame. For more information see Background Properties.

Inner Frame

The Hidden Div box consists of two frames - outer and inner. Each frame has separate properties that you can modify.

Padding

Sets padding for the inner frame. For more information see Padding Properties.

Margins

Sets margins for the inner frame. For more information see Margins Properties.

Border

Sets the border for the Hidden Div inner frame. For more information see Border Properties.

Border Radius

Creates round corners for the outer frame. For more information see Border Radius.

Background

Sets background color or image for the inner frame. For more information see Background Properties.

Close Button

Settings

Top & Right (edit boxes) - Sets the position of the close button relative to the Hidden Div position. Use negative values to position the close button outside the Hidden Div box.
Width & Height (edit boxes) - Sets the width and height of the close button.
Button Text (edit box) - Sets a close button caption.
Color (color picker) - Sets a color for the close button caption.

Background

Background (color picker) - Sets the background color or image for the close button. For more information see Background Properties.

Border

Border (color picker) - Sets borders for the close button. For more information see Border Properties.