<?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 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>div animate</title>

<?php 
include("includes/header.inc.php");
?>

<!--This meta element defines a description of my page:-->
<meta name="description" content="div animate" /> 

<!--This meta element defines searched keywords:-->
<meta name="keywords" content="div, animate, Jonas, Grolin" /> 

<style>
div.block { 
    position:relative; 
    background-color:#abc; 
    left:50px;
    width:90px; 
    height:90px;
    margin:5px; 
}
</style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>

</head>
<body>
<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");
?>
            <h3>Shows a div animate with a relative move. </h3>
            <h5>Click several times on the buttons to see the relative animations queued up.</h5>
        
            <button id="left">&laquo;</button> <button id="right">&raquo;</button>
            <div class="block"></div>
        
            <script>
                $("#right").click(function(){
                  $(".block").animate({"left": "+=500px"}, "slow");
                });
                
                $("#left").click(function(){
                  $(".block").animate({"left": "-=200px"}, "slow");
                });
            </script>
        </div>
        <br/>
        <br/>
        
<?php 
include("includes/footer.inc.php");
?>

    </div>
</div>
</body>
</html>