HI Brian,

One way to do this is to use absolute positioning for the "initial" and "replaced" elements and relative positioning for the "replacing" div. You'll want to set a min-height on the "replacing" div so things look right. (Note: you can use height rather than min-height in an IE6- only stylesheet to get it to work with IE6 as well.) Also, rather than using setTimeout with a time of zero, you can just bind the function to $(window).load();

I copied your page and modified it as described above. You can check it out here:

http://test.learningjquery.com/replace-element.html


--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com



On Jan 16, 2008, at 11:53 AM, Brian Talbot wrote:


As an update, I've gotten the functionality to work. :o)

But the behavior isn't completely correct. Ideally, the initial
element (<div class="initial"></div>)  would fade out with the
replaced element (<div class="replaced"></div>) being visually
directly behind it and becoming more visible as the initial element
fades out.

Does anyone have any experience or ideas for how to make that
specifically happen?

On Jan 16, 9:31 am, Brian Talbot <[EMAIL PROTECTED]> wrote:
Hi All,

I'm still getting my feet wet with JQuery and am having some trouble
trying to accomplish the following:

I'd like to have one HTML element (in the case of the example below
its a <div class="initial"></div>) be replaced by another HTML element
(again in this case its <div class="replaced"></div>) when the page/
DOM containing these elements is loaded. Additionally, I'd like the
initial element (<div class="initial"></div>) to fade out visually and
the replaced element (<div class="replaced"></div>) to be present
visually behind it as it fades out.

* I've got an example of what I've done so far here 
-http://www.brian-talbot.com/inventingroom/replacing-content-on-load/

* You can view the JQuery JS I've tried to cobble together here -http://www.brian-talbot.com/inventingroom/replacing-content-on-load/j ...

If you know of anything I'm doing terribly wrong or a better way to
generally achieve this behaviro, please let me know. Any help is much
appreciated.

Reply via email to