PDA

View Full Version : 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:

<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
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
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:


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.


<!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?

georgeandjacks
06-29-2008, 06:57 PM
Hello,

I am wondering how to center the background image and prevent it from tiling?

Morlacheerful
03-17-2009, 06:17 PM
Hi John,

first of all, i searched the whole day to find exactly this!!
Thanks a lot.
But i have a little Problem, in my case the fade in effect is that the content of the div is fading out, that means the page content disapeares.
See
http://fk.koou.eu/carousel/top3.html

Maybe you can help me let the content fade in, not out.

Kind Regards
Morla

jscheuer1
03-18-2009, 02:20 AM
Hi John,

first of all, i searched the whole day to find exactly this!!
Thanks a lot.
But i have a little Problem, in my case the fade in effect is that the content of the div is fading out, that means the page content disapeares.
See
http://fk.koou.eu/carousel/top3.html

Maybe you can help me let the content fade in, not out.

Kind Regards
Morla


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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"> -->
<base href="http://fk.koou.eu/carousel/" />
<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>
<title>Unbenanntes Dokument</title>
</head>

<body><div id="fadeDiv"></div><div><a href="hitradio_ffh.html" target="_self"><img border="0" src="images/main3.png" alt="" /></a></div>
</body>
</html>

Morlacheerful
03-19-2009, 11:11 AM
Hi John,

perfect, thats great.
I changed the base path so i had to change this, but from this secon on this part works.
No my boss finds it so nice, that he wants to fade in an other page too, but on this page is allready an fading effect on some elements (on mous over), you can see it here:
http://fk.koou.eu/news_carousel.html
So thats the next problem, i can't get it to work.
Maybe you would ee so nice an help me again?

Kind regards
Morla

jscheuer1
03-19-2009, 01:29 PM
It's working in most browsers. You left off the meta tag for fading in IE. It can go right here:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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 -->


Also, if you were talking about:


<base href="http://fk.koou.eu/carousel/" />

when you said:


I changed the base path so i had to change this

It's not required. I use that for all my demos when they require content from another domain. It saves a lot of time. But if the page is already on the correct domain and in the correct folder, the base paths will also be correct without the need of the base tag.

Further, I noticed just now that I left in some 'junk' in my demo, these lines should not appear:


<title>Fade-In Page Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

I will comment them out in my previous post, but they may simply be removed.

Morlacheerful
04-02-2009, 08:56 AM
Hi John,

i am back at work and so i test and try to reach the best result.

I think i did not explain good what i want do do.
Look at this link:
http://fk.koou.eu/
Here take a look at the carousel with the 4 images. Every time someone clicks on one of the links (New, Showreels or Featured) it should apear a ne carousel without loading the whole page. I did this with iframes, its working.
So now the iframe content is a html page and in this page i use your script and the Meta Tag for ie.
In IE everything works fine, the effect is that the old content disapears slow and the new content fades in slow. GREAT!!
But on Safari the old content dissapears quick and the new content fades in.

The goal is to hav it working like on ie.
I am no programmer but i tried the following:


<base href="http://fk.koou.eu/" />
<style type="text/css">
/* Style for Fade-In Page script */
#fadeDiv {
display:none;
padding-top:0px;
padding-left:0px;
}
/* End Style for Fade 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.
*/

fadeOutPage.speed=20; //Set speed of transition for non-IE, lower numbers are faster, 20 is the minimum safe value
fadeOutPage.bg='#000'; //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 fadeOutPage(){
var el=document.getElementById("fadeDiv");
el.style[fadeOutPage.prprt] = el.style[fadeOutPage.prprt] == ''? 1 : el.style[fadeOutPage.prprt];
if (el.style[fadeOutPage.prprt] > 0){
el.style[fadeOutPage.prprt] = el.style[fadeOutPage.prprt] - 0.02;
setTimeout("fadeOutPage()", fadeOutPage.speed);
}
else {
el.style[fadeOutPage.prprt] = 0;
if(document.removeChild)
el.parentNode.removeChild(el);
}
}
if(document.documentElement&&document.documentElement.style){
fadeOutPage.d=document.documentElement, fadeOutPage.t=function(o){return typeof fadeOutPage.d.style[o]=='string'};
fadeOutPage.prprt=fadeOutPage.t('opacity')? 'opacity' : fadeOutPage.t('MozOpacity')? 'MozOpacity' : fadeOutPage.t('KhtmlOpacity')? 'KhtmlOpacity' : null;
}
fadeOutPage.set=function(){
var prop=fadeOutPage.prprt=='opacity'? 'opacity' : fadeOutPage.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:'+fadeOutPage.bg+';width:100%;\n'+ prop +':1;\n}\n<\/style>\n');
}
if(window.addEventListener&&fadeOutPage.prprt){
fadeOutPage.set();
window.addEventListener('unload', fadeOutPage, false);
}

</script>
As you did a FadeInPage function i tried to add a FadeOutPage function with the event unload.
I thought it could work but it would have bin to easy i guess.
Is there a way to get it work?

Can you please help me once again?

Kind Regards
Morla

UniversalPolymath
05-08-2009, 02:25 PM
John, thanks a lot for all your work in this thread! I used the first code you posted to fade-in a whole page, but now I was wondering if there's one to fade-out when I click off that page. So page fades in, you click on a link, it fades back out before the next one fades in.

Thank you much for your help. I'm really, really new to all this.

johnywhy
09-17-2010, 03:57 AM
///////////////// Stop Editing /////////////////


hi, can anyone explain this line, from post above? what does it mean?

thanks

jscheuer1
09-17-2010, 07:21 AM
///////////////// Stop Editing /////////////////


hi, can anyone explain this line, from post above? what does it mean?

thanks

It means to stop editing - unless you really know what you're doing, all code below that line up to the closing </script> should remain as is.

Even if you don't know what you're doing, you may play around with that code if you like. But it would be wise to keep backups. Also, if you're not well versed in javascript, changes you make to that section might only work OK in one or more of the browsers covered by the existing code.

tbrown123
02-28-2011, 03:14 PM
Hi John-

Do you have any experience with this and Google Chrome? It seems to work perfectly for me with Safari, IE8, and FF. But my links do not work now in Chrome.....

Thanks for your help!

Tim