I changed things up a bit:

   <body onload="loadPage('index.html');" id='home'
   style="display:inline; ">
   <div id="root" width="100%" height="100%" style="display:inline; ">
   <div id="container" width="100%" height="100%" style="display:inline; ">

Note that I removed the <iframe> from the page definition. Now, the changes in code:

   function loadPage(s) {
            Effect.Fade('root', {duration:1.5});
            if ($('contentFrame')) {
            Element.insert('container', {top: "<iframe
   id='contentFrame' src='" + s + "' frameborder='0' scrolling='no'
   width='100%' height='100%' style='display:inline; '></iframe>"});
            Effect.Appear('root', {duration:1.5});

Result? The element upon which I apply Fade/Appear has either



   style="" (which seems to force 'display:none')

and it doesn't matter if it's the body element or the root <div>. The effect still is:

  1. page appears (without the 1.5 duration).
  2. page disappears (without any duration).

Note that I'm using Google Chrome - its debugging facility is actually pretty nice. The behaviour is the same in Firefox.

Thanks in advance for any hints that might help.


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 prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to 
For more options, visit this group at 

Reply via email to