fade two .html pages

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

Originally Posted by Morlacheerful

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

Code:

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

Code:

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

Code:

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

Code:

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

Code:

<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

Originally Posted by jscheuer1

Code:

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

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

thanks

**jscheuer1** · 09-17-2010, 07:21 AM

Originally Posted by johnywhy

Originally Posted by jscheuer1

Code:

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

Thread: fade two .html pages

Thread Tools

Search Thread

The Following User Says Thank You to jscheuer1 For This Useful Post:

Back at work

Fade

Bookmarks

Bookmarks

Posting Permissions