-I run a javascript file and jquery in a .php file. But anytime it runs I get the following error.
this is the javascript code : scroll.js
function setTableBody() {
$(".table-body").height(
$(".inner-container").height() - $(".table-header").height());
}
$(document).ready(function() {
var marginLeft = $(".outer-container").position().left; //Create var and calculate the difference from left
setTableBody();
$(window).resize(setTableBody);
$(".table-body").scroll(function() {
$(".table-header").offset({
left: marginLeft - this.scrollLeft //minus the difference while table header scroll with table body
});
});
});This is the code from the header php file
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="layout.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script language="javascript" type='text/javascript' src="jquery-1.11.3.min.js"></script>
<script language="javascript" type='text/javascript' src='scroll.js'></script>
</head>
<body>
<header>
<a href="/datacentre/admin/index.php" title="Return to the homepage" id="logo">
<img src="/datacentre/images/cagd_logo.jpg" alt="CAGD logo"
style="width:30px;height:30px;"/>
</a>
<span class="headerspan">CAGD Data Centre</span>
<a href="/datacentre/webhelp/index.htm" title="Return to the homepage" id="helpfile">
help
</a>
</header>
<div class="nav-div" id="nav-div">
<nav>
<ul id="nav-ul">
<li><a href="/datacentre/admin/index.php">Home</a></li>
<li><a href="/datacentre/admin/register.php">Booking</a></li>
<li><a href="">Activities <span class="caret"></span></a>
<div id=drop-down-div>
<ul>
<li><a href="/datacentre/admin/request_pending.php">Waiting Approval</a></li>
<li><a href="/datacentre/admin/approved_list.php">Approved</a></li>
<li><a href="/datacentre/admin/running_tasks.php">Work in process</a></li>
<li><a href="/datacentre/admin/completed_list.php">Completed</a></li>
</ul>
</div>
</li>
<li><a href="">Manage User<span class="caret"></span></a>
<div id=drop-down-div>
<ul>
<li><a href="/datacentre/admin/create_user.php">Create User</a></li>
<li><a href="/datacentre/admin/delete_user.php">Delete User</a></li>
</ul>
</div>
</li>
<li><a href="">Manage System<span class="caret"></span></a>
<div id=drop-down-div>
<ul>
<li><a href="/datacentre/admin/activity_type.php">Request Table</a></li>
<li><a href="/datacentre/admin/update_event.php">Update Event</a></li>
<li><a href="/datacentre/admin/delete_event.php">Delete Event</a></li>
</ul>
</div>
</li>
<li><a href="">Report<span class="caret"></span></a>
<div id=drop-down-div>
<ul>
<li><a href="/datacentre/admin/detail_report.php">Main</a></li>
<li><a href="">Sort By<span class="caret"></span></a>
<div id=drop-down-div>
<ul>
<li><a href="/datacentre/admin/report_sort_by_name.php">Name</a></li>
<li><a href="">Purpse</a></li>
</ul>
</div>
</ul>
</div>
</li>
<form id="search-form" method="post" action="search.php">
<input name="searcher" id="search-bar" type="text" placeholder="Type to Search">
<input id="search-button" type="submit" value="Find">
</form>
</ul>
</nav>
</div>This is the main php file
<?PHP
session_start();
if (!(isset($_SESSION['login_user']) && $_SESSION['login_user'] != '')) {
header ("Location: loginForm.php");
}
?>
<?php
include('/templates/header.php');
$host = "localhost"; // Host name
$username = "root"; // Mysql username
$password = ""; // Mysql password
$db_name = "datacentre"; // Database name
$tbl_name = "data_centre_users"; // Table name
$server_name = "localhost";
// Create connection
$con = new mysqli($server_name, $username, $password, $db_name, 3306);
if($con->connect_error){
die("Connection failed: ".$con->connect_error);
}
// Check connection
if($con->connect_error){
die("Connection failed: ".$conn->connect_error);
}
$sql = "SELECT * FROM $tbl_name ";
$result = $con->query($sql);
function myDate($x){
if ( !strtotime($x)) {
return "00-00-0000 00:00:00";
}
else{
return strftime('%Y-%m-%dT%H:%M:%S',
strtotime($x));
}
return "";
}
?>
<section id="content">
<div class="outer-container">
<div class="inner-container">
<div class="table-header">
<table id="headertable">
<thead>
<tr>
<th class="center"><strong>ID</strong></th>
<th class="center"><strong>FirstName</strong></th>
<th class="center"><strong>Lastname</strong></th>
<th class="center"><strong>Department</strong></th>
<th class="center"><strong>Unit</strong></th>
<th class="center"><strong>Request</strong></th>
<th class="center"><strong>Purpose</strong></th>
<th class="center"><strong>Description</strong></th>
<th class="center"><strong>Booking Time</strong></th>
<th class="center"><strong>Access Time</strong></th>
<th class="center"><strong>Exit Time</strong></th>
<th class="center"><strong>Status</strong></th>
<th class="center"><strong>Approved / Denied By</strong></th>
</tr>
</thead>
</table>
</div>
<div class="table-body">
<table id="bodytable">
<?php
if($result->num_rows > 0){
// output data of each row
while($rows = $result->fetch_assoc()){ ?>
<tbody>
<tr>
<td class="center"><?php echo $rows['id']; ?></td>
<td class="center"><?php echo $rows['first_name']; ?></td>
<td class="center"><?php echo $rows['last_name']; ?></td>
<td class="center"><?php echo $rows['department']; ?></td>
<td class="center"><?php echo $rows['unit']; ?></td>
<td class="center"><?php echo $rows['request']; ?></td>
<td class="center"><?php echo $rows['purpose']; ?></td>
<td class="center"><?php echo $rows['description']; ?></td>
<td class="center" >
<input name="booking_time" type="datetime-local" id="booking_time" value="<?php echo myDate($rows ['booking_time']); ?>" size="15">
</td>
<td class="center">
<input name="access_time" type="datetime-local" id="access_time" value="<?php echo myDate($rows ['access_time']); ?>" size="15">
</td>
<td class="center">
<input name="exit_time" type="datetime-local" id="exit_time" value="<?php echo myDate($rows['exit_time']);
?>" size="15" </td>
<td class="center"><?php echo $rows['status']; ?></td>
<td class="center"><?php echo $rows['approved_by']; ?></td>
</tr>
</tbody>
<?php
}
}
?>
</table>
</div>
</div>
</div>
</section>
<?php
$con->close();
function concantName($first , $second){
return $first." ".$second;
}
?>
</body>
</html>This is the CSS code
* {
padding: 0;
margin: 0;
}
body {
height: 100%;
width: 100%;
}
table {
border-collapse: collapse;
}
.outer-container {
background-color: #ccc;
position: absolute;
top: 10em;
left: 10em;
right: 200em;
bottom: 40em;
height:400px;
width:400px;
}
.inner-container {
height: 100%;
overflow: hidden;
position:relative;
}
.table-header {
position: relative;
}
.table-body {
overflow: auto;
}
.header-cell {
background-color: yellow;
text-align: left;
height: 40px;
}
.body-cell {
background-color: blue;
text-align: left;
}
.col1, .col3, .col4, .col5 {
width: 120px;
min-width: 120px;
}
.col2 {
min-width: 300px;
}Any suggestion for a solution
