<?php
//enable visitors to see the PHP source code of current file
$me basename($_SERVER['PHP_SELF']);
if(isset(
$_GET['showPHP'])){
    
show_source("$me");    
    die();
}
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link href="assets/css.css" type="text/css" rel="stylesheet"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Floating Layer with JavaScript</title> 
<?php 
include("includes/header.inc.php");
?>

<!--This meta element defines a description of my page:-->
<meta name="description" content="Floats a menu on the screen so that it stays 
in place while a user scrolls or uses the On-page Navigation." /> 

<!--This meta element defines keywords for my page:-->
<meta name="keywords" content="javascript, floating, layer, animated" />


<!--This meta element identifies the document for search engines as being intended for EN="English" readers.-->
<meta http-equiv="Content-Language" content="en"/>

<style>

#calculator{
    width:192px;
    height:100px;
    }

</style>

</head>
<body onload="Init();">

<a name=on-page-top></a>
<div id="wrapper">
<?php 
include("includes/top-navigation.inc.php");
?>
    <div id="center-box">
<?php 
include("includes/header_img.inc.php");
?>
        <div id="left-right-padding">
<?php 
include("includes/navigation.inc.php");
?>
            
            <h1>Animated Floating Layer with JavaScript </h1>
            <h2>This JavaScript Floats a menu on the screen so that <br/>
            it follows to stay in view while a user scrolls or uses <br/>
            the On-page Navigation.</h2>
            
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <a name=on-page-section-1></a>
            <h3>On-page image 1.</h3>
            <img src="image/source-code.jpg" 
            alt="source code image" width="595" height="483" align="middle"/>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <a name=on-page-section-2></a>
            <h3>Calculator</h3>
            <div id="calculator">
            <form size="20" font size="16" name="Calc">
                <TABLE BORDER=4>
                    <TR>
                        <TD>
                            <INPUT TYPE="text"   NAME="Input" Size="24" >
                            <br />
                        </TD>
                    </TR>
                    <TR>
                        <TD >
                            <INPUT TYPE="button" NAME="one"   VALUE="  1  " OnClick="Calc.Input.value += '1'">
                            <INPUT TYPE="button" NAME="two"   VALUE="  2  " OnCLick="Calc.Input.value += '2'">
                            <INPUT TYPE="button" NAME="three" VALUE="  3  " OnClick="Calc.Input.value += '3'">
                            <INPUT TYPE="button" NAME="plus"  VALUE="  +  " OnClick="Calc.Input.value += ' + '">
                            <br />
                            <INPUT TYPE="button" NAME="four"  VALUE="  4  " OnClick="Calc.Input.value += '4'">
                            <INPUT TYPE="button" NAME="five"  VALUE="  5  " OnCLick="Calc.Input.value += '5'">
                            <INPUT TYPE="button" NAME="six"   VALUE="  6  " OnClick="Calc.Input.value += '6'">
                            <INPUT TYPE="button" NAME="minus" VALUE="  -  " OnClick="Calc.Input.value += ' - '">
                            <br />
                            <INPUT TYPE="button" NAME="seven" VALUE="  7  " OnClick="Calc.Input.value += '7'">
                            <INPUT TYPE="button" NAME="eight" VALUE="  8  " OnCLick="Calc.Input.value += '8'">
                            <INPUT TYPE="button" NAME="nine"  VALUE="  9  " OnClick="Calc.Input.value += '9'">
                            <INPUT TYPE="button" NAME="times" VALUE="  x  " OnClick="Calc.Input.value += ' * '">
                            <br />
                            <INPUT TYPE="button" NAME="clear" VALUE="  c  " OnClick="Calc.Input.value = ''">
                            <INPUT TYPE="button" NAME="zero"  VALUE="  0  " OnClick="Calc.Input.value += '0'">
                            <INPUT TYPE="button" NAME="DoIt"  VALUE="  =  " OnClick="Calc.Input.value = eval(Calc.Input.value)">
                            <INPUT TYPE="button" NAME="div"   VALUE="  /  " OnClick="Calc.Input.value += ' / '">
                            <br />
                        </TD>
                    </TR>
                </TABLE>
            </form>
            </div>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <a name=on-page-section-3></a>
            <h3>Length conversion calculator</h3>
            
            <TABLE cellSpacing=0 cellPadding=4 width=250 border=4>
            <p>Description: Take the headache out of figuring out how many inches 176 cm is, <br />
            or feet 30 inches is, with this extremely handy conversion script.</p>
                <form align="middle" name=cminch>
                    <TBODY>
                        <TR>
                          <TD>
                            <FONT face="Arial Narrow"><INPUT 
                            onblur=cmconvert() value=2.54 name=cm> </FONT><FONT face="Arial Narrow" 
                        size=-1>cm</FONT></TD>
                        </TR>
                        <TR>
                          <TD>
                            <FONT face="Arial Narrow"><INPUT 
                            onblur=feetconvert() value=0 name=feet> </FONT><FONT face=Arial 
                            size=-1>feet</FONT></TD>
                        </TR>
                        <TR>
                          <TD>
                            <FONT face="Arial Narrow"><INPUT 
                            onblur=inchconvert() value=1 name=inch> </FONT><FONT face=Arial 
                        size=-1>inch</FONT></TD>
                        </TR>
                        <TR>
                          <TD width="50%">
                              <p align="center"><input type="button" value="Submit" name="B3"></p>
                          </TD>
                        </TR>
                    </TBODY>
                </form>
            </TABLE>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <a name=on-page-section-4></a>
            <h3>BMI calculator </h3>
            <FORM NAME="BMI" method=POST>
                <TABLE border=1>
                    <TR>
                    <TD><DIV ALIGN=CENTER>Your Weight (kg)</DIV></TD>
                    <TD><DIV ALIGN=CENTER>Your Height (cm)</DIV></TD>
                    <TD><DIV ALIGN=CENTER>Your BMI</DIV></TD>
                    <TD><DIV ALIGN=CENTER>Comment</DIV></TD>
                    </TR>
                    
                    <TR>
                    <TD><INPUT TYPE=TEXT NAME=weight  SIZE=10 onFocus="this.form.weight.value=''"></TD>
                    <TD><INPUT TYPE=TEXT NAME=height  SIZE=10 onFocus="this.form.height.value=''"></TD>
                    <TD><INPUT TYPE=TEXT NAME=bmi     SIZE=8 ></TD>
                    <TD><INPUT TYPE=TEXT NAME=my_comment size=35></TD>
                </TABLE>
                
                <INPUT TYPE="button" VALUE="Let's see" onClick="computeform(this.form)">
                <INPUT TYPE="reset"  VALUE="Reset" onClick="ClearForm(this.form)">
            </FORM>
            
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <a name=on-page-section-5></a>
            <h3>Tempature Converter</h3>
            <!-- Tempature Converter -->
            <FORM>
                Fahrenheit:<INPUT TYPE="text" NAME="F" VALUE="" SIZE="6" MAXLENGTH="6" onChange="eval('C.value = ' + this.form.C_expr.value);eval('K.value = ' + this.form.K_expr.value)">
                <INPUT TYPE="hidden" NAME="F_expr" VALUE="(Math.round(((212-32)/100 * C.value + 32)*100))/100;">
                <INPUT TYPE="hidden" NAME="F_expr2" VALUE="(Math.round(((212-32)/100 *(K.value - 273) + 32)*100))/100; ">
                Celsius:<INPUT TYPE="text" NAME="C" VALUE="" SIZE="6" MAXLENGTH="6" onChange="eval('F.value = ' + this.form.F_expr.value);eval('K.value = ' + this.form.K_expr.value)">
                <INPUT TYPE="hidden" NAME="C_expr" VALUE="(Math.round((100/(212-32) * (F.value - 32))*100))/100"> <INPUT TYPE="hidden" NAME="C_expr2" VALUE="(Math.round(K.value - 273))">&nbsp;
                Kelvin:<INPUT TYPE="text" NAME="K" VALUE="" SIZE="6" MAXLENGTH="6" onChange="eval('F.value = ' + this.form.F_expr2.value);eval('C.value = ' + this.form.C_expr2.value)">
                <INPUT TYPE="hidden" NAME="K_expr" VALUE="(Math.round((100/(212-32) * (F.value - 32))*100))/100 + 273">&nbsp;
                <INPUT TYPE="button" NAME="Reset" VALUE="Submit">
                <INPUT TYPE="Reset" NAME="Reset" VALUE="Reset">
            </FORM>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <a name=on-page-section-6></a>
            <h3>On-page image 3.</h3>
            <img src="image/animated-gif/038.gif" 
            alt="image of animated-gif" align="middle"/>
              <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <a name=on-page-section-7></a>
            <h3>On-page image 4.</h3>
            <img src="image/WildHorses.jpg" 
            alt="image of a Wild Horse" align="middle"/>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <a name=on-page-section-8></a>
            <h3>On-page image 5.</h3>
            <img src="image/animated-gif/arrow2.gif" 
            alt="image of animated arrow" align="middle"/>
            <p>&nbsp;</p>
            <p>&nbsp;</p>

         </div>
         <br/>
         <br/>
     
