Results 1 to 9 of 9

Thread: Lightwindow from Javascript call - party on?

  1. #1
    Join Date
    Nov 2010
    Posts
    24
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question Lightwindow from Javascript call - party on?

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,126
    Thanks
    44
    Thanked 3,228 Times in 3,189 Posts
    Blog Entries
    12

    Default

    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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    suction cup (11-28-2010)

  4. #3
    Join Date
    Nov 2010
    Posts
    24
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,126
    Thanks
    44
    Thanked 3,228 Times in 3,189 Posts
    Blog Entries
    12

    Default

    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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #5
    Join Date
    Nov 2010
    Posts
    24
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post

    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.

    Quote Originally Posted by jscheuer1 View Post

    }
    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

  7. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,126
    Thanks
    44
    Thanked 3,228 Times in 3,189 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #7
    Join Date
    Nov 2010
    Posts
    24
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Thanks again

    Quote Originally Posted by jscheuer1 View Post

    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.

    Quote Originally Posted by jscheuer1 View Post
    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

  9. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,126
    Thanks
    44
    Thanked 3,228 Times in 3,189 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #9
    Join Date
    Nov 2010
    Posts
    24
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Smile

    Quote Originally Posted by jscheuer1 View Post
    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!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •