The LightWindow library allows the developer to launch a LightWindow programmatically. When the lightwindow.js library loads, it automatically instantiates a LightWindow object called myLightWindow. You can then use the activeWindow method to open a url in a LightWindow:
myLightWindow.activateWindow({
href: 'http://www.google.com',
title: 'Google',
author: 'Datawin Consulting',
caption: 'This is Google's Home Page.',
width:995,
height:610
});
You can easily execute this code from a button or link on your web page. So if you wanted the LightWindow to pop up as soon as the user lands on the page, you would think that all you have to do is call myLightWindow.activateWindow(…) in the main page’s onLoad event. Unfortunately, this doesn’t work. The onLoad event fires before the LightWindow library can load and instantiate the myLightWindow object so all you get is a javascript error and no LightWindow.
So what do we do? Well, our solution is to hack the LightWindow library (lightwindow.js) and add our own “pseudo-event” to fire right after the myLightWindow object gets instantiated. Here is the code in the lightwindow.js file (hint: it is at the very bottom of the file).
Original code:
var myLightWindow = null;
function lightwindowInit() {
myLightWindow = new lightwindow();
}
Our changes to the code:
var myLightWindow = null;
function lightwindowInit() {
myLightWindow = new lightwindow();
// The following was added to run code immediately
// after this library loads and instantiates the
// myLightWindow object.
// ***********************
// In the code on the main page we’ll need to create a
// lightWindow_DoneLoading() function that catches
// the the pseudo-event.
// ***********************
// Not elegant.
// Tightly coupled.
// But at least we check for the existence of
// the lightWindow_DoneLoading() function before
// we try calling it.
if(('function' == typeof window.lightWindow_DoneLoading)){
lightWindow_DoneLoading();
}
}
In the main code we need to create a function called lightWindow_DoneLoading(). This is our pseudo-event handler that will handle the pseudo event that we raised. The code in our main page (including the loading of the necessary libraries) will look like this.
<link rel="stylesheet" type="text/css" href="css/lightwindow.css" />
<script type="text/javascript" src="/dnn/Portals/0/javascript/prototype.js"></script>
<script type="text/javascript" src="/dnn/Portals/0/javascript/effects.js"></script>
<script type="text/javascript" src="/dnn/Portals/0/javascript/lightwindow.js"></script>
<script type="text/javascript">
function lightWindow_DoneLoading() {
myLightWindow.activateWindow({
href: 'http://www.google.com',
title: 'Google',
author: 'Datawin Consulting',
caption: 'This is the Google Homepage.',
width: 995,
height: 610,
top: 10,
left: 200
});
}
</script>
To modify the appearance of the LightWindow you would change the following values in the “activeWindow” method above:
- href – the url of the site you want in your LightWindow.
- title – the text for the Title that shows on the left, directly above the LightWindow.
- author - the text for the Author that shows in the bottom, right hand side of the LightWindow.
- caption – the text for the Caption that show in the bottom, left hand side of the LightWindow.
- width – the width of the LightWindow in pixels.
- height – the height of the LightWindow in pixels.
- top – the top position of the LightWindow relative to the browser window.
- left – the left position of the LightWindow relative to the browser window.
p.s. You will note that since our hack to the LightWindow.js checks for the existence of the function before trying to call it, it will not throw an error if the function does not exist in your main page. That means you can use the hacked version even on your pages where you don’t necessarily want an automatic LightWindow pop up.)
