Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: fade in/out div

  1. #1
    Senior Coder crmpicco's Avatar
    Join Date
    Jan 2005
    Location
    Mauchline, Scotland
    Posts
    1,097
    Thanks
    15
    Thanked 1 Time in 1 Post

    Thumbs down fade in/out div

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Hide / Show DIV</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    <!--
    .demo
    {
    color:#000033;
    background-color:#cccccc;
    layer-background-color:#cccccc;
    position:absolute;
    bottom:10px;
    width:800px;
    height:100px;
    visibility:hidden;
    }
    -->
    </style>
    <script type="text/javascript">
    <!--
    function toggleBox(szDivID, iState) // 1 visible, 0 hidden
    {
        if(document.layers)	   //NN4+
        {
           document.layers[szDivID].visibility = iState ? "show" : "hide";
        }
        else if(document.getElementById)	  //gecko(NN6) + IE 5+
        {
            var obj = document.getElementById(szDivID);
            obj.style.visibility = iState ? "visible" : "hidden";
        }
        else if(document.all)	// IE 4
        {
            document.all[szDivID].style.visibility = iState ? "visible" : "hidden";
        }
    }
    // -->
    </script>
    
    </head>
    
    <body>
    <div ID="demodiv" class="demo">
    <table>
    <tr>
    <td>Rules</td>
    </tr>
    <tr>
    <td>Minimum Stay</td>
    <td>1 day</td>
    </tr>
    <tr>
    <td>Maximum Stay</td>
    <td>1 year</td>
    </tr>
    </table>
    </div>
    
    <table>
    <tr>
    <td bgcolor="#006699" onMouseOver="this.bgColor = '#C0C0C0'; this.style.color='#000000';toggleBox('demodiv',1);style.cursor='hand'"
    onMouseOut="this.bgColor = '#006699'; this.style.color='#FFFFFF';"><font color="#FFFFFF" face="verdana" size="-2">Show DIV</font></td>
    <td bgcolor="#006699" onMouseOver="this.bgColor = '#C0C0C0'; this.style.color='#000000';toggleBox('demodiv',0);style.cursor='hand'"
    onMouseOut="this.bgColor = '#006699'; this.style.color='#FFFFFF';"><font color="#FFFFFF" face="verdana" size="-2">Hide DIV</font></td>
    </tr>
    </table>
    </body>
    </html>
    Is there a way i can modify this code above to Fade In/Out onMouseOver instead of just show/hide?

    TIA>

    Picco

  • #2
    Registered User
    Join Date
    Oct 2004
    Posts
    592
    Thanks
    0
    Thanked 1 Time in 1 Post
    fadein - fade out will will work in IE only.
    Another replacement : flash or java applet.

  • #3
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    opacity fade for all browsers

    thats not true. It can been done to be cross browser compatible.

    Using javascript and CSS one can fade things, it uses the opacity CSS.

    I haven't reallly looked at your code. But i think what you may be looking for is:
    http://chimpen.com/fadomatic/

    Post back once you've fixed the problem and put up the site. I'd like to see how you use it.


  •  

    Posting Permissions

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