Page 1 of 2 12 LastLast
Results 1 to 10 of 20

Thread: fade two .html pages

  1. #1
    Join Date
    Mar 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default fade two .html pages

    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!

  2. #2
    Join Date
    Jun 2005
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  3. #3
    Join Date
    Mar 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Mar 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,953
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

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

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

  6. #6
    Join Date
    Mar 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  7. #7
    Join Date
    Apr 2008
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by skizo View Post
    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...

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,953
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

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

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

  9. #9
    Join Date
    Apr 2008
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

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

  10. #10
    Join Date
    May 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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?

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
  •