Solved

JQUERY - Fadein on load ignores absolutely positioned DIV's

Posted on 2008-10-27
3
2,489 Views
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: 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
Comment
Question by:RichardMass
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 16

Accepted Solution

by:
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">
0
 
LVL 16

Expert Comment

by:sh0e
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.
0
 
LVL 1

Author Comment

by:RichardMass
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.
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

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

DOM Attributes and Properties treatment with jQuery 1.6 by Ivo Stoykov jQuery (http://jquery.com/) 1.6 introduces .prop() (http://api.jquery.com/prop/) and .removeProp() (http://api.jquery.com/removeProp/) methods which allow modifying or removi…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
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…

705 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