• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2494
  • Last Modified:

JQUERY - Fadein on load ignores absolutely positioned DIV's

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: www.richardmassey.com.au  (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()
{
 $("div#DivLayout-Fadewrapper").fadeIn(2000);
}
 
</script> 
 
<script type="text/javascript">
jQuery(document).ready(function(){
          jQuery('a.fademe').click(function(){
          jQuery('#DivLayout-Fadewrapper').fadeOut();
          setTimeout("nav('"+this.href+"')",2000);
          return false;
    });
});
 
function nav(href){
 location.href=href;
}
</script>

Open in new window

0
RichardMass
Asked:
RichardMass
  • 2
1 Solution
 
sh0eCommented:
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">
0
 
sh0eCommented:
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.
0
 
RichardMassAuthor Commented:
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.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now