www.webdeveloper.com
Results 1 to 2 of 2

Thread: show div slowly

  1. #1
    Join Date
    Aug 2005
    Posts
    19

    show div slowly

    hi to all,

    I need to know if is possible show a div with a slow load motion.

    I use a javascript code to show/hidden but I would to improve it and show the content of the div slowly.

    I will appreciate a comment.

    this is the javascript code:

    <script type="text/javascript" language="javascript">
    //funzione espandi
    function visualizza(id){
    if (document.getElementById){
    if(document.getElementById(id).style.display == 'none'){
    document.getElementById(id).style.display = 'block';
    } else {
    document.getElementById(id).style.display = 'none';
    document.getElementById('tbl1').style.height = '460px';
    document.getElementById('tbl2').style.height = '460px';
    document.getElementById('main').style.height = '450px';

    }
    }
    }
    </script>

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,479
    Hi there ghena,

    have a look at this, it may give you some ideas...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>fade in background color</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <script type="text/javascript">
    //<![CDATA[
    
    /* all the below values ( 255 - 0 ) may be edited */
    
      var start_r=255        /*this is the start red value*/
      var start_g=255;      /*this is the start green value*/
      var start_b=255;      /*this is the start blue value*/
    
      var end_r=68;          /*this is the end red value*/
      var end_g=90;         /*this is the end green value*/ 
      var end_b=128;       /*this is the end blue value*/
    
      var speed=100;        /*this is the speed value in milliseconds*/
    
    /* end of editable values */
    
    function fadeIn() {
         document.getElementById("lorem").style.backgroundColor="rgb("+start_r+","+start_g+","+start_b+")";
    if(start_r>end_r) {
       start_r--;
     }
    if(start_g>end_g) {
       start_g--
     }
    if(start_b>end_b) {
       start_b--
     }
    if((start_r==end_r)&&(start_g==end_g)&&(start_b==end_b)) {
       return;
     }
    setTimeout("fadeIn()",speed);
    }
    onload=fadeIn;
    
    //]]>
    </script>
    
    <style type="text/css">
    /*<![CDATA[*/
    /*body {
         background-color:rgb(68,90,128);
         color:#fff;
     }*/
    div {
         width:50%;   
         margin:50px auto;
       
     }
    #lorem {
         font-family:verdana,arial,helvetica,sans-serif;
         font-size:18px;
         color:#fff;
         text-align:justify;
         background-color:rgb(68,90,128);;
         padding:20px;
     }
        
    /*//]]>*/
    </style>
    
    </head>
    <body>
    
    <div>
    <p id="lorem">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent blandit venenatis purus. 
    Integer massa libero, vehicula id, consequat sed, tincidunt nec, purus. Class aptent taciti 
    sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse potenti. 
    Nunc vulputate magna non magna. Aenean lorem eros, adipiscing quis, semper non, dictum a, nunc. 
    Curabitur ut sem. Pellentesque a est id neque hendrerit ultrices. Donec vulputate tincidunt turpis. 
    Curabitur dignissim vestibulum nunc. Aliquam felis lorem, ultrices sit amet, convallis a, accumsan vel, 
    ante. Proin aliquam turpis sed augue. In pellentesque, magna a pulvinar adipiscing, est orci adipiscing 
    felis, sed laoreet urna magna quis neque. Proin facilisis aliquet urna.
    </p>
    </div>
    
    </body>
    </html>
    coothead

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles