|
Start Here
Parameter Reference
Contact Us
The next few steps will guide you through implementing and customizing the pop up window system. You can use the example as a reference if you are unsure what to do at any point.
1. Copy cpw_template.js, cpw_ie.js, cpw_nn.js, cpw_nn6.js and cpw.js into your web page's directory.
2. Genererate the content for your window using your traditional web authoring tool.
3. In the form below leave the window number as 1 if it is your first window or increase it by 1 from your previous window. Enter a window title if required. Copy the HTML content from your web authoring tool into the "Window Content" text box and click "Generate Variable".
4. Copy the content generated in the last text box and paste it into the configuration file (cpw_template.js).
5. Repeat steps 2 to 4 for all the windows you want to create.
6. Rename your copy of the configuration file cpw_template.js to what ever you want with a .js extension.
7. Add this code just below the <body> tag in your HTML page. Change the file
name highlighted in red to match your configuration file name.
<script language="JavaScript1.2" src="cpw_template.js"></script>
<script language="JavaScript1.2" src="cpw.js"></script>
8. To create your links that will show and hide the windows, you need to add links like the example below in you web page's html code where you want the link to appear. Change the number highlighted in red to the number of the window you want to show or hide. The text in green is the text that will be visible on your web page. You can set this to any thing you like or even an image.
<a href="#" onClick="CPW_showWindow(1);return false;">Show Window 1</a> <a href="#" onClick="CPW_hideWindow(1);return false;">Hide Window 1</a>
9. Open your configuration file in a text editor and change the parameters
where required. For help with this see the next section Parameter Reference.
The pop up window parameters are defined in the configuration file. All parameters must start on a new line. For each parameter the parameter name is specified first followed by an equals sign then followed by the value. Values are generally put inside quotes with the exception of numerical values. It is recommended that you copy the template configuration file (cpw_template.js) and alter it where required rather than writing a configuration file from scratch.
Where you see a X in the paramter name below if you remove it the parameter will apply to all your windows. If you put the number of a window in place of the X then it will only apply to that window. For eaxmple if you wanted window 3 to have a black background and all your windows white then you will set the CPW_window3_bgcolor = "#000000" and the CPW_window_bgcolor = "#FFFFFF".
Window Background Color
Parameter Name = CPW_windowX_bgcolor
Value = Hexadecimal ranging from "#000000" to "#FFFFFF".
Window Title Background Color
Parameter Name = CPW_windowX_title_bgcolor
Value = Hexadecimal ranging from "#000000" to "#FFFFFF".
Window Border Color
Parameter Name = CPW_windowX_border_color
Value = Hexadecimal ranging from "#000000" to "#FFFFFF".
Window Padding
The space in pixels between the window border and the content.
Parameter Name = CPW_windowX_padding
Value = 0 to any positive integer.
Window Border
The thickness of the window's border.
Parameter Name = CPW_windowX_border
Value = 0 to any positive integer.
Window Transition In
The transition effect used when the window is shown.
Parameter Name = CPW_windowX_transition_in
Value = -1 to 23 (See table below).
| -1 | None | 6 | Wipe Right | 13 | Split Verticle In | 20 | Stripes Right Up |
| 0 | Box In | 7 | Wipe Left | 14 | Split Verticle Out | 21 | Random Bars Horizontal |
| 1 | Box Out | 8 | Vertical Blinds | 15 | Split Horizontal In | 22 | Random Bars Vertical |
| 2 | Circle In | 9 | Horizontal Blinds | 16 | Split Horizontal Out | 23 | Random |
| 3 | Circle Out | 10 | Checkerboard Across | 17 | Stripes Left Down | ||
| 4 | Wipe Up | 11 | Checkerboard Down | 18 | Stripes Left Up | ||
| 5 | Wipe Down | 12 | Random Disolve | 19 | Stripes Right Down |
Window Transition Out
The transition effect used when the window is hidden.
Parameter Name = CPW_windowX_transition_out
Value = -1 to 23 (See table above).
Window Transition Duration
The time is seconds the transition effect is used when showing and hiding
a window.
Parameter Name = CPW_windowX_transition_duration
Value = Any number (e.g. "0.5").
Window X Button
The image used in the top right hand corner of the window to close it.
Parameter Name = CPW_window_x_button
Value = Any image file name.
Window Left
The distant in pixels between the left hand side of the web page and the
left hand side of the window.
Parameter Name = CPW_windowX_left
Value = Any integer.
Window Top
The distant in pixels between the top of the web page and the top of the
window.
Parameter Name = CPW_windowX_top
Value = Any integer.
Window Width
The width of the window.
Parameter Name = CPW_windowX_width
Value = Any integer.
Window Height
The height of the window.
Parameter Name = CPW_windowX_height
Value = Any integer.
Window Visible
States whether the window is visible when the web page is loaded.
Parameter Name = CPW_windowX_visible
Value = "true" or "false".
Window Draggable
States whether the window can be dragged around by the mouse or if it is
fixed in it's position.
Parameter Name = CPW_windowX_draggable
Value = "true" or "false".
If you have a problem with the pop up window system that you can not find an answer to in the documentation or if the documentation is unclear at any point then please send an email to chris@dhtmlmedia.com