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

• Website: onlinecreative.org
• Email: office@onlinecreative.org

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

• popoverwindow_generator.html - Popover Window Generator, use this tool to design new PopoverWindow themes
• popoverwindow/popover-content.html - This is where you add the content that will be inside your Window.
• popoverwindow/loading.html - This is where you can add a loading bar if you wish.
• popoverwindow/ - the directory containing the javascript, css, and images for the component
  • popoverwindow/img/ - contains all the icon images, you could add new icons or modify any of them if you wish
  • popoverwindow/css/ - contains the popoverwindow.css file
  • popoverwindow/js/popover.js - contains the main Popover Window javascript component
• examples.html - some quick examples that show some different effects and how you can load multiple Popover Windows on the same page.
• tutorial.html - this tutorial page

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:

• Size - specify the width and height of the window in pixels
• Position - leaving this blank will make the window appear in the center of the page.
• Title Text - the text to display in the title bar. (You can also add HTML code to create a link.)
• Title Icon - here you can choose the icon displayed in the top right of the title bar
• Footer Text - the text to display in the footer bar. (You can also add HTML code to create a link.)
• Close Button - decide whether the close button should appear or not. You can add your own colose button image by simply replacing the file name "popoverwindow/img/closebig.png"
• Drag & Drop - decide whether to allow your visitors to be able to grab and move the window anywhere on the page.
• Resizable - decide whether to allow your visitors to resize the window by gradding the bottom-right corner.
• Scrollbar - adds a scrollbar to the inside window.
• Fade in Effect - fades the window into view gradually, if turned off it displays immediately
• Fade out Effect - fades the window out of view gradually
• Clicking Overlay Closes Window - this option allows the user to close the window by clicking anywhere outside the window
• Outside Shadow Effect - this option adds a CSS shadow effect to the outside of the Window
  
• Shadow Options - this is how you can style the outside shadow effect. You can change the size and the color.
• Z-index Level - this is set by default to 999 so that it will most likely display overtop of any content on your website.
  If you had another element on your website that a Z-index of over 1000, then you would want to change this to 1001.

Embed Code Options:

• Load any Window URL - determines *which* page will load into the Popover Window
• Launch window automatically - Instead of generating a link which opens the window, this will automatically open the window after the specified number of seconds.
• Add Cookie - This will only show the window once per a specified number of hours.
• Create theme named - creates a theme for your window by creating a variable containing all the options you chose, then generates a link with the correct PopoverWindow.show() command to load that theme

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