Page 2 of 2 FirstFirst 12
Results 11 to 20 of 20

Thread: fade two .html pages

  1. #11
    Join Date
    Jun 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hello,

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

  2. #12
    Join Date
    Mar 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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

  3. #13
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,933
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Morlacheerful View Post
    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>
    Last edited by jscheuer1; 03-19-2009 at 01:31 PM. Reason: comment out unnecessary title tag and charset meta tag
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    Morlacheerful (03-19-2009)

  5. #14
    Join Date
    Mar 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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

  6. #15
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,933
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #16
    Join Date
    Mar 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Unhappy Back at work

    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

  8. #17
    Join Date
    May 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  9. #18
    Join Date
    Jan 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    Code:
    ///////////////// Stop Editing /////////////////
    hi, can anyone explain this line, from post above? what does it mean?

    thanks

  10. #19
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,933
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by johnywhy View Post
    Quote Originally Posted by jscheuer1 View Post
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  11. #20
    Join Date
    Feb 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Fade

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •