Page fade-in code

**rosib** · 09-08-2011, 06:11 PM

Hi,
I'm looking for some code that will allow me to fade-in a page. From a search I've found this thread - http://www.dynamicdrive.com/forums/a...p/t-33689.html but if I build a page exactly as it's coded and access from IE8 the fade-in effect doesn't work, although in Firefox it's fine.
If anyone can provide me with some guidance to resolve this, or an alternative approach I'd appreciate it.
Thanks in advance,
Roger

**molendijk** · 09-08-2011, 07:09 PM

THIS may be of use.
---
Arie Molendijk.

**jscheuer1** · 09-08-2011, 07:11 PM

Works here in IE 8. But you have to navigate to it from another page. If you just paste the address into the addressbar, the effect will not occur.

Or, use this jQuery version:

Code:

<!DOCTYPE html>
<html>
<head>
<title>Fade-In Page Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">

/* jQuery Fade-In Page script (c)2011 John Davenport Scheuer
   As first seen in http://www.dynamicdrive.com/forums/
   username:jscheuer1 - This credit must remain for legal use.
   */

$('head').append('<style type="text/css">\n/* Style for Fade-In Page script */\n#fadeDiv ' +
	'{\n\tdisplay:none;\n}\n/* End Style for Fade-In Page script */\n</style>\n');
jQuery(function($){
	$('#fadeDiv').fadeIn(1500); // Edit speed in milliseconds
});
</script>
</head>
<body>
<div id="fadeDiv">
<div>
Welcome to my Homepage!
</div>
</div>
</body>
</html>

Note: The fadeDiv has changed. Instead of covering the page it contains it.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

**molendijk** · 09-08-2011, 07:24 PM

John, the jQuery version causes a slight 'fade jump' in IE8.
===
Arie.

**jscheuer1** · 09-08-2011, 07:51 PM

I'm not a big fan of legacy IE. A slight jump is acceptable to me and would have occurred if using the fadeTrans on page enter provided by IE.

But that said, this one will work out smoothly, all the way back to and including IE 6, and is fine for all other browsers supporting opacity:

Code:

<!DOCTYPE html>
<html>
<head>
<title>jQuery Fade-In Page Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- Style for Fade-In Page script -->
<style type="text/css">
#fadeDiv {
	display:none;
	width: 100%;
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
#fadeDiv {
	position: absolute !important;
}
</style>
<![endif]-->
<!-- End Style for Fade-In Page script -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">

/* jQuery Fade-In Page script (c)2011 John Davenport Scheuer
   As first seen in http://www.dynamicdrive.com/forums/
   username:jscheuer1 - This credit must remain for legal use.
   */
   
$.fn.fademypage = {
	speed: 1500, // Edit speed in milliseconds
	background: '#fff' // Edit background style (color or color and image) of transition division, should match page background or the predominant color of the page
}
$('head').append('\n<style type="text/css">\n/* Style for Fade-In Page script */\n#fadeDiv ' +
	'{\n\tdisplay: block;\n\tposition: fixed;\n\theight: ' + $(window).height() + 'px;'+
	'\n\tbackground: ' + $.fn.fademypage.background + ';\n\ttop: 0;\n\tleft: 0;\n}\n/* End Style for Fade-In Page script */\n</style>\n');
jQuery(function($){
	/*@cc_on @*/
	/*@if(@_jscript_version >= 5)
		if($.browser.version < 7){
			window.scrollTo(0, 0);
		}
	@end @*/
	$('#fadeDiv').fadeOut($.fn.fademypage.speed);
});
</script>
</head>
<body>
<div id="fadeDiv"></div>
<div>
Welcome to my Homepage!
</div>
</body>
</html>

Notes:

Oh, and we're back to the fadeDiv covering, not containing the page.

More about fading in IE < 9. It used a proprietary filter starting in IE 5 but not really working until IE 5.5. Worked almost as good as generic opacity does today, but predated it. Had problems fading alpha channel .png images (can be overcome in some cases by using IE's alpha image loader filter for those). In IE 6, required background so as not to lose ClearType anti-aliasing of text, later still (IE 7 and 8) even this was of no avail, thus the final jump of opacity to full with anti-aliasing restored for text in IE 8 (7 was left out of this in jQuery for some reason, so the text remains without anti-aliasing, unless the filter is removed). Opera even imitated this flaw for a brief period in its execution of generic opacity. All of which sort of necessitates that for fading text we use a covering element or change the text color, rather than rely upon IE's alpha opacity filter applied to the text element or its parent(s). To make things even more complex, the behavior as regards alpha channel .png images (fixed with IE 7 in general, but not as regards the alpha opacity filter), as well as the exact action on text, changes with each version (as noted above). Finally with IE 9, it acts for the most part like generic opacity but can still have obscure, hard to track down glitches. Generic opacity may be used instead for IE 9 and is the way to go for that browser, avoiding even the vestigial glitches just mentioned.

**molendijk** · 09-08-2011, 08:08 PM

That's a very nice one!
===
Arie.

**molendijk** · 09-08-2011, 08:17 PM

There's a problem though in Firefox: the fade doesn't work anymore once the page is cached.
===
Arie.

**Brillig** · 09-08-2011, 08:38 PM

I would suggest using the Jquery version. If someone on an older version of IE gets a little jump, that's what they should expect for using an old IE version. Along with square corners when other people get rounded, some PNG backgrounds not transparent, etc...

**jscheuer1** · 09-08-2011, 08:55 PM

Originally Posted by molendijk

There's a problem though in Firefox: the fade doesn't work anymore once the page is cached.
===
Arie.

Not really a problem exactly, and not really cached either. What happens in Firefox and some others is that the script state of the page is saved such that if using the back button or forward button on the browser, the script state as it was when the page was last seen is preserved. However, if you navigate to the page using a link, or by pasting its address into the browser, it works fine even if the page is cached, so it's not a caching issue.

Since as long as your site is well constructed, most users will not be making extensive use of the back and forward buttons on the browser, it's not really a problem.

At least that's how it appears here. If your experience is different, please specify what I need to do to replicate it.

**rosib** · 09-09-2011, 08:20 AM

Many thanks for the replies, I'm working through the different suggestions to determine what's best for me.

Thread: Page fade-in code

Thread Tools

Search Thread

Page fade-in code

Bookmarks

Bookmarks

Posting Permissions