1
0
Fork 0
feedizer-php/htdocs/libraries/formsgeneration/test_animation_page.html
2015-11-13 23:51:46 +01:00

34 lines
2.2 KiB
HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test for Manuel Lemos's PHP form class using the animation plug-in</title>
<script type="text/javascript" src="animation.js"></script>
</head>
<body bgcolor="#cccccc">
<center><h1>Test for Manuel Lemos's PHP form class using the animation plug-in</h1></center>
<hr />
<form method="post" action="" name="animation_form">
<div style="text-align: center">Click to <input type="button" value="fade out" onclick="var a=new ML.Animation.Animate(); a.addAnimation({ name: 'Hide form', debug: 1, effects: [ { type: 'CancelAnimation', animation: 'Show form' }, { type: 'ReplaceContent', element: 'feedback', content: 'Hiding...' }, { type: 'FadeOut', element: 'wholeform', duration: 0.5 }, { type: 'ReplaceContent', element: 'feedback', content: 'The form is hidden!' } ] }); ; return true" id="hide" /> or <input type="button" value="fade in" onclick="var a=new ML.Animation.Animate(); a.addAnimation({ name: 'Show form', debug: 1, effects: [ { type: 'CancelAnimation', animation: 'Hide form' }, { type: 'ReplaceContent', element: 'feedback', content: 'Showing...' }, { type: 'FadeIn', element: 'wholeform', duration: 0.5 }, { type: 'ReplaceContent', element: 'feedback', content: 'The form is visible!' } ] }); ; return true" id="show" /> the form.</div>
<br />
<center><table style="width: 24em">
<tr>
<td style="font-weight: bold; width: 1%">Feedback:</td>
<td id="feedback" style="border-width: 1px; border-style: solid; border-top-color: #868686; border-right-color: #F9F9F9; border-bottom-color: #F9F9F9; border-left-color: #868686; padding: 3px">Click in the show or hide buttons</td>
</table></center>
<br />
<center><table id="wholeform" style="border-width: 1px; border-style: solid; background-color: #c0c0c0; border-top-color: #F9F9F9; border-right-color: #868686; border-bottom-color: #868686; border-left-color: #F9F9F9; padding: 0px;">
<tr>
<td style="background-color: #000080; padding: 2px; color: #ffffff; font-weight: bold">Form class animation test</td>
</tr>
<tr>
<td><fieldset>
<legend style="font-weight: bold">Example form would show here</legend>
<div style="text-align: center; padding: 2px">Some fields would go here.</div>
</fieldset></td>
</tr>
</table></center>
</form>
<hr />
</body>
</html>