fade two .html pages

**skizo** · 08-02-2005, 01:16 AM

hi all,

i'm still pretty new to javascript coding; i see alot of scripts giving you the chance to fade images or texts together. but what i'm looking for is a script who will fade two .html files together on load. let's say we open an html page and it will fade to another in the time we'll set...

is that possible?
thx to all of you coding gurus!

**dd2me** · 08-02-2005, 05:19 AM

i think this can be done using microsoft filter, but of course compatible with IE only. You have have ever visit some site do that. They use filter, not a javascript

**skizo** · 08-03-2005, 07:45 PM

ya, i saw a website that describe a code (from frontpage) to fade two .html's together but only compatible with IE...
i'm looking for a cross-browser javascript code (if possible)...
thx anyway

**skizo** · 08-03-2005, 09:42 PM

i just found this code (that fades in an html page onload, that should be ok for what i want):

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
function fadeInPage()
{
if(document.getElementById("fadeDiv").filters("alpha").opacity < 100)
{
document.getElementById("fadeDiv").filters("alpha").opacity += 10;
setTimeout("fadeInPage()",100);
}
else
{
document.getElementById('fadeDiv').style.visibility = "visible";
}
}
</script>
</head>

<body onLoad="fadeInPage()">

<DIV ID="fadeDiv" style="filter:Alpha(opacity=0); width:100%">
Welcome to my Homepage!
</DIV>

</body>
</html>

it's pretty good for what i want but it only works in IE.

does anyone know how to make it cross-browser compatible?

**jscheuer1** · 08-04-2005, 01:13 AM

Actually, owing to IE's alpha opacity making text look funny even at 100, which is supposed to be normal, you are better off using the blendTrans on page enter. This effect isn't noticeable on refresh but when entering the page from another page, it is noticeable and very smooth. Mozilla has nothing of the sort but, it does have -moz-opacity, a smoother (for text) type of opacity. Try this out:

Code:

<html>
<head>
<meta http-equiv="Page-Enter" content="blendTrans(Duration=3.0)">
<script type="text/javascript">
function fadeInPage(){
if (document.getElementById("fadeDiv").style.MozOpacity < 1){
document.getElementById("fadeDiv").style.MozOpacity = .1 + Math.abs(document.getElementById("fadeDiv").style.MozOpacity)
setTimeout("fadeInPage()",200);
}
else
document.getElementById('fadeDiv').style.visibility = "visible";
}
</script>
</head>

<body onLoad="fadeInPage()">

<DIV ID="fadeDiv" style="-moz-opacity:0.00; width:100%">
Welcome to my Homepage!
</DIV>

</body>
</html>

**skizo** · 08-04-2005, 02:42 PM

thx John, really appreciated...
it seems to work fine in both IE and Firefox (didn't try netscape)...

**rwilk** · 04-28-2008, 09:47 PM

Originally Posted by skizo

thx John, really appreciated...
it seems to work fine in both IE and Firefox (didn't try netscape)...

Doesn't work in safari. Any ideas? It's a great script...

**jscheuer1** · 04-29-2008, 05:25 AM

Originally Posted by rwilk

Doesn't work in safari. Any ideas? It's a great script...

Sure. This is an old thread, from 2005. A number of things have changed since then. This new version works in IE 5.5+, Opera 9+, Safari 3 Win (probably all Safari), and FF 2+ (probably all Mozilla based browsers), and probably in any browser that supports addEventListener() and style opacity of any kind (as well as the IE versions mentioned, many of which don't support all these things). Due to the loss of text anti-aliasing in Opera for elements with opacity less than 100%, the biggest change in using this on your page is that the background must be set (see script), as instead of fading the page division in, a division which covers the page is faded out and then removed. You should use standard background style for this setting, either a color, as shown in the demo or a color and background image, ex:

Code:

fadeInPage.bg='#fff url(some.gif)'

Any valid css background styles may be used. For best results in most cases, match the page's background style.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<meta http-equiv="Page-Enter" content="blendTrans(Duration=3.0)">
<!-- NOTE: Above meta tag required for IE page transition, adjust duration (in seconds) as desired -->
<title>Fade-In Page Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* Style for Fade-In Page script */
#fadeDiv {
display:none;
}
/* End Style for Fade-In Page script */
</style>
<script type="text/javascript">

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

fadeInPage.speed=50; //Set speed of transition for non-IE, lower numbers are faster, 20 is the minimum safe value
fadeInPage.bg='#fff'; //Set backgroud style (color or color and image) of transition division for non-IE, should match page background or the predominant color of the page

///////////////// Stop Editing /////////////////

function fadeInPage(){
var el=document.getElementById("fadeDiv");
el.style[fadeInPage.prprt] = el.style[fadeInPage.prprt] == ''? 1 : el.style[fadeInPage.prprt];
if (el.style[fadeInPage.prprt] > 0){
el.style[fadeInPage.prprt] = el.style[fadeInPage.prprt] - 0.02;
setTimeout("fadeInPage()", fadeInPage.speed);
}
else {
el.style[fadeInPage.prprt] = 0;
if(document.removeChild)
el.parentNode.removeChild(el);
}
}
if(document.documentElement&&document.documentElement.style){
fadeInPage.d=document.documentElement, fadeInPage.t=function(o){return typeof fadeInPage.d.style[o]=='string'};
fadeInPage.prprt=fadeInPage.t('opacity')? 'opacity' : fadeInPage.t('MozOpacity')? 'MozOpacity' : fadeInPage.t('KhtmlOpacity')? 'KhtmlOpacity' : null;
}
fadeInPage.set=function(){
var prop=fadeInPage.prprt=='opacity'? 'opacity' : fadeInPage.prprt=='MozOpacity'? '-moz-opacity' : '-khtml-opacity';
document.write('\n<style type="text/css">\n#fadeDiv {\nheight:'+window.innerHeight+'px;display:block;position:fixed;'+
'z-index:10000;top:0;left:0;background:'+fadeInPage.bg+';width:100%;\n'+ prop +':1;\n}\n<\/style>\n');
}
if(window.addEventListener&&fadeInPage.prprt){
fadeInPage.set();
window.addEventListener('load', fadeInPage, false);
}
</script>
</head>
<body>
<div id="fadeDiv"></div>
<div>
Welcome to my Homepage!
</div>

</body>
</html>

**rwilk** · 05-01-2008, 03:26 AM

Thank you! That works great and really simple to configure!

**oboildeo** · 05-09-2008, 04:34 PM

With the first code (posted 08-03-2005 by jscheuer1) I was able to target a specific table on the page to fade in by placing the DIV tag directly before the table code, and closing the tag directly after. However it doesn't seem to work for the new code. The entire page fades in instead of just the desired section. Is there a way around this, to have the page load normally and only a selected area fade in?

Thread: fade two .html pages

Thread Tools

Search Thread

fade two .html pages

Bookmarks

Bookmarks

Posting Permissions