Popover Window Integration Tutorial

Congratulations! You have purchased the best JavaScript window component on the web.
You'll be up and running in minutes!

Overview

Popover Window is designed to be the ultimate solution for a reusable JavaScript window component. You will be able to use this window component for almost any purpose on your website. And through it's customizable design you can tailor it's theme to match any website that you develop.

Files

Using the Popover Window Generator

This should be mostly self-explanitory. Just like the Popover Window on the Expandable Banners website, the generator can be used to create a custom window design in mere seconds. You can change any of the styling elements, borders, and colors.

But, you can also choose the window's functionality:

Embed Code Options:

When you are satisfied with the design of your window, highlight the code that was generated, such as:

<script type="text/javascript" src="popoverwindow/js/popover.js"></script>
<link rel="stylesheet" type="text/css" href="popoverwindow/css/popoverwindow.css">
<script type="text/javascript">
// update the following line with correct path
PopoverWindow.setPath('./popoverwindow/');
PopoverWindow.setOptions({"width":"800","height":"550","left":"","top":"","title":"Popover Window Title","icon":"star",
"footer":"Footer Text","showClose":true,"drag":true,"resize":true,"fadeIn":true,"fadeOut":true,"overlayClose":false,
"shadow":true,"shadowOptions":"0px 0px 19px 6px #095979","cookie":"No","hours":"24","zindex":"999","titleFont":
"Helvetica","titleSize":"11pt","titleWeight":"bold","titleColor":"404040","titlePadding2":"2","roundedCorners":"8",
"windowColor":"ccc","windowPadding":"4","pageBorderSize":"3","pageBorderColor":"82ACC4","pageColor":"fff",
"overlayColor":"20a7de","overlayOpacity":"0.3"});
</script> <a href="javascript://" onclick="PopoverWindow.show('popover-content.html')">Open Window</a>

Try saving the code that was generated in a new file called "mypopover.html". For the purposes of this tutorial, save the file in the same directory that contains the popoverwindow directory. Don't forget to put the code inside HTML and BODY elements:

<HTML>
<BODY>
*your popover code goes here*
</BODY>
</HTML>

Loading the file should produce a link, that when clicked, opens the Popover Window that you have designed.

Manual Coding

For the adventurous type, you can use the Popover Window JavaScript code directly. The primary commands that you will use are:

PopoverWindow.setOptions() - the command is used to set a "global" theme for all windows that will be displayed

PopoverWindow.show(url, theme) - displays the window, this command can be performed at any time, in any number of ways, such as in a form button, link, or automatically. This command has an optional theme parameter to specify a reusable theme (see below).

PopoverWindow.hide() - hides the window at any time

 

 

RESPONSIVE

By default the code is responsive, however you might need to make your HTML File responsive.

If you are using an images for your HTML content popoverwindow/popover-content.html

Make sure to add this CSS so that your images will scale down.

<style>

img{max-width:100%; height:auto}
div{max-width:100%;}
iframe{max-width:100%;}

</style>

 

 

Reusable Themes

The Examples Page contains 4 reusable themes that we came up with. To create a reusable theme of your own, select the checkbox in the generator labelled "Create theme named", you may specify a name for your theme in the text box. The generated code will update accordingly.

The code of a theme looks like this:

var blackNess = {"width":"500","height":"400","title":"Blackness","icon":"delete",
"showClose":true,"drag":true,"resize":true,"roundedCorners":true,"scrolling":true,
"fadeIn":true,"fadeOut":true,"titleFont":"sans-serif","titleSize":"11pt",
"titleColor":"FFFFFF","windowColor":"000000","windowPadding":"15","pageBorderSize":"5",
"pageBorderColor":"9C9C9C","pageColor":"000000",
"overlayColor":"000000","overlayOpacity":"0.8"};

The PopoverWindow.show() command must be used to specify the theme when the link is clicked.

<a href="javascript://" onclick="PopoverWindow.show('blackness.html',blackNess)">
Blackness</a>




About Popover Window

Popover Window was written using a sophisticated new JavaScript library.
The library is an all-purpose AJAX/JavaScript development API that includes functionality not present in any other libraries.


2015 © OnlineCreative.org