1 // Make an HTML element fly in from the top or bottom.

     2 // Includes inertia!

     3 

     4 // vB, don't even try. It's GPL like the rest of Enano. I know you're jealous. >:)

     5 

     6 var fly_in_cache = new Object();

     7 var FI_TOP = 1;

     8 var FI_BOTTOM = 2;

     9 var FI_IN = 1;

    10 var FI_OUT = 2;

    11 var FI_UP = 1;

    12 var FI_DOWN = 2;

    13 

    14 // Placeholder functions, to make organization a little easier :-)

    15 

    16 function fly_in_top(element, nofade, height_taken_care_of)

    17 {

    18   return fly_core(element, nofade, FI_TOP, FI_IN, height_taken_care_of);

    19 }

    20 

    21 function fly_in_bottom(element, nofade, height_taken_care_of)

    22 {

    23   return fly_core(element, nofade, FI_BOTTOM, FI_IN, height_taken_care_of);

    24 }

    25 

    26 function fly_out_top(element, nofade, height_taken_care_of)

    27 {

    28   return fly_core(element, nofade, FI_TOP, FI_OUT, height_taken_care_of);

    29 }

    30 

    31 function fly_out_bottom(element, nofade, height_taken_care_of)

    32 {

    33   return fly_core(element, nofade, FI_BOTTOM, FI_OUT, height_taken_care_of);

    34 }

    35 

    36 function fly_core(element, nofade, origin, direction, height_taken_care_of)

    37 {

    38   if ( !element || typeof(element) != 'object' )

    39     return false;

    40   // target dimensions

    41   var top, left;

    42   // initial dimensions

    43   var topi, lefti;

    44   // current dimensions

    45   var topc, leftc;

    46   // screen dimensions

    47   var w = getWidth();

    48   var h = getHeight();

    49   var y = parseInt ( getScrollOffset() );

    50   // temp vars

    51   var dim, off, diff, dist, ratio, opac_factor;

    52   // setup element

    53   element.style.position = 'absolute';

    54   

    55   dim = [ $(element).Height(), $(element).Width() ];

    56   off = [ $(element).Top(), $(element).Left() ];

    57   

    58   if ( height_taken_care_of )

    59   {

    60     top = off[0];

    61     left = off[1];

    62   }

    63   else

    64   {

    65     top  = Math.round(( h / 2 ) - ( dim[0] / 2 )) + y; // - ( h / 4 ));

    66     left = Math.round(( w / 2 ) - ( dim[1] / 2 ));

    67   }

    68   

    69   // you can change this around to get it to fly in from corners or be on the left/right side

    70   lefti = left;

    71   

    72   // calculate first frame Y position

    73   if ( origin == FI_TOP && direction == FI_IN )

    74   {

    75     topi = 0 - dim[0] + y;

    76   }

    77   else if ( origin == FI_TOP && direction == FI_OUT )

    78   {

    79     topi = top;

    80     top = 0 - dim[0] + y;

    81   }

    82   else if ( origin == FI_BOTTOM && direction == FI_IN )

    83   {

    84     topi = h + y;

    85   }

    86   else if ( origin == FI_BOTTOM && direction == FI_OUT )

    87   {

    88     topi = top;

    89     top = h + y;

    90   }

    91   

    92   var abs_dir = ( ( origin == FI_TOP && direction == FI_IN ) || ( origin == FI_BOTTOM && direction == FI_OUT ) ) ? FI_DOWN : FI_UP;

    93   

    94   /*

    95    * Framestepper parameters

    96    */

    97   

    98   // starting value for inertia

    99   var inertiabase = 1;

   100   // increment for inertia, or 0 to disable inertia effects

   101   var inertiainc  = 1;

   102   // when the progress reaches this %, deceleration is activated

   103   var divider = 0.666667;

   104   // multiplier for deceleration, setting this above 2 can cause some weird slowdown effects

   105   var decelerate  = 2; // 1 / divider; // reciprocal of the divider

   106   

   107   /*

   108    * Timer parameters

   109    */

   110   

   111   // how long animation start is delayed, you want this at 0

   112   var timer = 0;

   113   // frame ttl

   114   var timestep = 12;

   115   // sanity check

   116   var frames = 0;

   117   

   118   // cache element so it can be changed from within setTimeout()

   119   var rand_seed = Math.floor(Math.random() * 1000000);

   120   fly_in_cache[rand_seed] = element;

   121   

   122   // set element left pos, you can comment this out to preserve left position

   123   element.style.left = left + 'px';

   124   element.style.top  = topi + 'px';

   125   

   126   if ( nofade )

   127   {

   128     domObjChangeOpac(100, element);

   129   }

   130   

   131   // total distance to be traveled

   132   dist = abs(top - topi);

   133   

   134   // animation loop

   135   

   136   while ( true )

   137   {

   138     // used for a sanity check

   139     frames++;

   140     

   141     // time until this frame should be executed

   142     timer += timestep;

   143     

   144     // math stuff

   145     // how far we are along in animation...

   146     diff = abs(top - topi);

   147     // ...in %

   148     ratio = abs( 1 - ( diff / dist ) );

   149     // decelerate if we're more than 2/3 of the way there

   150     if ( ratio < divider )

   151       inertiabase += inertiainc;

   152     else

   153       inertiabase -= ( inertiainc * decelerate );

   154     

   155     // if the deceleration factor is anywhere above 1 then technically that can cause an infinite loop

   156     // so leave this in there unless decelerate is set to 1

   157     if ( inertiabase < 1 )

   158       inertiabase = 1;

   159     

   160     // uncomment to disable inertia

   161     // inertiabase = 3;

   162     

   163     // figure out frame Y position

   164     topi = ( abs_dir == FI_UP ) ? topi - inertiabase : topi + inertiabase;

   165     if ( ( abs_dir == FI_DOWN && topi > top ) || ( abs_dir == FI_UP && top > topi ) )

   166       topi = top;

   167     

   168     // tell the browser to do it

   169     setTimeout('var o = fly_in_cache['+rand_seed+']; o.style.top=\''+topi+'px\';', timer);

   170     if ( !nofade )

   171     {

   172       // handle fade

   173       opac_factor = ratio * 100;

   174       if ( direction == FI_OUT )

   175         opac_factor = 100 - opac_factor;

   176       setTimeout('var o = fly_in_cache['+rand_seed+']; domObjChangeOpac('+opac_factor+', o);', timer);

   177     }

   178     

   179     // if we're done or if our sanity check failed then break out of the loop

   180     if ( ( abs_dir == FI_DOWN && topi >= top ) || ( abs_dir == FI_UP && top >= topi ) || frames > 1000 )

   181       break;

   182   }

   183   

   184   //timer += timestep;

   185   setTimeout('delete(fly_in_cache['+rand_seed+']);', timer);

   186   return timer;

   187 }

   188 

   189 function abs(i)

   190 {

   191   if ( isNaN(i) )

   192     return i;

   193   return ( i < 0 ) ? ( 0 - i ) : i;

   194 }

   195