Solved

JQUERY - Fadein on load ignores absolutely positioned DIV's

Posted on 2008-10-27
3
2,483 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
  • 2
3 Comments
 
LVL 16

Accepted Solution

by:
sh0e earned 500 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

762 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

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now