SamuelXiao wrote:
> I am writing an application using prototype.js and dialog.2.0.js
> ( 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: '',
>               width: 'max',
>               height: 'max',
>               padding:0,
>               margin: 75,
>               iframe:''
>       });
> $('dialog_1').observe('click',function(){
> });
> 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.


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 

Event.observe(document, 'dom:loaded', //the prototype.js magic event
     function () {

You can read more on this on unofficial wiki:

Best Regards,

You received this message because you are subscribed to the Google Groups 
"Prototype &" group.
To post to this group, send email to
To unsubscribe from this group, send email to
For more options, visit this group at

Reply via email to