Project Claire: JavaScript ~ Pop-up Window Tutorial

From PikaDocs

Last modified: July 2, 2005

The following code is used to create the pop-up "Help" windows used within the Claire design.

This example is from the intake_contact_list.html template. At the top of that template is a set of script (http://www.htmldog.com/reference/htmltags/script/) tags that calls an external javascript .*js file located in the /js subdirectory: 

<script type="text/javascript" src="/pika/js/validation.js"></script>

The external javascript file contains the javascript function (http://www.w3schools.com/js/js_functions.asp) that provides instructions to pop-up a separate window, of a specified size, at a specified screen location, without a tool bar or menu bar, but with scroll bars and retaining the ability to resize the window: 

// pop-up help window script ~ modified version of JavaScript Source script
// http://javascript.internet.com/generators/popup-window.html

function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'left=20,top=20,screenX=20,screenY=20,toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=500,height=300');");
}

Within the page template there is an embedded link with a javascript event (http://www.quirksmode.org/js/introevents.html) that calls the "help" window located at the declared URL and opens it in a new browser window: 

<a class="options" href="javascript:popUp('%%[base_url]%%/helpdocs/help_prospective.html')" title="Click for Help about these options">?</a>

You can view implementation of this pop-up help window script within several Project Claire templates, including the three templates listed below as related files.

Return to Table of Contents

Related articles and files:

Retrieved from "http://pikasoftware.com/docs/index.php/Project_Claire:_JavaScript_%7E_Pop-up_Window_Tutorial"