JAVASCRIPT
function ShowContent(id) {
if(id.length < 1) { return; }
document.getElementById(id).style.display = "block";
}
PHP
$test = mysql_query('SELECT userid,testid,testname FROM test_table WHERE userid = 9 ORDER BY name');
TestName : <select>
while($row=mysql_fetch_array($test))
{
$testname = $row['testname'];
$testid = $row['testid'];
echo '<option value='.$testid.'>'.$testname.'</option>
}
</select>
echo '<div id="testid" style="display:none;">
echo '<table>
<tr><th>USERID</th</tr>
<tr><th>TESTNAME</th></tr>
<tr><th>MARKS</th></tr>
publishtest = mysql_query('SELECT id,userid,publishtest,marks FROM publish_table WHERE userid= 9 GROUP BY id');
while($row=mysql_fetch_array($publishtest))
{
$userid = $row['userid'];
$testid = $row['id']; /*This is test id*/
$testname = $row['publishtest']; /* This is test name*/
$marks = $row['marks'];
echo '<tr><td>'.$userid.'</td>
<td>'.testid.'</td>
<td>'.testname.'</td>
<td>'.$marks.'</td>
</tr>
}
echo '</table>';
echo '</div>';
I need when I select test from select tag, then div should be displayed of that testid. I want either in javascript, jquery
You can try this:
JavaScript
$('#showDivSelect').change(function (e) {
var divId = $(this).children('option:selected').val();
$('#' + divId).css('display', 'block');
});
HTML
<select id="showDivSelect">
<option id="o1">Div1</option>
<option id="o2">Div2</option>
</select>
<div id="Div1"></div>
<div id="Div2"></div>
CSS
#Div1 {
width: 30px;
height: 30px;
background-color: red;
display: none;
}
#Div2 {
width: 30px;
height: 30px;
background-color: blue;
display: none;
}
Here is working example: http://jsfiddle.net/ePSDu/
Related
I used Yii2 multiple selection dropdown with image , it is working fine at create but not showing me selected values on update...
Form:
<?php
$allProducts = Product::find()->where('active = 1')->all();
$prArr = array();
if ($allProducts) {
foreach ($allProducts as $allProduct) {
echo '<option value="' . $allProduct->id . '" style="color: #000; height: 50px; padding-left: 70px;padding-top: 15px;background-image: url(\'' . $allProduct->getThumb() . '\');background-repeat: no-repeat;background-size: 65px auto;">' . $allProduct->title . '</option>';
}
}
?>
Controller:
$oldRels = ProductRelated::find()->where('main_product_id = :main_product_id', ['main_product_id' => $model->id])->all();
if ($oldRels) {
foreach ($oldRels as $oldRel) {
$oldRel->delete();
}
}
if (isset($_POST['relProducts']) and ! empty($_POST['relProducts'])) {
foreach ($_POST['relProducts'] as $relProduct_id) {
$relProduct = new ProductRelated;
$relProduct->main_product_id = $model->id;
$relProduct->rel_product_id = $relProduct_id;
$relProduct->save(false);
}
}
How I can show multi selected values in dropdown with images when I update my recored?
you can try this:
<select id="relProductSelect" name="relProducts[]" multiple>
<?php
$allProducts = Product::find()->where('active = 1')->all();
$arrRelatedProducts = ArrayHelper::map(ProductRelated::find()->where('main_product_id = :main_product_id', ['main_product_id' => $model->id])->all(), 'rel_product_id', 'rel_product_id');
if($allProducts){
foreach($allProducts as $allProduct){
if(in_array($allProduct->id, $arrRelatedProducts)){
echo '<option value="'.$allProduct->id.'" selected style="color: #000; height: 50px; padding-left: 70px;padding-top: 15px;background-image: url(\''.$allProduct->getThumb().'\');background-repeat: no-repeat;background-size: 65px auto;">'.$allProduct->title.'</option>';
}else{
echo '<option value="'.$allProduct->id.'" style="color: #000; height: 50px; padding-left: 70px;padding-top: 15px;background-image: url(\''.$allProduct->getThumb().'\');background-repeat: no-repeat;background-size: 65px auto;">'.$allProduct->title.'</option>';
}
}
}
?>
</select>
I'm trying to make a Chat Room using PHP ( It is working BTW ), but only the messages are displaying, not their usernames. I have created the Databases for them, username and msg. I don't know why their usernames aren't displaying
<? php
//$uname = $_REQUEST['uname'];
//$msg = $_REQUEST['msg'];
$uname = (isset($_REQUEST['uname']) ? $_REQUEST['uname'] : '');
$msg = (isset($_REQUEST['msg']) ? $_REQUEST['msg'] : null);
$con = mysql_connect('localhost', 'root', '');
mysql_select_db('chatbox', $con);
mysql_query("INSERT INTO logs (`username` , `msg`) VALUES ('$uname', '$msg')");
$result1 = mysql_query("SELECT * FROM logs ORDER by id DESC");
while ($extract = mysql_fetch_array($result1)) {
echo "<span class = 'uname'>".$extract['username'].
"</span>: <span class = 'msg'> ".$extract['msg'].
"</span><br/>";
}
?>
<?php $con=mysql_connect('localhost',
'root',
'');
mysql_select_db('chatbox',
$con);
$result1=mysql_query("SELECT * FROM logs ORDER by id DESC");
while($extract=mysql_fetch_array($result1)) {
echo"<span class = 'uname'>" . $extract['username'] ."</span>: <span class = 'msg'> " . $extract['msg'] ."</span><br/>";
}
?>
<?php ?>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<style>
* {
margin: 0;
}
body {
padding-right: 250px;
padding-left: 250px;
margin: 0;
background-color: darkkhaki;
}
textarea {
resize: none;
width: 100%;
height: 300px;
background-color: #efefef;
}
a {
background-color: cadetblue;
padding: 15px 25px 15px 25px;
text-decoration: none;
color: white;
}
a:hover {
background-color: chartreuse;
}
</style>
</head>
<body>
<form name="form1">
Enter your Username
<input type="text" name="uname">
<br/>Enter your Message
<br/>
<textarea name="msg"></textarea>
<br/>
<br/>
Send
<br/>
<br/>
<div id="chatlogs">
Loading Chat...
</div>
</form>
<script>
function submitChat() {
if (form1.uname.value == '' || form1.msg.value == '') {
alert('Please Input Username and Message');
return;
}
var uname = form1.uname.value;
var msg = form1.msg.value;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('chatlogs').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('GET', 'insert.php?uname' + uname + '&msg=' + msg, true);
xmlhttp.send();
}
</script>
</body>
</html>
. Feel free to point out the mistakes.
Replace
insert.php?uname
with
insert.php?uname=
Updated Code:
xmlhttp.open('GET', 'insert.php?uname=' + uname + '&msg=' + msg, true);
You are not inserting uname
So my "type1" select statement will select an issue category, and then based on that issue I want a dropdown of employees that deal with that issue in another drop down. Also how do I make all the hidden select statements occupy the same space?
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>IssueReport</title>
<script src = "../../jquery.js"></script>
<style>
body{
padding:0;
margin:0;
}
#box {
padding: 5px;
color:black;
margin: 0 auto;
border-style: solid;
border-color: #0000E6;
border-width: 2px;
background-color: #58C6EB;
width: 162px;
height: 687px;
float: left;
border-radius: 10px;
}
.word{
color: #0000E6;
}
.buttons{
background-color: #CCFFFF;
border-radius: 5px;
}
</style>
<script>
function showForm(){
var issue = document.getElementById("type1").value;
if(issue == 'Program Glitch'){
document.getElementById("IT1").style.display = "block";
}
$("#type1").onchange(function{
});
}
$(document).ready(function(){
$("#sub").click(function(){
var user_issue = $("#issue").val();
var user_priority = $("#priority").val();
var user_type = $("#type1").val();
var user_author = $("#author").val();
$.post("BugReport.php",{issue:user_issue,priority:user_priority,type1:user_type,author:user_author},function(data){
$("#result").html(data);
});
});
$("#sub").click(function(){
document.getElementById('issue').value='';
$('#type1').prop('selectedIndex', 0);
$('#priority').prop('selectedIndex', 1);
});
});
</script>
</head>
<body>
<div id="box">
<h3 class = "word" style = "margin:10px 30px 30px 30px;">Issue Report</h3>
<div class = "word" style = "width: 100px; margin-left: auto; margin-right: auto">Type Of Issue:</div>
<div style = " max-width: 150px; margin-left: auto; margin-right: auto; padding: 2px">
<form action="BugReport.html" method="post">
<select onchange = "showForm()" class = "buttons" name = "type1" id = "type1" style = 'max-width: 150px;'>
<?php
$servername = "localhost";
$username = "user";
$password = "pass";
$database = "database";
$con = mysqli_connect($servername,$username,$password,$database);
if($con->connect_error){
die("Connection failed " . $con->connect_error);
}
$sql1 = "select issue_name, issue_description from Issue";
$result = mysqli_query($con,$sql1);
while ($row = mysqli_fetch_array($result)) {
$issue = $row['issue_name'];
$des = $row['issue_description'];
echo "<option value = '$issue' title = '$des'>$issue</option>";
}
?>
</select>
</form></div>
<form action="BugReport.html" method="post">
<div id = "Buyers1" style = "visibility:hidden;"><select class = "buttons" name = "author" id = "Buyers" style = "margin: 0px 30px 0px 30px;">
<?php
$sql = "select first, last from Employee where department_id = '1'";
$result = mysqli_query($con,$sql);
while ($row = mysqli_fetch_array($result)) {
$name = $row['first'] . ' ' . $row['last'];
echo "<option value = '$name'>$name</option>";
}
?>
</select></div></form>
<div id = "Operations1" style = "visibility:hidden;"><form action="BugReport.html" method="post">
<select class = "buttons" name = "author" id = "Operations" style = "margin: 0px 30px 0px 30px;">
<?php
$sql = "select first, last from Employee where department_id = 2";
$result = mysqli_query($con,$sql);
while ($row = mysqli_fetch_array($result)) {
$name = $row['first'] . ' ' . $row['last'];
echo "<option value = '$name'>$name</option>";
}
?>
</select></form></div>
<div id = "IT1" style = "display:none;"><form action="BugReport.html" method="post">
<select onchange = "showForm()" class = "buttons" name = "author" id = "IT" style = "margin: 0px 30px 0px 30px;">
<?php
$sql = "select first, last from Employee where department_id = 3";
$result = mysqli_query($con,$sql);
while ($row = mysqli_fetch_array($result)) {
$name = $row['first'] . ' ' . $row['last'];
echo "<option value = '$name'>$name</option>";
}
?>
</select></form></div>
<div id = "CustomerService1" style = "visibility:hidden;"><form action="BugReport.html" method="post">
<select class = "buttons" name = "author" id = "CustomerService" style = "margin: 0px 30px 0px 30px;">
<?php
$sql = "select first, last from Employee where department_id = 4";
$result = mysqli_query($con,$sql);
while ($row = mysqli_fetch_array($result)) {
$name = $row['first'] . ' ' . $row['last'];
echo "<option value = '$name'>$name</option>";
}
?>
</select></form></div>
<div id = "HR1" style = "visibility:hidden;"><form action="BugReport.html" method="post">
<select class = "buttons" name = "author" id = "HR" style = "margin: 0px 30px 0px 30px;">
<?php
$sql = "select first, last from Employee where department_id = 5";
$result = mysqli_query($con,$sql);
while ($row = mysqli_fetch_array($result)) {
$name = $row['first'] . ' ' . $row['last'];
echo "<option value = '$name'>$name</option>";
}
?>
</select></form></div>
<div id = "Logistics1" style = "visibility:hidden;"><form action="BugReport.html" method="post">
<select class = "buttons" name = "author" id = "Logistics" style = "margin: 0px 30px 0px 30px;">
<?php
$sql = "select first, last from Employee where department_id = 6";
$result = mysqli_query($con,$sql);
while ($row = mysqli_fetch_array($result)) {
$name = $row['first'] . ' ' . $row['last'];
echo "<option value = '$name'>$name</option>";
}
?>
</select></form></div>
<form action="BugDisplayAndReply.html" method="post">
<label></label><br>
<textarea style = "max-width: 156px; background-color: #F3F9FF; border-color: #0000E6;" cols="20" rows="34" name="issue" id = "issue" placeholder = "Enter Your Issue Here" "></textarea></form><br>
<div class = "word" style = "width: 50px; margin-left: auto; margin-right: auto">Priority:</div>
<div style = "width: 70px; margin-left: auto; margin-right: auto; padding: 2px">
<form action="BugReport.html" method="post">
<select class = "buttons" name = "priority" id = "priority">
<option value = "Low">Low</option>
<option value = "Regular" selected>Regular</option>
<option value = "High">High</option>
<option value = "Urgent">Urgent</option>
</select>
</form></div>
<div style = "width: 50px; margin-left: auto; margin-right: auto; padding: 2px">
<input class = "buttons" type ="submit" name = "sub" value = "Submit" id = "sub"></div>
<div id="result"></div>
</div>
</body>
</html>
my site which is a search engine returns many many results with a foreach loop as such:
foreach ($xml->channel->item as $result) {
$ltitle = $result->title;
$ldesc = $result->description;
$url = $result->displayUrl;
$link = $result->link;
if (strlen($ltitle) > 60)
{
$title = substr($ltitle,0,60).'...' ;
}
else
{
$title = $ltitle;
}
if (strlen($ldesc) > 195)
{
$desc = substr($ldesc,0,195).'...' ;
}
else
{
$desc = $ldesc;
}
echo "
<br>
<div class='resultbox'>
<a class='normal' style='text-decoration:none;font-size:huge;font-weight:bold' href='$link'>$title</a><br>
<div style='padding-top:3px;padding-bottom:4px;width:580px;'>
<font style='text-decoration:none;font-size:small;font-family:Arial;'>$desc<br></font></div>
<a style='text-decoration:none;' href='$link'><font style='text-decoration:none;font-size:small;color:green;font-weight:bold;'>$url<br></font></a>
</div>
";
}
And the resultbox class above styles all of the results with this
.resultbox
{
height:auto;
width:600px;
background-color:transparent;
font-size:19px;
padding:10px;
padding-left: 30px;
padding-right: 30px;
border-left: 6px solid #333;
}
.resultbox:hover
{
border-left: 8px solid #555;
}
The border-left color is what i want changed, i would like it to generate or to style randomly off of a list of colour codes so the results, insead of being all #333 can be #333 #555 #999 and so on..... any ideas?
If u have no problems using JS , You can certainly do this :
$(document).ready(function () {
$('.resultbox').mouseenter(function() {
var randomColor = Math.floor(Math.random()*16777215).toString(16);
$('.resultbox').css("border-left", " 8px solid #"+randomColor);
});
});
change <div class='resultbox'> to <div class='resultbox random-color-".rand(1,YOUR_COLOR_LIMIT)."'> AND define colors like
.random-color-1 {
border-left: 8px solid #555;
}
.random-color-2 {
border-left: 8px solid #555;
}
.....
.random-color-YOUR_COLOR_LIMIT {
border-left: 8px solid #555;
}
change
<div class='resultbox'>
to
<div class='resultbox' style='border-left-color:$yourColorInCssFormat;'>
the style attribute overrides the css from class.
set $yourColorInCssFormat to the color you wish to have for the div. for example: $yourColorInCssFormat = '#999';
You can use inline style for that. Or alternatively you can user nth-child selector of css to repeat the border-color scheme something like this:
.resultbox:nth-child(n+1):hover {
}
.resultbox:nth-child(2n+1):hover {
}
.resultbox:nth-child(3n+1):hover {
}
First off, try this out for your foreachloop:
<?php foreach ($xml->channel->item as $result): ?>
<?php
$ltitle = $result->title;
$ldesc = $result->description;
$url = $result->displayUrl;
$link = $result->link;
if (strlen($ltitle) > 60){
$title = substr($ltitle,0,60).'...' ;
}else{$title = $ltitle;}
if (strlen($ldesc) > 195){
$desc = substr($ldesc,0,195).'...' ;
}else{$desc = $ldesc;}
?>
<div class='resultbox'>
<a class='normal' style='text-decoration:none;font-size:huge;font-weight:bold' href='<?php echo $link ?>'><?php echo $title; ?></a>
<br>
<div style='padding-top:3px;padding-bottom:4px;width:580px;'>
<font style='text-decoration:none;font-size:small;font-family:Arial;'>
<?php echo $desc; ?><br>
</font>
</div>
<a style='text-decoration:none;' href='<?php echo $link; ?>'><font style='text- decoration:none;font-size:small;color:green;font-weight:bold;'><?php echo $url; ?><br></font> </a>
<?php endforeach; ?>
That way you're not playing with big echos.
Now for generating random colors your could use php rand();
For example:
//Generate a random number between the two parameters
$randomNumber = rand(1, 3);
//Use this number to dictate what the variable color should be
if($randomNumber == 1){$color = "#333"}
elseif($randomNumber == 2){$color = "#555"}
elseif($randomNumber == 3){$color = "#999"}
You can then use the variable $color in your code to randomly assign one of the colors to elements.
Hope this helps!
-Gui
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.