<?php 
include("includes/footer.inc.php");
?>

            <div id="on-page-navigation" style='position:absolute;'>
              <ul>
                  <li>On-page Navigation</li>
                  <li><a href="#on-page-top">On-page top</a></li>
                  <li><a href="#on-page-section-1">On-page section 1.</a></li> 
                  <li><a href="#on-page-section-2">On-page calculator</a></li>
                  <li><a href="#on-page-section-3">On-page section 3.</a></li>
                  <li><a href="#on-page-section-4">On-page section 4.</a></li>
                  <li><a href="#on-page-section-5">On-page section 5.</a></li>
                  <li><a href="#on-page-section-6">On-page section 6.</a></li>
                  <li><a href="#on-page-section-7">On-page section 7.</a></li>
              </ul>
            </div>
            
        </div>
    </div>
</div> 
</body>  

<script type="text/javascript">
var FloatLayerName = 'on-page-navigation';
var StartingXPos = 10;
var StartingYPos = -150;
var DestXPos = 10;
var DestYPos = 250;

function Float(div_name,xPos,yPos)
{
    var elem = document.getElementById(div_name);

    elem.style.right = xPos+"px";
    elem.style.top = document.documentElement.scrollTop+yPos+"px";
}

function Init()
{
   // Specify your layer here - Float(DIV_NAME, X_POSITION_FROM_SCREEN, Y_POSITION_FROM_SCREEN);

   Float(FloatLayerName,StartingXPos,StartingYPos);
}

