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

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/tab-nav.js" type="text/javascript"></script>

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

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';
        }
    }
}
<!--http://www.learningjquery.com/2009/09/tab-navigation-with-smooth-horizontal-sliding-using-jquery#-->
window.setInterval(MoveLayer, 30);
</script>

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

<a name=on-page-top></a>
<div id="wrapper">
    <div id="center-box">
                
        <div class="menu bubplastic horizontal aqua">
            <ul>
                <li><span class="menu_r">
                <a href="/mobile/index.php" target="_self">
                    <span class="menu_ar">Mobile</span>
                </a></span></li>
                
                <li><span class="menu_r">
                <a href="?showPHP" target="_self">
                    <span class="menu_ar">Source code</span>
                </a></span></li>
                
                <li><span class="menu_r">
                <a href="sitemap.html" target="_self">
                    <span class="menu_ar">Site map</span>
                </a></span></li>
                
                <li><span class="menu_r">
                <a href="jquery-tab-med-horisontal-glidende-navigation-dk.php" target="_self">
                    <span class="menu_ar"><img src="image/dk-icon.png" alt="Dansk flag"/> Dansk</span>
                </a></span></li>
        
                <li><span class="menu_r">
                <a href="jquery-tab-navigation-with-smooth-horizontal-sliding.php" target="_self">
                    <span class="menu_ar"><img src="image/eng-icon.png" alt="English flag"/> English</span>
                </a></span></li>
            </ul>
          <br class="clearit" />
        </div>

<?php 
include("includes/header_img.inc.php");
?>
        <div id="left-right-padding">
<?php 
include("includes/navigation.inc.php");
?>
            
            <h1>Tab Navigation with Smooth Horizontal Sliding Using jQuery</h1>
            <h2>When clicked, a tab slides to the left to reveal a group of links. 
            Click the tab again, and it slides back.</h2>
                        
    <noscript>
           <br/>
           <div id="browser-support">
              <a href="http://www.mozilla.com/en-US/firefox/fx/" title="Download Firefox" target="blank" rel="nofollow">
              <img src="image/browser-support/firefox.png" alt="Firefox supported" width="70" height="70" /></a>
              
              <a href="http://www.google.com/chrome" title="Download Google Chrome" target="blank" rel="nofollow">
              <img src="image/browser-support/google-chrome.png" alt="Google Chrome supported" width="70" height="70" /></a>
              
              <a href="http://www.opera.com/" title="Download Opera" target="blank" rel="nofollow">
              <img src="image/browser-support/opera.png" alt="Google Chrome supported" width="70" height="70" /></a>
    
              <a href="http://windows.microsoft.com/en-US/internet-explorer/downloads/ie-9/worldwide-languages" 
              title="Download Internet Explorer 9" target="blank" rel="nofollow">
              <img src="image/browser-support/ie9.png" alt="Internet Explorer 9 supported" width="70" height="70" /></a>
            </div>

            <p>This page is optimized for firefox and google Chrome.
            It will not work with old versions of Internet explorer.
            Internet explorer 6, 7 and 8 doesn't support Processing.js, 
            border-radius and 
            <a href="http://acupuncture-n-herbs.com/Browser_Redirect" style="color:#f00; 
            text-decoration:none;" rel="nofollow">many</a> other 
            things that should be visible on the Internet. 
            Internet explorer 9 is only available for vista and windows 7.</p>
    </noscript>

            <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/WildHorses.jpg" 
            alt="image of a Wild Horse" 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/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-4></a>
            <h3>On-page section 4.</h3>
            <p>&nbsp;</p>
            <img src="image/animated-music.gif" 
            alt="animated music" align="middle"/>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <a name=on-page-section-5></a>
            <h3>On-page section 5.</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-6></a>
            <h3>On-page section 6.</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-7></a>
            <h3>On-page section 7.</h3>
            <iframe width="560" height="315" src="http://www.youtube.com/embed/dVUd8_fFjPU" 
            frameborder="0" allowfullscreen></iframe>
             </div>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
<?php 
include("includes/footer.inc.php");
?>

                <div id="on-page-navigation" style='position:absolute;'>
                   <div class="container">
                    <div id="tab-nav-3" class="tab-nav">
                      <ul>
                        <li>
                          <a href="#">one</a>
                          <ul>
                            <li><a href="#on-page-top">page top</a></li>
                            <li><a href="#on-page-section-1">page section 1.</a></li>
                            <li><a href="#on-page-section-2">page section 2.</a></li>
                          </ul>
                        </li>
                        <li>
                          <a href="#">two</a>
                          <ul>
                            <li><a href="#on-page-section-3">page section 3.</a></li>
                            <li><a href="#on-page-section-4">page section 4.</a></li>
                            <li><a href="#on-page-section-5">page section 5.</a></li>
                            <li><a href="#on-page-section-6">page section 6.</a></li>
                          </ul>
                        </li>
                        <li>
                          <a href="#">three</a>
                          <ul>
                            <li><a href="#on-page-section-7">page section 7</a></li>
                            <li><a href="#on-page-top">page top</a></li>
                          </ul>
                        </li>
                      </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> 
</body>  
</html>