<!doctype html>
<html>
<head>
<title>Animated Converter Dialog - RJM Programming - November, 2016 - Thanks to JavaScript and Ajax (seventh edition ... ISBN: 9780321564085) by Tom Negrino and Dori Smith (page 371-378)</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.25, maximum-scale=8, user-scalable=yes" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/container/assets/skins/sam/container.css" />
<!--link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/container/assets/skins/sam/container.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/button/assets/skins/sam/button.css" /-->
<link rel="stylesheet" type="text/css" href="ourcontainer.css" />
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/container/container-min.js"></script>
<!--script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/animation/animation.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/dragdrop/dragdrop.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/button/button.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/container/container.js"></script-->
<script type="text/javascript" src="ourcontainer_animated.js"></script>
</head>
<body class="yui-skin-sam">
<h1>YUI Container Animation</h1>
<h3>RJM Programming</h3>
<h3>November, 2016</h3>
<h4>Thanks to JavaScript and Ajax (seventh edition ... ISBN: 9780321564085) by Tom Negrino and Dori Smith (page 371-378)</h4>
<div id="ConverterWidget" style="width:100%; text-align:center;">
<div id="cheader" style="width:100%; text-align:center;">
<form action='./yui_animated_container.html' method='GET'>
Duration (seconds): <input onchange=" document.getElementById('neffect2').value=this.value; " type=number step=0.001 min=0.001 id='neffect' name='neffect' value='1.725'></input>
<input type='hidden' name='mode' id='mode' value='YAHOO.widget.ContainerEffect.FADE'></input>
<input type='hidden' name='neffect2' id='neffect2' value='1.725'></input>
<input type='hidden' name='mode2' id='mode2' value='YAHOO.widget.ContainerEffect.FADE'></input>
<input type='submit' id='submit' style='display:none' value='Show'></input>
</form>
<button id="show1">Show via <select id='selshow' onchange=" if (this.value == 'YAHOO.widget.ContainerEffect.FADE') { document.getElementById('show1').click(); } else if (this.value == '') { document.getElementById('mode').value='YAHOO.widget.ContainerEffect.FADE'; document.getElementById('mode2').value='YAHOO.widget.ContainerEffect.SLIDE'; } else { document.getElementById('mode').value=this.value; document.getElementById('mode2').value=this.value; } document.getElementById('submit').click();"><option value="YAHOO.widget.ContainerEffect.FADE">Fade In</option><option value="YAHOO.widget.ContainerEffect.SLIDE">Slide In</option><option value="">Fade and Slide In</option></select></button>
<button id="hide1">Hide via <select id='selhide' onchange=" if (this.value == 'YAHOO.widget.ContainerEffect.FADE') { document.getElementById('hide1').click(); } else if (this.value == '') { document.getElementById('mode').value='YAHOO.widget.ContainerEffect.FADE'; document.getElementById('mode2').value='YAHOO.widget.ContainerEffect.SLIDE'; } else { document.getElementById('mode').value=this.value; document.getElementById('mode2').value=this.value; } document.getElementById('submit').click();"><option value="YAHOO.widget.ContainerEffect.FADE">Fade Out</option><option value="YAHOO.widget.ContainerEffect.SLIDE">Slide Out</option><option value="">Fade and Slide Out</option></select></button>
<a href="#" id="cloadDialog" style='display:none;'>edit</a>
<span>Converter</span>
</div>
<span id="cbig" class="cbig">-40°F = -40°C</span><br>
</div>
<div id="cdlg">
<div class="hd"> Converter:</div>
<div class="bd">
<form name="cdlgForm" action="#" method="GET">
<br>
<select id="selfrom" name="selfrom">
<option value="">Please select measure from below ...</option>
<option value="°F">Fahrenheit</option>
<option value="°C">Celcius</option>
<option value=""></option>
<option value=" ft">Feet</option>
<option value=" m">Metres</option>
<option value=""></option>
<option value=" gallon">Gallons</option>
<option value=" liter">Liters</option>
<option value=""></option>
<option value=" degree">Degrees</option>
<option value=" radian">Radians</option>
<option value=""></option>
<option value=" stone">Stones</option>
<option value=" kg">Kilograms</option>
</select><br><br>
<select id="selto" name="selto">
<option value="">Please select measure to below ...</option>
<option value="°C">Celcius</option>
<option value="°F">Fahrenheit</option>
<option value=""></option>
<option value=" m">Metres</option>
<option value=" ft">Feet</option>
<option value=""></option>
<option value=" liter">Liters</option>
<option value=" gallon">Gallons</option>
<option value=""></option>
<option value=" radian">Radians</option>
<option value=" degree">Degrees</option>
<option value=""></option>
<option value=" kg">Kilograms</option>
<option value=" stone">Stones</option>
</select><br><br>
<input type="number" id="number" name="number" value="0.0"></input><br><br>
</form>
</div>
</div>
</body>
</html>