function MoveLayer()
{
    var elem = document.getElementById(FloatLayerName);

    if(elem)
    {
        var top = parseInt(elem.style.top.substring(0,elem.style.top.indexOf('px')));
        var diff = null;
       
        if( document.body.scrollTop > 0 )
        {
            diff = (document.body.scrollTop + DestYPos);
        }
        else if( document.documentElement.scrollTop > 0 )
        {
            diff = (document.documentElement.scrollTop + DestYPos);
        }
        else
        {
            diff = DestYPos;
        }

        diff = diff - top;

        if(diff > 0)
        {
            elem.style.top = (top + Math.abs(Math.ceil(diff / 5))) + 'px';
        }
        else if(diff < 0)
        {
            elem.style.top = (top - Math.abs(Math.ceil(diff / 5))) + 'px';
        }
    }
}
window.setInterval(MoveLayer, 30);
</script>

<SCRIPT language=JavaScript>

/*
cm/inch/feet converter
*/

function roundit(which){
    return Math.round(which*100)/100
    }
    
    function cmconvert(){
        with (document.cminch){
        feet.value = roundit(cm.value/30.84);
        inch.value = roundit(cm.value/2.54);
        }
    }
    
    function inchconvert(){
        with (document.cminch){
        cm.value = roundit(inch.value*2.54);
        feet.value=roundit(inch.value/12);
        }
    }
    
    function feetconvert(){
    with (document.cminch){
    cm.value=roundit(feet.value*30.48);
    inch.value=roundit(feet.value*12);
    }
}

</SCRIPT>

<SCRIPT LANGUAGE="JAVASCRIPT">
<!-- hide this script tag's contents from old browsers

function ClearForm(form){

    form.weight.value = "";
    form.height.value = "";
    form.bmi.value = "";
    form.my_comment.value = "";

}

function bmi(weight, height) {

          bmindx=weight/eval(height*height);
          return bmindx;
}

function checkform(form) {

       if (form.weight.value==null||form.weight.value.length==0 || form.height.value==null||form.height.value.length==0){
            alert("\nPlease complete the form first");
            return false;
       }

       else if (parseFloat(form.height.value) <= 0||
                parseFloat(form.height.value) >=500||
                parseFloat(form.weight.value) <= 0||
                parseFloat(form.weight.value) >=500){
                alert("\nReally know what you're doing? \nPlease enter values again. \nWeight in kilos and \nheight in cm");
                ClearForm(form);
                return false;
       }
       return true;

}

function computeform(form) {

       if (checkform(form)) {

       yourbmi=Math.round(bmi(form.weight.value, form.height.value/100));
       form.bmi.value=yourbmi;

       if (yourbmi >40) {
          form.my_comment.value="You are grossly obese, consult your physician!";
       }

       else if (yourbmi >30 && yourbmi <=40) {
          form.my_comment.value="Umm... You are obese, want some liposuction?";
       }

       else if (yourbmi >27 && yourbmi <=30) {
          form.my_comment.value="You are very fat, do something before it's too late";
       }

       else if (yourbmi >22 && yourbmi <=27) {
          form.my_comment.value="You are fat, need dieting and exercise";
       }

       else if (yourbmi >=21 && yourbmi <=22) {
          form.my_comment.value="I envy you. Keep it up!!";
       }

       else if (yourbmi >=18 && yourbmi <21) {
          form.my_comment.value="You are thin, eat more.";
       }

       else if (yourbmi >=16 && yourbmi <18) {
          form.my_comment.value="You are starving. Go Find some food!";
       }

       else if (yourbmi <16) {
          form.my_comment.value="You're grossly undernourished, need hospitalization ";
       }

       }
       return;
}
 // -- done hiding from old browsers -->
</SCRIPT>

</html>