author | Dan |
Thu, 05 Jul 2007 10:37:36 -0400 | |
changeset 42 | 45ebe475ff75 |
parent 39 | c83ff194977a |
child 74 | 68469a95658d |
permissions | -rw-r--r-- |
1 | 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 |
||
39
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
14 |
/** |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
15 |
* You can thank Robert Penner for the math used here. Ported from an ActionScript class. |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
16 |
* License: Modified BSD license <http://www.robertpenner.com/easing_terms_of_use.html> |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
17 |
*/ |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
18 |
|
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
19 |
// Effects code - don't bother changing these formulas |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
20 |
var Back = { |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
21 |
easeOut: function(t, b, c, d, s) |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
22 |
{ |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
23 |
if (s == undefined) s = 1.70158; |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
24 |
return c * ( ( t=t/d-1 ) * t * ( ( s + 1 ) * t + s) + 1) + b; |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
25 |
}, |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
26 |
easeIn: function (t, b, c, d, s) |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
27 |
{ |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
28 |
if (s == undefined) s = 1.70158; |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
29 |
return c * ( t/=d ) * t * ( ( s + 1 ) * t - s) + b; |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
30 |
}, |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
31 |
easeInOut: function (t, b, c, d, s) |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
32 |
{ |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
33 |
if (s == undefined) s = 1.70158; |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
34 |
if ((t /= d/2) < 1) |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
35 |
{ |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
36 |
return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
37 |
} |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
38 |
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
39 |
} |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
40 |
} |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
41 |
|
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
42 |
// This should be set to the class name of the effect you want. |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
43 |
var GlideEffect = Back; |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
44 |
|
1 | 45 |
// Placeholder functions, to make organization a little easier :-) |
46 |
||
47 |
function fly_in_top(element, nofade, height_taken_care_of) |
|
48 |
{ |
|
49 |
return fly_core(element, nofade, FI_TOP, FI_IN, height_taken_care_of); |
|
50 |
} |
|
51 |
||
52 |
function fly_in_bottom(element, nofade, height_taken_care_of) |
|
53 |
{ |
|
54 |
return fly_core(element, nofade, FI_BOTTOM, FI_IN, height_taken_care_of); |
|
55 |
} |
|
56 |
||
57 |
function fly_out_top(element, nofade, height_taken_care_of) |
|
58 |
{ |
|
59 |
return fly_core(element, nofade, FI_TOP, FI_OUT, height_taken_care_of); |
|
60 |
} |
|
61 |
||
62 |
function fly_out_bottom(element, nofade, height_taken_care_of) |
|
63 |
{ |
|
64 |
return fly_core(element, nofade, FI_BOTTOM, FI_OUT, height_taken_care_of); |
|
65 |
} |
|
66 |
||
67 |
function fly_core(element, nofade, origin, direction, height_taken_care_of) |
|
68 |
{ |
|
69 |
if ( !element || typeof(element) != 'object' ) |
|
70 |
return false; |
|
71 |
// target dimensions |
|
72 |
var top, left; |
|
73 |
// initial dimensions |
|
74 |
var topi, lefti; |
|
75 |
// current dimensions |
|
76 |
var topc, leftc; |
|
77 |
// screen dimensions |
|
78 |
var w = getWidth(); |
|
79 |
var h = getHeight(); |
|
80 |
var y = parseInt ( getScrollOffset() ); |
|
81 |
// temp vars |
|
82 |
var dim, off, diff, dist, ratio, opac_factor; |
|
83 |
// setup element |
|
84 |
element.style.position = 'absolute'; |
|
85 |
||
86 |
dim = [ $(element).Height(), $(element).Width() ]; |
|
87 |
off = [ $(element).Top(), $(element).Left() ]; |
|
88 |
||
89 |
if ( height_taken_care_of ) |
|
90 |
{ |
|
91 |
top = off[0]; |
|
92 |
left = off[1]; |
|
93 |
} |
|
94 |
else |
|
95 |
{ |
|
96 |
top = Math.round(( h / 2 ) - ( dim[0] / 2 )) + y; // - ( h / 4 )); |
|
97 |
left = Math.round(( w / 2 ) - ( dim[1] / 2 )); |
|
98 |
} |
|
99 |
||
100 |
// you can change this around to get it to fly in from corners or be on the left/right side |
|
101 |
lefti = left; |
|
102 |
||
103 |
// calculate first frame Y position |
|
104 |
if ( origin == FI_TOP && direction == FI_IN ) |
|
105 |
{ |
|
106 |
topi = 0 - dim[0] + y; |
|
107 |
} |
|
108 |
else if ( origin == FI_TOP && direction == FI_OUT ) |
|
109 |
{ |
|
110 |
topi = top; |
|
111 |
top = 0 - dim[0] + y; |
|
112 |
} |
|
113 |
else if ( origin == FI_BOTTOM && direction == FI_IN ) |
|
114 |
{ |
|
115 |
topi = h + y; |
|
116 |
} |
|
117 |
else if ( origin == FI_BOTTOM && direction == FI_OUT ) |
|
118 |
{ |
|
119 |
topi = top; |
|
120 |
top = h + y; |
|
121 |
} |
|
122 |
||
123 |
var abs_dir = ( ( origin == FI_TOP && direction == FI_IN ) || ( origin == FI_BOTTOM && direction == FI_OUT ) ) ? FI_DOWN : FI_UP; |
|
124 |
||
39
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
125 |
var diff_top = top - topi; |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
126 |
var diff_left = left - lefti; |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
127 |
|
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
128 |
var frames = 100; |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
129 |
var timeout = 0; |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
130 |
var timerstep = 8; |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
131 |
|
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
132 |
// cache element so it can be changed from within setTimeout() |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
133 |
var rand_seed = Math.floor(Math.random() * 1000000); |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
134 |
fly_in_cache[rand_seed] = element; |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
135 |
|
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
136 |
for ( var i = 0; i < frames; i++ ) |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
137 |
{ |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
138 |
topc = GlideEffect.easeInOut(i, topi, diff_top, frames); |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
139 |
leftc = GlideEffect.easeInOut(i, lefti, diff_left, frames); |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
140 |
setTimeout('var o = fly_in_cache['+rand_seed+']; o.style.top=\''+topc+'px\'; o.style.left=\''+leftc+'px\';', timeout); |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
141 |
timeout += timerstep; |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
142 |
|
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
143 |
var ratio = i / frames; |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
144 |
|
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
145 |
if ( !nofade ) |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
146 |
{ |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
147 |
// handle fade |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
148 |
var opac_factor = ratio * 100; |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
149 |
if ( direction == FI_OUT ) |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
150 |
opac_factor = 100 - opac_factor; |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
151 |
setTimeout('var o = fly_in_cache['+rand_seed+']; domObjChangeOpac('+opac_factor+', o);', timeout); |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
152 |
} |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
153 |
|
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
154 |
} |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
155 |
|
1 | 156 |
/* |
157 |
* Framestepper parameters |
|
39
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
158 |
* / |
1 | 159 |
|
160 |
// starting value for inertia |
|
161 |
var inertiabase = 1; |
|
162 |
// increment for inertia, or 0 to disable inertia effects |
|
163 |
var inertiainc = 1; |
|
164 |
// when the progress reaches this %, deceleration is activated |
|
165 |
var divider = 0.666667; |
|
166 |
// multiplier for deceleration, setting this above 2 can cause some weird slowdown effects |
|
167 |
var decelerate = 2; // 1 / divider; // reciprocal of the divider |
|
168 |
||
169 |
/* |
|
170 |
* Timer parameters |
|
39
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
171 |
* / |
1 | 172 |
|
173 |
// how long animation start is delayed, you want this at 0 |
|
174 |
var timer = 0; |
|
175 |
// frame ttl |
|
176 |
var timestep = 12; |
|
177 |
// sanity check |
|
178 |
var frames = 0; |
|
179 |
||
180 |
// cache element so it can be changed from within setTimeout() |
|
181 |
var rand_seed = Math.floor(Math.random() * 1000000); |
|
182 |
fly_in_cache[rand_seed] = element; |
|
183 |
||
184 |
// set element left pos, you can comment this out to preserve left position |
|
185 |
element.style.left = left + 'px'; |
|
186 |
||
187 |
// total distance to be traveled |
|
188 |
dist = abs(top - topi); |
|
189 |
||
190 |
// animation loop |
|
191 |
||
192 |
while ( true ) |
|
193 |
{ |
|
194 |
// used for a sanity check |
|
195 |
frames++; |
|
196 |
||
197 |
// time until this frame should be executed |
|
198 |
timer += timestep; |
|
199 |
||
200 |
// math stuff |
|
201 |
// how far we are along in animation... |
|
202 |
diff = abs(top - topi); |
|
203 |
// ...in % |
|
204 |
ratio = abs( 1 - ( diff / dist ) ); |
|
205 |
// decelerate if we're more than 2/3 of the way there |
|
206 |
if ( ratio < divider ) |
|
207 |
inertiabase += inertiainc; |
|
208 |
else |
|
209 |
inertiabase -= ( inertiainc * decelerate ); |
|
210 |
||
211 |
// if the deceleration factor is anywhere above 1 then technically that can cause an infinite loop |
|
212 |
// so leave this in there unless decelerate is set to 1 |
|
213 |
if ( inertiabase < 1 ) |
|
214 |
inertiabase = 1; |
|
215 |
||
216 |
// uncomment to disable inertia |
|
217 |
// inertiabase = 3; |
|
218 |
||
219 |
// figure out frame Y position |
|
220 |
topi = ( abs_dir == FI_UP ) ? topi - inertiabase : topi + inertiabase; |
|
221 |
if ( ( abs_dir == FI_DOWN && topi > top ) || ( abs_dir == FI_UP && top > topi ) ) |
|
222 |
topi = top; |
|
223 |
||
224 |
// tell the browser to do it |
|
225 |
setTimeout('var o = fly_in_cache['+rand_seed+']; o.style.top=\''+topi+'px\';', timer); |
|
226 |
if ( !nofade ) |
|
227 |
{ |
|
228 |
// handle fade |
|
229 |
opac_factor = ratio * 100; |
|
230 |
if ( direction == FI_OUT ) |
|
231 |
opac_factor = 100 - opac_factor; |
|
232 |
setTimeout('var o = fly_in_cache['+rand_seed+']; domObjChangeOpac('+opac_factor+', o);', timer); |
|
233 |
} |
|
234 |
||
235 |
// if we're done or if our sanity check failed then break out of the loop |
|
236 |
if ( ( abs_dir == FI_DOWN && topi >= top ) || ( abs_dir == FI_UP && top >= topi ) || frames > 1000 ) |
|
237 |
break; |
|
238 |
} |
|
239 |
||
39
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
240 |
timer += timestep; |
1 | 241 |
setTimeout('delete(fly_in_cache['+rand_seed+']);', timer); |
242 |
return timer; |
|
39
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
243 |
*/ |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
244 |
timeout += timerstep; |
c83ff194977a
Changed animation on flying message boxes; bugfix for "Array" response in theme changer; added diff CSS to enano-shared; allowed spaces in username during install
Dan
parents:
1
diff
changeset
|
245 |
return timeout; |
1 | 246 |
} |
247 |
||
248 |
function abs(i) |
|
249 |
{ |
|
250 |
if ( isNaN(i) ) |
|
251 |
return i; |
|
252 |
return ( i < 0 ) ? ( 0 - i ) : i; |
|
253 |
} |
|
254 |