SamuelXiao wrote:
> I am writing an application using prototype.js and dialog.2.0.js
> (http://roland.devarea.nl/dialog/#e6) the iframe effect. But I
> encountered a problem when I try to fitting it into my application.
> What I want to do is that when a user click <a href="#"
> id="dialog_1">Show Iframe</a> , a dialog box will be shown. Thus, I
> use the following code,
>
> //showiframe.js
> var modal = new Dialog({
> handle: '#dialog_1',
> title: 'Google.com',
> width: 'max',
> height: 'max',
> padding:0,
> margin: 75,
> iframe:'http://www.google.com'
> });
>
> $('dialog_1').observe('click',function(){
> modal.open();
> });
>
> then in my page, i have,
> <head>
[...]
> <script type="text/javascript" src="js/showiframe.js"></script>
> </head>
> and embeding the javascript in the main page,
[...]
> It works fine. Does anyone know how can I implement it in an
> unobtrusive way? Any help would be appreciated.
Hey,
The problem you encountered is the fact that you execute the
$('dialog_1') function as soon as the script file loads, and not after
the DOM tree is ready. At the point that script is loaded not all the
html might be loaded and parsed by the browser.
What you need to do is to defer executing all the DOM related code to
the moment when the page is completely parsed and the Document Object
Model tree is ready in browser.
Prototype.js gives you a simple way to do that all. You just need to
wrap the code in a function and make that function execute when DOM is
ready:
Event.observe(document, 'dom:loaded', //the prototype.js magic event
function () {
$('dialog_1').observe('click',function(){
modal.open();
});
});
You can read more on this on unofficial wiki:
http://proto-scripty.wikidot.com/prototype:element-has-no-properties
--
Best Regards,
SWilk
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
