Lightwindow from Javascript call - party on?

**suction cup** · 11-27-2010, 08:51 PM

I will award a coconut to the clever chap(ess) who can tell me what is the issue with the following:

<head>
<script type="text/javascript">
function myLightWindow.activateWindow({
href: 'http://www.google.com',
title: 'Melons taste nice raw',
author: 'ThaXhizz',
caption: 'Mmmmmm Margaritas! And yes, this is me...',
height: 300
width: 300
left: 300
});
</script>
</head>
<body>
<form>
<input type="button" value="Click me!" onclick="myLightWindow()" />
</form>
</body>

All other lightwindows work on the site, except this one!

Thanks All

**jscheuer1** · 11-28-2010, 12:18 AM

From what you've shown, myLightWindow is undefined. If it is defined elsewhere, there's no reason to suppose it will run the code in your script there. Also, this syntax:

Code:

function myLightWindow.activateWindow({
href: 'http://www.google.com',
title: 'Melons taste nice raw',
author: 'ThaXhizz',
caption: 'Mmmmmm Margaritas! And yes, this is me...',
height: 300
width: 300
left: 300
});

doesn't conform to any javascript syntax I'm aware of. At best it does nothing. At worst it could generate an error severe enough to stop all javascript processing on the page. This would probably vary by browser.

The object contained therein (highlighted in the above) isn't even a valid javascript object. There should be a comma after each of the first two 300 values.

Now assuming the lightwindow code is available to this page at the locations specified and I haven't made any typos or other errors, this should do what it looks like you intend:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="javascript/lightwindow.js"></script>
<link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="screen" />
<script type="text/javascript"> 
function whatever(){
	myLightWindow.activateWindow({
		href: 'http://www.google.com',
		title: 'Melons taste nice raw',
		author: 'ThaXhizz',
		caption: 'Mmmmmm Margaritas! And yes, this is me...',
		height: 300,
		width: 300,
		left: 300
	});
}
</script>
</head>
<body>
<form>
<input type="button" value="Click me!" onclick="whatever();" />
</form> 
</body>
</html>

**suction cup** · 11-28-2010, 12:58 AM

Thanks John; really apreciate your help.

In fact, the way I've managed to get it working is with the pixel dimensions as you said, with commas!,,,,and inline of the link, like this:

<input type="button" value="Click me!" onclick="myLightWindow.activateWindow({href: 'tour.html', class: 'lightwindow', height: '490', width: '640'})";/>

Best Regards

**jscheuer1** · 11-28-2010, 06:18 AM

Having it inline or in a separate function should make no difference - except that inline there is less pollution of the global scope. That could be dealt with though by using addEvent/attachEvent or its equivalent from prototype.

I just tried out my code and it worked - with one important modification:

Code:

function whatever(){
	myLightWindow.activateWindow({
		href: 'http://www.google.com/',
		title: 'Melons taste nice raw',
		author: 'ThaXhizz',
		caption: 'Mmmmmm Margaritas! And yes, this is me...',
		height: 300,
		width: 300,
		left: 300
	});
}

Apparently without that trailing slash lightwindow cannot determine what the "page type" is. This problem is also solved in your version by making the page:

'tour.html'

In any case, this works without anything added to the global scope:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="javascript/lightwindow.js"></script>
<link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="screen" />
<script type="text/javascript"> 
(function(){
	function whatever(){
		myLightWindow.activateWindow({
			href: 'http://www.google.com/',
			title: 'Melons taste nice raw',
			author: 'ThaXhizz',
			caption: 'Mmmmmm Margaritas! And yes, this is me...',
			height: 300,
			width: 300,
			left: 300
		});
	}
	Event.observe(window, 'load', function(){
		Event.observe($('clicker'), 'click', whatever);
	});
})();
</script>
</head>
<body>
<form>
<input id="clicker" type="button" value="Click me!" />
</form> 
</body>
</html>

**suction cup** · 11-28-2010, 10:28 AM

Originally Posted by jscheuer1

Apparently without that trailing slash lightwindow cannot determine what the "page type" is. This problem is also solved in your version by making the page:

The backslash makes all the difference? Incredible. I'd not have noticed that in a million years.

Originally Posted by jscheuer1

}
Event.observe(window, 'load', function(){
Event.observe($('clicker'), 'click', whatever);
});

It'd be interesting to know why the Event.observe section is added - the function is now called through this via 'clicker', not directly? Is there a special reason for this?

Best Regards

**jscheuer1** · 11-28-2010, 03:43 PM

Using Event.observe is a way of keeping content and function separate. Because I execute it within a function that also contains the function named whatever, it keeps whatever out of the global scope. Both of these are just good practice, and will make it easier to add to or modify this code for use on multiple pages should the need ever arise.

I discovered that if you tell lightwindow 2.0 (which I used in my mock up) what sort of type to expect, it reacts fine without that trailing slash:

Code:

		myLightWindow.activateWindow({
			href: 'http://www.google.com',
			title: 'Melons taste nice raw',
			author: 'ThaXhizz',
			caption: 'Mmmmmm Margaritas! And yes, this is me...',
			height: 650,
			width: 850,
			type: 'external'
		});

I also discovered that lightwindow 2.0 apparently (at least for this code) runs fine under prototype 1.7.0.0 and scriptaculous 1.8.3 (both the latest stable versions I think, and more advanced than those in the lightwindow distro).

This allows us to use the document dom:loaded event (faster than the window load event) and the Event.observe shortcuts:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="javascript/lightwindow.js"></script>
<link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="screen" />
<script type="text/javascript"> 
(function(){
	function whatever(){
		myLightWindow.activateWindow({
			href: 'http://www.google.com/',
			title: 'Melons taste nice raw',
			author: 'ThaXhizz',
			caption: 'Mmmmmm Margaritas! And yes, this is me...',
			height: 650,
			width: 850
		});
	}
	document.observe('dom:loaded', function(){
		$('clicker').observe('click', whatever);
	});
})();
</script>
<style type="text/css">
iframe {
	overflow: hidden!important;
}
</style>
</head>
<body>
<form>
<input id="clicker" type="button" value="Click me!" />
</form> 
</body>
</html>

This also allows us to change (near the end of lightwindow.js):

Code:

Event.observe(window, 'load', lightwindowInit, false);

to:

Code:

document.observe('dom:loaded', lightwindowInit);

for at least slightly faster response time in initializing lightwindow. On a page with many images, this response time increase will be significant.

**suction cup** · 11-28-2010, 04:10 PM

Thanks again

Originally Posted by jscheuer1

I also discovered that lightwindow 2.0 apparently (at least for this code) runs fine under prototype 1.7.0.0 and scriptaculous 1.8.3 (both the latest stable vers

OK cool; so you can update to the latest versions and it will run better? Excellent.

Originally Posted by jscheuer1

This also allows us to change (near the end of lightwindow.js):

Code:

Event.observe(window, 'load', lightwindowInit, false);

to:

Code:

document.observe('dom:loaded', lightwindowInit);

You mention these changes to lightwindow.js - will this effect (and improve) performance of Lightwindows that are not being opened with Javascript?

Cheers

**jscheuer1** · 11-28-2010, 04:26 PM

Yes. The official lightwindow.js 2.0 is limited by the methods available in prototype 1.5.1.1 for which it was written.

At that time we had to wait for the entire window to load, including all of it's scripts, styles and images, Flash objects (if any and not streamed), etc. before clicking on a normal trigger for lightwindow would do anything special (the default without lightwindow for a normal lightwindow link is to launch the content in the current window, effectively wiping out the page).

Now we just have to wait for the DOM (HTML code) to load.

There are other refinements possible, such as making normal lightwindow content that arrives later via AJAX, innerHTML insertion, or DOM manipulation also be respected. But that's a bit more complicated.

**suction cup** · 11-28-2010, 05:37 PM

Originally Posted by jscheuer1

Yes. The official lightwindow.js 2.0 is limited by the methods available in prototype 1.5.1.1 for which it was written.

Now we just have to wait for the DOM (HTML code) to load.

So it loads everything up once at the start, instead of each time?

Alright, well I made those changes - updated the prototype and scriptaculous and changed that line at the end of the lightwindow.js.

Interestingly, this has solved an error in IE where, on the second time of loading a given lightwindow on a page, an extra panel would appear on the window with the text ''by null'' on it. It didn't look so good.

Only thing now is, IE isn't displaying swf content in the lightboxes - I'm wondering if the update has effected something here.

Thanks for your time - it's been good to solve the by null issue!

Thread: Lightwindow from Javascript call - party on?

Thread Tools

Search Thread

Lightwindow from Javascript call - party on?

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions