JQUERY - Fadein on load ignores absolutely positioned DIV's

Posted on 2008-10-27
Last Modified: 2012-08-13
Hi everyone. I promised Sh0e and Slinkygn that I had a good handle on this JQUERY stuff but I was wrong. I am using Sh0e's Onload fadein effect and fadeout on click script as a page transition method however the fade in/out seems to ignore any absolutely positioned DIV when viewed in any version of IE

Any example can be seen here:  (view in FF first to see the working version and then try in IE and you will see the divs appear before fadein is complete.

I have pasted the script I am using below, please let me know if you need any more information. Any assistance on this will be hugely appreciated as this issue is bringing me closer and closer to changing the design of my page (auh, the frustrations of IE).  Sorry, couldn't help myself!
<script type="text/javascript">
window.onload = function()
<script type="text/javascript">
          return false;
function nav(href){

Open in new window

Question by:RichardMass
  • 2
LVL 16

Accepted Solution

sh0e earned 500 total points
ID: 22811532
Sorry, I had to do a late night programming binge and now I need sleep, so I couldn't stick around to help you.
Feel free to come on here and ask as much as you want.  The more questions you ask (no matter how easy or hard), the more it helps everyone.  And I would personally like to see even more people adopting jQuery.

A couple of things:
Don't use window.onload =.  This overwrites the onload, so other onloads would be removed.  Do it the jQuery way with jQuery(document).load(function(){ });  This way you can even have multiple onload calls, and be compatible with other libraries.

You don't have to give up using Prototype/Scriptaculous.  jQuery can work without impacting it.

Now, the quickfix for your fading problem is to use style="position:relative" on <div id="DivLayout-Fadewrapper" style="position: relative">
LVL 16

Expert Comment

ID: 22811555
An addendum, jQuery(document).ready(function(){}) will load at the earliest possible time you can manipulate the DOM.  It's generally better to use it unless you need to make absolute sure that the entire page is loaded before execution.

Author Comment

ID: 22817606
Thank you sooooooooooo much Sh0e. Not only has the position:relative fixed the original issue, it has also corrected several other errors that I was working through all in one hit.

You have been an amazing help while getting my hands dirty with JQuery. Up until utilising your fix, I was getting ready to do away with the page transitions simply out of frustration but that won't be necessary now.

Thank you again.

Featured Post

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

by Julian Matz As of jQuery ( 1.4 the .live() method ( supports custom events as well as some standard JavaScript events that it previously didn't support. Among these is the submit event. Unlike …
Introduction HyperText Transfer Protocol ( or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

860 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question