<?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" />

<script type="text/javascript">
//----------------------------------------------
// Floating Layer v 1.0 by Paul
// onlinesolution@devhouse.co.nz
//----------------------------------------------

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

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

function hover_div()
{
   // Specify your layer here - Float(DIV_NAME, X_POSITION_FROM_SCREEN, Y_POSITION_FROM_SCREEN);
   Float("expand-collapse-on-page-navigation",0,150);
}
</script>

</head>
<body>

<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>Expand/collapse Floating Layer with JavaScript </h1>
            <h2>Floats a menu on the screen so that it stays in place <br/>
            while a user scrolls or uses 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>On-page image 2.</h3>
            <img src="image/animated-gif/snow-scene-through-a-window.gif" 
            alt="image" align="middle"/>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <a name=on-page-section-3></a>
            <h3>On-page section 3.</h3>
            <img src="image/WildHorses.jpg" 
            alt="image of a Wild Horse" align="middle"/>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <a name=on-page-section-4></a>
            <h3>On-page section 4.</h3>
            <img src="image/animated-gif/arrow2.gif" 
            alt="image of animated arrow" align="middle"/>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <a name=on-page-section-5></a>
            <h3>On-page section 5.</h3>
            <p>&nbsp;</p>
            <img src="image/animated-music.gif" 
            alt="animated music" align="middle"/>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <a name=on-page-section-6></a>
            <h3>On-page section 6.</h3>
            <img src="image/animated-gif/038.gif" 
            alt="image of animated-gif" align="middle"/>
              <p>&nbsp;</p>
         </div>
         <br/>
         <br/>
     
<?php 
include("includes/footer.inc.php");
?>

<script type="text/javascript">
    function toggle(id) {
      var e = document.getElementById(id);
     
      if (e.style.display == '')
        e.style.display = 'none';
      else
        e.style.display = '';
    }
</script>

            <div id="expand-collapse-on-page-navigation" style='position:absolute;'>
                <a href="#" onclick="toggle('content')">Toggle</a>
                <div id="content">
                    <ul>
                        <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 section 2.</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>
                    </ul>
                </div>
            </div>
            
        </div>
    </div>
</div> 
<script type="text/javascript">
window.onload   = hover_div;
window.onscroll = hover_div;
window.onresize = hover_div;
</script>
</body>  
</html>