?
Solved

JQUERY - Fadein on load ignores absolutely positioned DIV's

Posted on 2008-10-27
3
Medium Priority
?
2,490 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 2000 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…
Suggested Courses

770 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