I've created a "calender"-like table that updates its content via a list located in a .PHP file. It works fine, but I'd like to be able to style it better. I would like to have the text which is currently appearing in "contentContainer" under the table, appear in the cell it belongs to. As of now, if I move the div into $calender, it loads only in the first cell.
I'd also like for the row to break at 7 columns.
<script type="text/javascript">
var request;
showEvents = function(caller){
request = new XMLHttpRequest();
request.open("GET", "getevents.php?id="+caller.id, true);
request.onreadystatechange = updatePage(caller.id);
request.send(null);
};
function updatePage(elemId){
if(request.readyState == 4){
var data = request.responseText;
document.getElementById(elemId).innerHTML="<span>"+data+"</span>"
}
}
</script>
<style>
table {
width: 700px;
}
td {
border: 1px solid;
min-width: 100px;
height: 100px;
vertical-align: text-top;
text-align: right;
box-sizing:border-box;
padding: 5px;
}
</style>
</head><body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<th colspan="31" scope="col">Calender</th>
</tr>
<tr>
<?php
$calendar="";
for($i=1;$i<=31;$i++){
$calendar .= "<td id='".$i."' onclick='showEvents(this)'><a href='#' id='".$i."'>".$i."</a> </td>";
if (($i % 7) == 0) $calendar .= '</tr><tr>';
}
echo $calendar;
?>
</tr>
</table>
<div id="contentContainer"></div>
</body>
</html>
To get the 7 days across you're looking for, I would put this in the for loop:
if (($i % 7) == 0) $calendar .= '</tr><tr>';
As for where your events pop up in the table, make sure you pass the cell's id from showEvents to updatePage:
request.onreadystatechange = updatePage(caller.id);
…
function updatePage(elemId){
…
document.getElementById(elemId).innerHTML="<span>"+data+"</span>"
That should get you there. And to make this even more complete, I would make use of the PHP date/time functions to properly set each date in its correct place on the calendar.
Update:
I've worked on it a bit and here's what I've got. For some reason, unbeknownst to me, javascript doesn't like the two functions to be separated. That's fixed, and I've also added a day of week spacer. Here's the result:
<script type="text/javascript">
var showEvents = function(caller){
request = new XMLHttpRequest();
request.open("GET", "getevents.php?id="+caller.id, true);
request.onreadystatechange = function () {
if(request.readyState == 4){
var data = request.responseText;
document.getElementById(caller.id).innerHTML="<span>"+data+"</span>"
}
}
request.send();
};
</script>
<style>
table {
width: 700px;
border-collapse: collapse;
}
td {
border: 1px solid;
min-width: 100px;
height: 100px;
vertical-align: text-top;
text-align: right;
box-sizing:border-box;
padding: 5px;
}
</style>
</head><body>
<table>
<tr>
<th colspan="7">Calendar</th>
</tr>
<tr>
<?php
$calendar="";
$n = 0;
$month = strtotime("2012-10-01"); // Always the first of the month
$start = date('N', $month);
$days = date('t',$month);
for($i=1;$i<=$days;$i++){
$n++;
if ($n <= $start) { // '<=': week starts on Sunday; '<': week starts on Monday
$calendar .= "<td> </td>";
$i--;
} else {
$calendar .= "<td id='{$i}' onclick='showEvents(this); return false;'><a href='#' id='{$i}'>{$i}</a></td>";
}
if (($n % 7) == 0) $calendar .= '</tr><tr>';
}
echo $calendar;
?>
</tr>
</table>
<div id="contentContainer"></div>
</body>
</html>
Related
I'm trying to show total price in a table.
I have 2 arrays where one is the names of the cars and second is the prices of each one.
I've managed do display the prices and the names inside the table,
but the thing is that i have a "checkbox" thing that shows if car is sold or not...
I'm trying to make the total calculation that calculate the total price of all checked checkboxes.
That means - when checkbox is on, the variable of total price should add that car's price to it.
here is how it should looks like:
I must mention that I've just started to learn php at collage,
here's the array and the variable:
<?php
$cars = array ("ford","fiat","renault","mazda");
$prices = array(100,80,90,120);
$sold = '<input type="checkbox" name="sold">';
?>
I added up basic style for my table (in the same php file)
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: center;
padding: 8px;``
}
</style>
and the php code for the table:
<?php
$cars = array ("ford","fiat","renault","mazda");
$prices = array(100,80,90,120);
$sold = '<input type="checkbox" name="sold">';
?>
<h1>list of cars</h1>
<table>
<th>name</th>
<th>price</th>
<th>sold</th>
<?php
for($i=0;$i<count($cars);$i++){
echo
"<tr>
<td>$cars[$i]</td>.
<td>$prices[$i]$</td>.
<td>$sold</td>.
</tr>";
}
?>
</table>
How can I calculate the amount of all checked checkboxes prices?
imvain2’s answer would be your best choice as it does not require a client-server roundtrip.
However, if you would like to do this in php, you need to associate the checkbox with the car in some way.
One way would be to tweak your for loop like so
for($i = 0; $i < count($cars); $i++) {
echo (
"<tr>
<td>{$cars[$i]}</td>
<td>{$prices[$i]}$</td>
<td><input type=\"checkbox\" name=\"sold[]\" value=\"{$prices[$i]}\"></td>
</tr>"
);
}
So when the form containing the table is submitted to the server you can do the calculation like
$total = 0;
foreach ($_POST['sold'] as $value) {
$total += (int)$value;
}
I would modify the checkbox to include the price as a data-attribute and put it within the for loop not outside of it.
$sold = '<input type="checkbox" data-price="$prices[$i]" name="sold">';
then in javascript just loop through the checkboxes and an event listener that checks for checked.
function showTotal(els) {
total = 0;
els.forEach(function(el) {
if (el.checked) {
total += +el.getAttribute("data-price");
}
});
document.querySelector("#total").innerHTML = "$" + total.toFixed(2)
}
sold = document.querySelectorAll("[name='sold']");
sold.forEach(function(el) {
el.addEventListener("change", function(ev) {
showTotal(sold)
});
});
to show the total you will need a div to hold the total
<div id="total"></div>
**Note: please fix my english if needed.
please notice that the hole code is written in single php file.
after quit a bit of time, i was mange to fix my code.
first, as suggest here before, the JS code that was given was written in jquery, i haven't learned that part of js yet, therefor i wrote the code with the help of my friend in js using dom.
CSS:
<style>
body {
text-align:center;}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 50%;
margin-left: auto;
margin-right: auto;
margin-top:15%;
}
th{
}
td, th {
border: 1px solid #dddddd;
text-align: center;
padding: 8px;
}
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
</style>
JS: (the location of the script tag doesn't matter at this point, but iv'e located it at the top of the php file inside header content.
<script>
function calcTotal() {
let sum = 0;
for (let index = 0; index < 4; index++) {
let priceAsStr = document.getElementById("price" + index).innerHTML;
let price = parseInt(priceAsStr);
let soldOrNot = document.getElementById("soldOrNot" + index).checked;
if (soldOrNot == true)
{
sum = sum + price;
}
}
document.getElementById("sum").innerHTML ="$" + sum;
}
and finally, for the body:
<?php
$cars = array("Ford","Fiat","Renault","Mazda");
$prices = array(100,80,137,453);
?>
<table>
<tr>
<th>Cars</th>
<th>Price</th>
<th>Sold</th>
</tr>
<?php
$sum = 0;
for ($i=0; $i < 4; $i++) {
echo "<tr id='row$i'>
<td>{$cars[$i]}</td>
<td id='price{$i}'> {$prices[$i]}$</td>
<td><input type='checkbox' id='soldOrNot{$i}' name='sold{$i}' onClick='calcTotal()' value=''> </td>
</tr>";
}
?>
</table>
<h1>Total Price: <span id="sum">0</span></h1>
I have a question regarding hiding empty rows in my table.
I want to hide an entire row in the case a field says N/A which means the field is empty.
Example:
In the event that the field is empty or N/A, I want to hide the entire row. I will also welcome javascript solutions.
<tbody style="
white-space: nowrap;
">
<?php
foreach($student_subject_list AS $SSL)
{
$subject_name = $SSL["name"];
if(in_array($subject_name, array_keys($result)))
{
$total_score = 0;
$avg = count($result[$subject_name]);
$test_results = "";
$i = 1;
foreach($result[$subject_name] AS $SN)
{
if($i == 1)
{
$ie = "1<sup>st</sup>";
}
elseif($i == 2)
{
$ie = "<br>2<sup>nd</sup>";
}
elseif($i == 3)
{
$ie = "<br>3<sup>rd</sup>";
}
else
{
$ie = "<br>4<sup>th</sup>";
}
$test_results .= "$ie Test: $SN ";
$total_score += $SN;
$avg_score = $total_score/$avg;
$i++;
}
}
else
{
$total_score = $test_results = "N/A";
}
?>
<tr>
<td style="border: 1px solid black; font-size:11px;width:120px;white-space: nowrap;height:30px;"><?=$subject_name?></td>
<td style="border: 1px solid black; font-size:11px;width:120px;text-align:center;"><?=$test_results?></td>
<td style="border: 1px solid black; font-size:11px;width:120px;text-align:center;"><?=$avg_score?></td>
<td style="border: 1px solid black; font-size:11px;width:120px;text-align:center;"><?=$remark?></td>
</tr>
<?php
}
?>
</tbody>
Could you make the html where you create the row conditional on $test_results NOT being equal to "N/A"? Something like this:
<?php if(!$test_results === "N/A"){ ?>
<tr>
<td> etc etc
<td> etc etc
<td> etc etc
<td> etc etc
</tr>
<?php } ?>
I am trying to get the result from "headline" and "content" to show up one at a time and then fade in and out to the next result in a loop. Currently, it shows all the results at once and the fades in and out and then show all the results again. Any idea on how to get them to show one at a time TIA
<html>
<head>
<style>
#table1{/*table aspects and design */
border:1px solid #FFFFFF;
background:#FFFFFF;
display:none;
width: 60%;
margin-left: auto;
margin-right: auto;
}
th{/*align table headers*/
text-align:center;
}
td,th{
border:1px solid #FFFFFF;
text-align:center;
}
</style>
</head>
<table id="table1" cellpadding="5" cellspacing="1" width="50%">
<? if ($query=$pdo->prepare("SELECT * FROM `Announcements_Current`"))
{
/* select all information from the table and take it into the page */
$query->execute();
while ($result = $query->fetch(PDO::FETCH_ASSOC)){
$head = $result['headline'];/*puts result of headline from table into variable*/
$content = $result['content'];
/*puts result of content from table into variable*/
echo /* echo the table to display announcements*/'
<tr>
<th>
<h1>
'.$head.'
</h1>
</th>
</tr>
<tr>
<td>
<font size="4">
'.$content.'
</font>
</td>
</tr>';
}
}
?>
</table> <!--end of table-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
/* define script for jquery*/
for (var i = 0; i < 500; i++) {/* for loop to fade in and out the announcements*/
$(document).ready(function() {/*function to fade table in and out*/
$('#table1').fadeIn(2000);
$('#table1').delay(5000);
$('#table1').fadeOut(2000);
}
)};
</script>
You need to use a timer in your Javascript to show each row separately.
$(document).ready(function() {
var cur_row = 0;
setInterval(function() {
$("#table1 tr").fadeOut(2000).eq(cur_row).fadeIn(2000);
cur_row = (cur_row + 1) % $("table1 tr").length;
}, 5000);
});
ive been stuck with this for almost a week,
ive been trying to add multiple rows to a section of my form without reloading the page,
i cloned the fields and put them in an array but the problem is the dates, it can't be placed in an array ... can anybody help me out, it would be much appreciated ... thanks.
here is my code:
index.php
<DIV id="mainContent_pnlEmploymentHistory">
<form id="form1" name="form1" method="post" action="value.php">
<TABLE id="dataTable">
<TBODY>
<TR>
<TD style="width: 310px; height: 20px; text-align: center;">Name of Employer</TD>
<TD style="width: 430px; height: 20px; text-align: center;"> Employer Address</TD>
<TD style="width: 150px; height: 20px; text-align: center;">FROM</TD>
<TD style="width: 150px; height: 20px; text-align: center;">TO</TD></TR>
<TR class="row_to_clone_fw_emp">
<TD style="width: 310px; height: 20px; text-align: center;"><label>
<input type="text" id="fwemployer" name="fwemployer[]" style="width:300px"/>
</label></TD>
<TD style="width: 430px; height: 20px; text-align: center;">
<input type="text" id="fwempaddress" name="fwempaddress[]" style="width:100%"/></TD>
<TD style="width: 150px; height: 20px; text-align: center;">
<?php
include('calendar/classes/tc_calendar.php');
$date3_default = "2013-10-14";
$date4_default = "2013-10-20";
$myCalendar = new tc_calendar("datefrom", true, false);
$myCalendar->setIcon("calendar/images/iconCalendar.gif");
$myCalendar->setDate(date('d', strtotime($date3_default))
, date('m', strtotime($date3_default))
, date('Y', strtotime($date3_default)));
$myCalendar->setPath("calendar/");
$myCalendar->setYearInterval(1970, 2020);
$myCalendar->setAlignment('left', 'bottom');
$myCalendar->setDatePair('datefrom', 'dateto', $date4_default);
$myCalendar->writeScript();
?>
</TD>
<TD style="width: 150px; height: 20px; text-align: center;">
<?php
$date3_default = "2013-10-14";
$date4_default = "2013-10-20";
$myCalendar = new tc_calendar("dateto", true, false);
$myCalendar->setIcon("calendar/images/iconCalendar.gif");
$myCalendar->setDate(date('d', strtotime($date4_default))
, date('m', strtotime($date4_default))
, date('Y', strtotime($date4_default)));
$myCalendar->setPath("calendar/");
$myCalendar->setYearInterval(1970, 2020);
$myCalendar->setAlignment('left', 'bottom');
$myCalendar->setDatePair('datefrom', 'dateto', $date3_default);
$myCalendar->writeScript();
?>
</TD>
</TR>
</TBODY>
</TABLE>
<input type="submit" name="Submit" value="Submit" />
</form>
<INPUT type="button" value="Add Row" onclick="addRowfwemp(); return false;"/>
</DIV>
the function called onclick is this:
function addRowfwemp() {
/* Declare variables */
var elements, templateRow, rowCount, row, className, newRow, element;
var i, s, t;
/* Get and count all "tr" elements with class="row". The last one will
* be serve as a template. */
if (!document.getElementsByTagName)
return false; /* DOM not supported */
elements = document.getElementsByTagName("tr");
templateRow = null;
rowCount = 0;
for (i = 0; i < elements.length; i++) {
row = elements.item(i);
/* Get the "class" attribute of the row. */
className = null;
if (row.getAttribute)
className = row.getAttribute('class')
if (className == null && row.attributes) { // MSIE 5
/* getAttribute('class') always returns null on MSIE 5, and
* row.attributes doesn't work on Firefox 1.0. Go figure. */
className = row.attributes['class'];
if (className && typeof(className) == 'object' && className.value) {
// MSIE 6
className = className.value;
}
}
/* This is not one of the rows we're looking for. Move along. */
if (className != "row_to_clone_fw_emp")
continue;
/* This *is* a row we're looking for. */
templateRow = row;
rowCount++;
}
if (templateRow == null)
return false; /* Couldn't find a template row. */
/* Make a copy of the template row */
newRow = templateRow.cloneNode(true);
/* Change the form variables e.g. price[x] -> price[rowCount] */
elements = newRow.getElementsByTagName("input");
for (i = 0; i < elements.length; i++) {
element = elements.item(i);
s = null;
s = element.getAttribute("name");
if (s == null)
continue;
t = s.split("[");
if (t.length < 2)
continue;
s = t[0] + "[" + rowCount.toString() + "]";
element.setAttribute("name", s);
element.value = "";
}
/* Add the newly-created row to the table */
templateRow.parentNode.appendChild(newRow);
return true;
}
i am using this date picker for my script:
i am using the "Date Pair Example" on belows link.
http://www.triconsole.com/php/calendar_datepicker.php
thank u very much in advance ...
I have a form with a button which opens a javascript/css popup window. On the popup window I have a textarea which will be used to add a comment to a database field. The problem is that I need to pass it a value from the main page (the one that calls the popup) which will identify which entry in the database to update. But I am stuck trying to get it to work. Here is my code. I need to have the variable sent to the update.php page. Please help.
<?php
ini_set('display_errors',1);
error_reporting(E_ALL);
if(isset($_GET['sort']) && isset($_GET['col']) ){
$order = $_GET['sort'];
$column = $_GET['col'];
}
else{
$order = 'ASC';
$column = 'cron_id';
}
$page = 'Testing Site';
require_once('includes/head.php');
require_once('includes/mysql.php');
require_once('includes/class.tdcron.php');
require_once('includes/class.tdcron.entry.php');
date_default_timezone_set('America/Los_Angeles');
$result = mysql_query("SELECT * FROM cron WHERE active=1 ORDER BY $column $order") or die (mysql_error());
mysql_close();
$pass = "<img src='images/Checked.png' alt='Pass' width='16' height='16'/>";
$fail = "<img src='images/Stop.png' alt='Failed' width='16' height='16'/>";
$warn = "<img src='images/Warning.png' alt='Warning' width='16' height='16' />";
$com = "<img src='images/pencil.png' alt='Warning' width='16' height='16' />";
echo "<div id='tableContainer' class='tableContainer'>";
echo "<table width='100%' border='0' padding='0' cellpadding='0' cellspacing='0' class='scrollTable'>";
echo "<thead class='fixedHeader'>";
echo "<tr>";
if ($order=="ASC") { echo "<th>Status</th>"; }
else { echo "<th>Status</th>"; }
echo '<th>Schedule</th>';
if ($order=="ASC") { echo "<th>Job</th>"; }
else { echo "<th>Job</th>"; }
echo '<th>Description</th>';
if ($order=="ASC") { echo "<th>Destination</th>"; }
else { echo "<th>Destination</th>"; }
echo '<th>Errors</th>';
if ($order=="ASC") { echo "<th>Job Type</th>"; }
else { echo "<th>Job Type</th>"; }
if ($order=="ASC") { echo "<th>Category</th>"; }
else { echo "<th>Category</th>"; }
if ($order=="ASC") { echo "<th>Last Ran</th>"; }
else { echo "<th>Last Ran</th>"; }
echo '<th>Next Run</th>';
echo '<th>Log</th>';
echo '</tr></thead><tbody class="scrollContent">';
while($row = mysql_fetch_array($result)){
if($row['ok'] == 1){$status = $pass;}
elseif($row['ok'] == 0){$status = $fail;}
else{$status = $warn;}
echo '<tr>';
echo
'<td>
**<form name="frm_comment" action="" onsubmit="return false;" >' . $status . ' ' .
'<input type="image" src="images/pencil.png" onclick="popup_show(\'popup\', \'popup_drag\', \'popup_exit\', \'mouse\', -10, -5);" width=\'16\' height=\'16\' />
</form>**
</td>';
echo '<td>' . $row['schedule'] . '</td>';
echo '<td>' . $row['job'] . '</td>';
echo '<td>' . $row['description'] . '</td>';
echo '<td>' . $row['destination'] . '</td>';
echo '<td>' . $row['errormsgs'] . '</td>';
echo '<td>' . $row['jobtype'] . '</td>';
echo '<td>' . $row['catagory'] . '</td>';
echo '<td>' . date('D M d # g:i A', $row['ran_at']) . '</td>';
echo '<td>' . date('D M d # g:i A', tdCron::getNextOccurrence($row['mhdmd'])) . '</td>';
echo "<td><a href='log/" . $row['log'] . "' target='_blank' >View Log</a></td>";
echo '</tr>';
}
echo '</tbody>';
echo "</table>";
echo "</div>";
// ***** Popup Window ****************************************************
echo'<div class="sample_popup" id="popup" style="display: none;">
<div class="menu_form_header" id="popup_drag">
<img class="menu_form_exit" id="popup_exit" src="images/form_exit.png" alt="Close Form" /> Comments
</div>
<div class="menu_form_body">
<form name="up" action="update.php" onsubmit="return validateForm()" method="post" >
<input type="hidden" name="' . $row['job'] . '" />
<table>
<tr>
<td><textarea class="field" onfucus="select();" name="comment" rows="8" cols="44"></textarea>
</tr>
<tr>
<td align="right" ><br /><input class="btn" type="submit" name="submit" value="Submit" /></td>
</tr>
</table>
</form>
</div>
</div>';
require_once('includes/footer.php');
?>
Javascript code start
// Copyright (C) 2005-2008 Ilya S. Lyubinskiy. All rights reserved.
// Technical support: http://www.php-development.ru/
//
// YOU MAY NOT
// (1) Remove or modify this copyright notice.
// (2) Re-distribute this code or any part of it.
// Instead, you may link to the homepage of this code:
// http://www.php-development.ru/javascripts/popup-window.php
//
// YOU MAY
// (1) Use this code on your website.
// (2) Use this code as part of another product.
//
// NO WARRANTY
// This code is provided "as is" without warranty of any kind.
// You expressly acknowledge and agree that use of this code is at your own risk.
// USAGE
//
// function popup_show(id, drag_id, exit_id, position, x, y, position_id)
//
// id - id of a popup window;
// drag_id - id of an element within popup window intended for dragging it
// exit_id - id of an element within popup window intended for hiding it
// position - positioning type:
// "element", "element-right", "element-bottom", "mouse",
// "screen-top-left", "screen-center", "screen-bottom-right"
// x, y - offset
// position_id - id of an element relative to which popup window will be positioned
// ***** Variables *************************************************************
var popup_dragging = false;
var popup_target;
var popup_mouseX;
var popup_mouseY;
var popup_mouseposX;
var popup_mouseposY;
var popup_oldfunction;
// ***** popup_mousedown *******************************************************
function popup_mousedown(e)
{
var ie = navigator.appName == "Microsoft Internet Explorer";
popup_mouseposX = ie ? window.event.clientX : e.clientX;
popup_mouseposY = ie ? window.event.clientY : e.clientY;
}
// ***** popup_mousedown_window ************************************************
function popup_mousedown_window(e)
{
var ie = navigator.appName == "Microsoft Internet Explorer";
if ( ie && window.event.button != 1) return;
if (!ie && e.button != 0) return;
popup_dragging = true;
popup_target = this['target'];
popup_mouseX = ie ? window.event.clientX : e.clientX;
popup_mouseY = ie ? window.event.clientY : e.clientY;
if (ie)
popup_oldfunction = document.onselectstart;
else popup_oldfunction = document.onmousedown;
if (ie)
document.onselectstart = new Function("return false;");
else document.onmousedown = new Function("return false;");
}
// ***** popup_mousemove *******************************************************
function popup_mousemove(e)
{
var ie = navigator.appName == "Microsoft Internet Explorer";
var element = document.getElementById(popup_target);
var mouseX = ie ? window.event.clientX : e.clientX;
var mouseY = ie ? window.event.clientY : e.clientY;
if (!popup_dragging) return;
element.style.left = (element.offsetLeft+mouseX-popup_mouseX)+'px';
element.style.top = (element.offsetTop +mouseY-popup_mouseY)+'px';
popup_mouseX = ie ? window.event.clientX : e.clientX;
popup_mouseY = ie ? window.event.clientY : e.clientY;
}
// ***** popup_mouseup *********************************************************
function popup_mouseup(e)
{
var ie = navigator.appName == "Microsoft Internet Explorer";
var element = document.getElementById(popup_target);
if (!popup_dragging) return;
popup_dragging = false;
if (ie)
document.onselectstart = popup_oldfunction;
else document.onmousedown = popup_oldfunction;
}
// ***** popup_exit ************************************************************
function popup_exit(e)
{
var ie = navigator.appName == "Microsoft Internet Explorer";
var element = document.getElementById(popup_target);
popup_mouseup(e);
element.style.display = 'none';
}
// ***** popup_show ************************************************************
function popup_show(id, drag_id, exit_id, position, x, y, position_id)
{
var element = document.getElementById(id);
var drag_element = document.getElementById(drag_id);
var exit_element = document.getElementById(exit_id);
var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth;
var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight;
element.style.position = "absolute";
element.style.display = "block";
if (position == "element" || position == "element-right" || position == "element-bottom")
{
var position_element = document.getElementById(position_id);
for (var p = position_element; p; p = p.offsetParent)
if (p.style.position != 'absolute')
{
x += p.offsetLeft;
y += p.offsetTop;
}
if (position == "element-right" ) x += position_element.clientWidth;
if (position == "element-bottom") y += position_element.clientHeight;
element.style.left = x+'px';
element.style.top = y+'px';
}
if (position == "mouse")
{
element.style.left = (document.documentElement.scrollLeft+popup_mouseposX+x)+'px';
element.style.top = (document.documentElement.scrollTop +popup_mouseposY+y)+'px';
}
if (position == "screen-top-left")
{
element.style.left = (document.documentElement.scrollLeft+x)+'px';
element.style.top = (document.documentElement.scrollTop +y)+'px';
}
if (position == "screen-center")
{
element.style.left = (document.documentElement.scrollLeft+(width -element.clientWidth )/2+x)+'px';
element.style.top = (document.documentElement.scrollTop +(height-element.clientHeight)/2+y)+'px';
}
if (position == "screen-bottom-right")
{
element.style.left = (document.documentElement.scrollLeft+(width -element.clientWidth ) +x)+'px';
element.style.top = (document.documentElement.scrollTop +(height-element.clientHeight) +y)+'px';
}
drag_element['target'] = id;
drag_element.onmousedown = popup_mousedown_window;
exit_element.onclick = popup_exit;
}
// ***** Attach Events *********************************************************
if (navigator.appName == "Microsoft Internet Explorer")
document.attachEvent ('onmousedown', popup_mousedown);
else document.addEventListener('mousedown', popup_mousedown, false);
if (navigator.appName == "Microsoft Internet Explorer")
document.attachEvent ('onmousemove', popup_mousemove);
else document.addEventListener('mousemove', popup_mousemove, false);
if (navigator.appName == "Microsoft Internet Explorer")
document.attachEvent ('onmouseup', popup_mouseup);
else document.addEventListener('mouseup', popup_mouseup, false);
END Javascript CODE
CSS Code Start
div.sample_popup { z-index: 1; }
div.sample_popup div.menu_form_header
{
border: 1px solid black;
border-bottom: none;
width: 400px;
height: 20px;
line-height: 19px;
vertical-align: middle;
background: url('../images/form_header.png') no-repeat;
text-decoration: none;
font-family: Times New Roman, Serif;
font-weight: 900;
font-size: 13px;
color: #FFFFFF; /*#206040;*/
cursor: default;
}
div.sample_popup div.menu_form_body
{
width: 400px;
height: 200px;
border: 1px solid black;
background: url('../images/form.png') no-repeat left bottom;
}
div.sample_popup img.menu_form_exit
{
float: right;
margin: 4px 5px 0px 0px;
cursor: pointer;
}
div.sample_popup table
{
width: 100%;
border-collapse: collapse;
}
div.sample_popup th
{
width: 1%;
padding: 0px 5px 1px 0px;
text-align: left;
font-family: Times New Roman, Serif;
font-weight: 900;
font-size: 13px;
color: #004060;
}
div.sample_popup td
{
width: 99%;
padding: 0px 0px 1px 0px;
}
div.sample_popup form
{
margin: 0px;
padding: 8px 10px 10px 10px;
}
div.sample_popup input.field
{
width: 95%;
border: 1px solid #808080;
font-family: Verdana, Sans-Serif;
font-size: 12px;
}
div.sample_popup input.btn
{
margin-top: 2px;
border: 1px solid #808080;
background-color: #DDFFDD;
font-family: Verdana, Sans-Serif;
font-size: 11px;
}
CSS CODE END
You're using a JS/CSS popup, so just pass $row['job'] in your call to popup_show() (assuming you are able to modify or overload that JS function), and then populate it in the hidden field of your popup HTML with Javascript. The way you're doing it now, you'd have to duplicate the block of Popup HTML once for each row in your resultset for it to work.