changing colour of text dependent on time value php - javascript

I want to try get a traffic light colour scheme with my time text where if the time is between 0.0000 and 10.0000 the text if green if between 10.0100 and 15.0000 the text is orange and between 15.0100 and 20.0000 then its red i cant get my function to run i may be missing something but im not sure what.
currently the mysql query returns result as 14.6263 with this value constantly changing
my current code is :
<!doctype html>
<html>
<head>
<title>time stats</title>
<style>
body {
background-color: black;
}
.box1 {
width: 300px;
height: 400px;
border: 15px solid yellow;
padding: 15px;
margin: 15px;
display: inline-block;
color: white;
font-size:40px;
color: lime;
.container {
text-align: center;
}
</style>
<body>
<div class="box1">
<?php
$q = intval($_GET['q']);
$con = mysqli_connect('localhost','username','password','test');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"ajax_demo");
$sql="select avg(time_format(delivery_avg,'%i:%s')) as time_avg from test.del where location = 'yellow'";
$result = mysqli_query($con,$sql);
echo "<table>
<thead>
<th>time Average</th>
</thead>";
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['time_avg'] . "</td>";
echo "</tr>";}
echo "</table>";
mysqli_close($con);
?>
</div>
function updatecolor() {
//console.log('function called');
{
if ($box1.td < 10)
return '#00FF00';
else if ($box1.td >= 11 && $box1.td<= 15)
return = '#FFA500';
else if ($box1.td >= 16 && $box1.td<= 20)
return = '#ff0000';
}
});
}
var updateInterval = setInterval(updatecolor, 1000);
</body>
</html>

Here's a little function that will return your colors depending on the $valueToCheck parameter of the function:
<?php
function addColor($valueToCheck) {
{
if ($valueToCheck <= 10) {
return '#00FF00';
} else if ($valueToCheck >= 11 && $valueToCheck <= 15) {
return '#FFA500';
} else if ($valueToCheck >= 16 && $valueToCheck <= 20) {
return '#ff0000';
}
};
}
?>
Wrapped it in <?php ?> tags, since it's a PHP function.
Use it in your HTML like so:
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td style=\"color:" . addColor($row['time_avg']) . "\">";
echo $row['time_avg'];
echo "</td>";
echo "</tr>";
}
As for your code:
return = '#FFA500'; is not valid, remove the =.
If $box1 were available:
if ($box1.td < 10)
return '#00FF00';
else if ($box1.td >= 11 && $box1.td<= 15)
What about 10? You never check for 10>x>11.

Related

How to add PHP Pagination in image gallery

I want to add pagination in my image gallery. But it is showing all images in one page instead of 6 images on one page. How can I achieve this ? please help
<?php
echo "<html><head><title>Image</title></head><body>";
$rec_limit = 3;
$conn = mysqli_connect("localhost", "root", "test123#", "imagesdatabase") or die("unable to connect");
$rootPath = '/var/www/html/';
require_once $rootPath.'app/bootstrap.php';
$bootstrap = \Magento\Framework\App\Bootstrap::create(BP, $_SERVER);
$objManager = $bootstrap->getObjectManager();
$state = $objManager->get('\Magento\Framework\App\State');
$state->setAreaCode('frontend');
$resource = $objManager->get('\Magento\Framework\App\ResourceConnection');
$connection = $resource->getConnection('core_write');
$rec_count = 20;
if( isset($_GET{'page'} ) ) {
$page = $_GET{'page'} + 1;
$offset = $rec_limit * $page ;
}else {
$page = 0;
$offset = 0;
}
$left_rec = $rec_count - ($page * $rec_limit);
$url = "www.testwebsite.com". $_SERVER['PHP_SELF'] ;
$entity_ids = mysqli_query($conn,"SELECT e.entity_id,g.value_id,g.value from catalog_product_entity_media_gallery g join catalog_product_entity_media_gallery_value v on (g.value_id = v.value_id) join catalog_product_entity e on (v.entity_id = e.entity_id) where e.attribute_set_id = 62");
while ( $row=mysqli_fetch_array($entity_ids,MYSQLI_ASSOC)) {
//print_r($row);
$entity_id = $row['entity_id'];
$image = $row['value'];
echo $entity_id;
echo '<img src="www.testwebsite.com/pub/media/catalog/product/'.$image.'" alt="Image" width="200px" height="200px"/></a>';
}
echo "<br>";
if( $page > 0 ) {
$last = $page - 2;
echo "Last 10 Records |";
echo "Next 10 Records";
}else if( $page == 0 ) {
echo "Next 10 Records";
}else if( $left_rec < $rec_limit ) {
$last = $page - 2;
echo "Last 10 Records";
}
//mysql_close($conn);
echo "</body></html>";
Images are showing correct but I just want to add pagination and show only 6 images on each page.
Any help would be appreciated . Thanks
After so much patience I have understood each criteria to add pagination and use bootstrap pagination ..
Below is my answer. hope it will help someone.
<!DOCTYPE html>
<html>
<head>
<title>Images Grid View</title>
<style type="text/css">
#thumb {
clear : both;
width : 100%;
margin-left : 0;
}
#thumb ul {
width : 100%;
}
#thumb ul li {
display : inline;
font-family : arial;
float : left;
padding-right : 5px;
width: 210px;
height : 280px;
}
#thumb ul li img {
float : left;
width : 200px;
height : 200px;
border : #ccc solid 1px;
padding : 2px;
}
</style>
</head>
<body>
<?php
$conn = mysqli_connect("localhost", "root", "test123#", "imagesdatabase") or die("unable to connect");
$rootPath = '/htdocs/stage6/html/';
require_once $rootPath.'app/bootstrap.php';
$bootstrap = \Magento\Framework\App\Bootstrap::create(BP, $_SERVER);
$objManager = $bootstrap->getObjectManager();
$state = $objManager->get('\Magento\Framework\App\State');
$state->setAreaCode('frontend');
$resource = $objManager->get('\Magento\Framework\App\ResourceConnection');
$connection = $resource->getConnection('core_write');
$rec_limit = 6;
$rec_count = 50;
if (isset($_GET['pageno'])) {
$pageno = $_GET['pageno'];
} else {
$pageno = 1;
}
$no_of_records_per_page = 12;
$offset = ($pageno-1) * $no_of_records_per_page;
$total_pages_sql = "SELECT count(e.entity_id) from catalog_product_entity_media_gallery g join catalog_product_entity_media_gallery_value v on (g.value_id = v.value_id) join catalog_product_entity e on (v.entity_id = e.entity_id) where e.attribute_set_id = 62";
$result = mysqli_query($conn,$total_pages_sql);
$total_rows = mysqli_fetch_array($result)[0];
$total_pages = ceil($total_rows / $no_of_records_per_page);
$entity_ids = mysqli_query($conn,"SELECT e.entity_id,g.value_id,g.value from catalog_product_entity_media_gallery g join catalog_product_entity_media_gallery_value v on (g.value_id = v.value_id) join catalog_product_entity e on (v.entity_id = e.entity_id) where e.attribute_set_id = 62 limit $offset, $no_of_records_per_page");
echo '<div id="thumb"><ul>';
while ( $row=mysqli_fetch_array($entity_ids,MYSQLI_ASSOC)) {
$entity_id = $row['entity_id'];
$image = $row['value'];
echo '<li><p>' . $entity_id .'</p>';
echo '<img src="https://testwebsite.com/pub/media/catalog/product/'.$image.'" alt="Image" /></a>';
echo '</li>';
}
echo '</ul></div>';
?>
<center>
<ul class="pagination" style="list-style-type:none; display:-webkit-inline-box !important; float: left; font-size: 24px;">
<li style="background-color:gray;">First</li>
<li style="background-color:gray;" class="<?php if($pageno <= 1){ echo 'disabled'; } ?>">
Prev
</li>
<li style="background-color:gray;" class="<?php if($pageno >= $total_pages){ echo 'disabled'; } ?>">
Next
</li>
<li style="background-color:gray;">Last</li>
</ul>
</center>
</body>
</html>

persistent checkboxes, dynamic table, php javascript

I've been working on this nonstop and none of the online suggestions have worked.
I have a dynamically created table that refreshes every 5 seconds. There are checkboxes on the table, if you check a box it highlights the row. When the page refreshes all checked states are lost, I need them to be saved, either by local storage or a cookie or even writing out to a file.
Please help and thanks in advance.
My currently working code that does not retain the checked state:
<HTML>
<HEAD>
<TITLE>list</TITLE>
<META name="description" content="">
<META name="keywords" content="">
<meta http-equiv="refresh" content="5" >
<style>
.inv {
display: none;
}
table.sortable thead {
background-color:#999;
color:#222222;
font-weight: bold;
cursor: default;
}
table.sortable tbody {
counter-reset: sortabletablescope;
}
table.sortable thead tr::before {
content: "";
display: table-cell;
}
table.sortable tbody tr::before {
content: counter(sortabletablescope);
counter-increment: sortabletablescope;
display: table-cell;
}
</style>
<script src="../../sorttable.js"></script>
<script>
function toggle_highlight(inputTagReference)
{
var is_checked = inputTagReference.checked; //true or false
if(is_checked)
{
inputTagReference.parentNode.parentNode.style.backgroundColor="yellow";
}
else
{
inputTagReference.parentNode.parentNode.style.backgroundColor="";
}
}
</script>
</HEAD>
<BODY BGCOLOR="#dddddd" TEXT="#000000" LINK="#0000FF" VLINK="#800080">
<h1 align="center">List</h1>
<p align="center"> </p>
<p align="center">
<?php
echo '<div>';
//Create file with headers
system("cmd /C makeit.bat");
//Create html table
echo '<p align="center"> </p>';
echo '<p align="center"> </p>';
echo '<table class="sortable" align="center">';
$row = 0;
$handle = fopen("readylist.txt", "r");
while (($data = fgetcsv($handle, 1000, ",")) !== FALSE) {
if ($row == 0) {
// this is the first line of the file
// it contains titles of columns
$num = count($data);
echo "<thead>\n<tr>";
$row++;
for ($c=0; $c < $num; $c++) {
echo "<th align='left' height='75' width='135'>" . $data[$c] . "</th>";
}
echo "<td></td>";
echo "</tr>\n</thead>\n\n<tbody>";
} else {
// this handles the rest of the lines of the file
$num = count($data);
echo "<tr id=Row0$row>";
$row++;
for ($c=0; $c < $num; $c++) {
echo "<td id=Col0$c>" . $data[$c] . "</td>";
}
echo "<td><input type='checkbox' name='Chk$row id=Chk$row' value='Chk$row' onclick='toggle_highlight(this)'></td>";
echo "</tr>\n";
}
}
fclose($handle);
echo "</tbody>\n</table>";
echo '</div>';
?>
</p>
</BODY>
</HTML>
Here it is with nonworking solution:
<HTML>
<HEAD>
<TITLE>list</TITLE>
<META name="description" content="">
<META name="keywords" content="">
<meta http-equiv="refresh" content="5" >
<style>
#checkbox-container{
margin: 10px 5px;
}
#checkbox-container div{
margin-bottom: 5px;
}
#checkbox-container button{
margin-top: 5px;
}
input[type=text] {
padding: .5em .6em;
display: inline-block;
border: 1px solid #ccc;
box-shadow: inset 0 1px 3px #ddd;
border-radius: 4px;
}
.inv {
display: none;
}
table.sortable thead {
background-color:#999;
color:#222222;
font-weight: bold;
cursor: default;
}
table.sortable tbody {
counter-reset: sortabletablescope;
}
table.sortable thead tr::before {
content: "";
display: table-cell;
}
table.sortable tbody tr::before {
content: counter(sortabletablescope);
counter-increment: sortabletablescope;
display: table-cell;
}
</style>
<script src="../../sorttable.js"></script>
<script src="../../jquery.js"></script>
<script>
var formValues = JSON.parse(localStorage.getItem('formValues')) || {};
var $checkboxes = $("#checkbox-container :checkbox");
var $button = $("#checkbox-container button");
function allChecked(){
return $checkboxes.length === $checkboxes.filter(":checked").length;
}
function updateButtonStatus(){
$button.text(allChecked()? "Uncheck all" : "Check all");
}
function handleButtonClick(){
$checkboxes.prop("checked", allChecked()? false : true)
}
function updateStorage(){
$checkboxes.each(function(){
formValues[this.id] = this.checked;
});
formValues["buttonText"] = $button.text();
localStorage.setItem("formValues", JSON.stringify(formValues));
}
$button.on("click", function() {
handleButtonClick();
updateButtonStatus();
updateStorage();
});
$checkboxes.on("change", function(){
updateButtonStatus();
updateStorage();
});
// On page load
$.each(formValues, function(key, value) {
$("#" + key).prop('checked', value);
});
$button.text(formValues["buttonText"]);
</script>
<script>
function toggle_highlight(inputTagReference)
{
var is_checked = inputTagReference.checked; //true or false
if(is_checked)
{
inputTagReference.parentNode.parentNode.style.backgroundColor="yellow";
}
else
{
inputTagReference.parentNode.parentNode.style.backgroundColor="";
}
}
</script>
</HEAD>
<BODY BGCOLOR="#dddddd" TEXT="#000000" LINK="#0000FF" VLINK="#800080">
<h1 align="center">List</h1>
<p align="center"> </p>
<p align="center">
<?php
echo '<div id="checkbox-container">';
//Create file with headers
system("cmd /C makeit.bat");
//Create html table
echo '<p align="center"> </p>';
echo '<p align="center"> </p>';
echo '<table class="sortable" align="center">';
$row = 0;
$handle = fopen("readylist.txt", "r");
while (($data = fgetcsv($handle, 1000, ",")) !== FALSE) {
if ($row == 0) {
// this is the first line of the file
// it contains titles of columns
$num = count($data);
echo "<thead>\n<tr>";
$row++;
for ($c=0; $c < $num; $c++) {
echo "<th align='left' height='75' width='135'>" . $data[$c] . "</th>";
}
echo "<td></td>";
echo "</tr>\n</thead>\n\n<tbody>";
} else {
// this handles the rest of the lines of the file
$num = count($data);
echo "<tr id=Row0$row>";
$row++;
for ($c=0; $c < $num; $c++) {
echo "<td id=Col0$c>" . $data[$c] . "</td>";
}
echo "<td><input type='checkbox' name='Chk$row id=Chk$row' value='Chk$row' onclick='toggle_highlight(this)'></td>";
echo "</tr>\n";
}
}
fclose($handle);
echo "</tbody>\n</table>";
echo '</div>';
?>
</p>
</BODY>
</HTML>
here is the code from the page that answered the persistent checkbox question, this page works for me, but the code from it on my page does not.
<html >
<head>
<meta charset="UTF-8">
<title>CodePen - A Pen by SitePoint</title>
<style>
#checkbox-container{
margin: 10px 5px;
}
#checkbox-container div{
margin-bottom: 5px;
}
#checkbox-container button{
margin-top: 5px;
}
input[type=text] {
padding: .5em .6em;
display: inline-block;
border: 1px solid #ccc;
box-shadow: inset 0 1px 3px #ddd;
border-radius: 4px;
}
</style>
</head>
<body translate="no" >
<input type="text" placeholder="Type something here" />
<div id="checkbox-container">
<div>
<label for="option1">Option 1</label>
<input type="checkbox" id="option1">
</div>
<div>
<label for="option2">Option 2</label>
<input type="checkbox" id="option2">
</div>
<div>
<label for="option3">Option 3</label>
<input type="checkbox" id="option3">
</div>
<button>Check All</button>
</div>
<script src='../../jquery.js'></script>
<script>
var formValues = JSON.parse(localStorage.getItem('formValues')) || {};
var $checkboxes = $('#checkbox-container :checkbox');
var $button = $('#checkbox-container button');
function allChecked() {
return $checkboxes.length === $checkboxes.filter(':checked').length;
}
function updateButtonStatus() {
$button.text(allChecked() ? 'Uncheck all' : 'Check all');
}
function handleButtonClick() {
$checkboxes.prop('checked', allChecked() ? false : true);
}
function updateStorage() {
$checkboxes.each(function () {
formValues[this.id] = this.checked;
});
formValues['buttonText'] = $button.text();
localStorage.setItem('formValues', JSON.stringify(formValues));
}
$button.on('click', function () {
handleButtonClick();
updateButtonStatus();
updateStorage();
});
$checkboxes.on('change', function () {
updateButtonStatus();
updateStorage();
});
$.each(formValues, function (key, value) {
$('#' + key).prop('checked', value);
});
$button.text(formValues['buttonText']);
//# sourceURL=pen.js
</script>
</body>
</html>
Well, it's been a day, and I don't see anything here.
My assumption is that you guys are finding this just as difficult as I am.
I am still working on this and here is my logic.
I will have to get the insidehtml of one of the cells in the row as part of the onclick event, then set a cookie or use session to store the variable based on the row, and then an onload event that reads that session or cookie and checks the appropriate boxes and highlights the appropriate rows.
If anyone has any comments or suggestions, they are entirely welcome.
tia

Calling Javascript from a Form using Onsubmit

I am newbie in PHP and AJAX, and I am in trouble and don't know how to solve it.
I am creating this page that shows a recordset that resulted from a query.
There are 2 pages: getdata.php and phpajax.php. phpajax.php calls getdata.php via Javascript.
What I have done:
I manage to make it work by using button "Try it" (using static value)
What I want:
How to display the data properly using "Submit" button on a single click (ATM the data appears for a couple of seconds after I click Submit twice, then disappears because the page suddenly refreshes) ?
How to pass the value of SELECT and TEXT into fshowdata() using the Submit Button ?
How to pass the value of SELECT and TEXT into fshowdata() using the "Try It" Button ?
Here is the for the phpajax.php:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script>
function fshowdata(str1,date1) {
//alert("The form was submitted");
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
}
//document.getElementById("demo").innerHTML = str1 + " " + date1;
xmlhttp.open("GET","getdata.php?q="+str1+"&"+"t="+date1,true);
xmlhttp.send();
}
}
</script>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
padding: 5px;
}
th {text-align: left;}
</style>
</head>
<body>
<p id="demo">Click the button to change the text in this paragraph.</p>
<?php
$con = mysql_connect('localhost','root','123');
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db('mydb')or die('Could not select database');
$sql="SELECT DISTINCT(rides) FROM t_trx ORDER BY rides ";
$result = mysql_query($sql) or die('Query failed: ' . mysql_error());
echo "<form onsubmit='"."fshowdata(`some rides`,`a date`)"."' action='".""."'>";
echo "Choose Rides : "." "."<select id='"."rides"."' name='"."rides"."'>";
echo "<option value='"."ALL"."'>ALL</option>";
while($row = mysql_fetch_array($result)) {
echo "<option value='".$row["rides"]."'>".$row["rides"]."</option>";
}
mysql_free_result($result);
echo "</select>";
mysql_close($con);
echo "<input id='"."date2"."' type='"."TEXT"."' name = '"."date2"."'>";
echo "<input id='"."button1"."' type='"."SUBMIT"."' value = '"."SUBMIT"."'>";
echo "</form>";
echo "<button onclick='"."fshowdata(`ROLLER COASTER`,`18/07/2015`)"."'>";
echo "Try it";
echo "</button>";
?>
<br>
<div id="txtHint"><b>Data will be shown here...</b></div>
</body>
</html>
And for the getdata.php:
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
padding: 5px;
}
th {text-align: left;}
</style>
</head>
<body>
<?php
$q = $_GET['q'];
echo $q;
$date_ = $_GET['t'];
echo $date_;
$con = mysql_connect('localhost','root','123');
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db('mydb')or die('Could not select database');
$sql="SELECT * FROM t_trx WHERE rides = '".$q."' AND date1 = '".$date_."' LIMIT 10";
echo $sql;
$result = mysql_query($sql) or die('Query failed: ' . mysql_error());
echo "<table>
<tr>
<th>Rides</th>
<th>Number</th>
<th>Date</th>
</tr>";
while($row = mysql_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['Rides'] . "</td>";
echo "<td>" . $row['Number'] . "</td>";
echo "<td>" . $row['Date'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysql_close($con);
?>
</body>
</html>
Thanks guys. I appreciate your help...
use below code to skip refresh page
onsubmit="return fshowdata(`some rides`,`a date`)"
in the fshowdata function, you should return false.

Keydown functionality in a input field

I want to key down my search results and for this i am using this jquery below:
$('#ChangeAccountInput').keydown(function(e)
{
if(e.keyCode==40)
{
$('#results').css("background-color", "yellow");
}
});
But the problem is, it is applying to the full div not on a single value.
Above jquery applying to all like:
html:
<input id='ChangeAccountInput' class="InputBorder" placeholder="Search" style="display: none; margin-top: -79px; margin-left: -226px; border: 1px solid rgb(133, 133, 133); font-family: calibri; font-size: 15px; color: rgb(68, 68, 68); padding-left: 6px; padding-right: 21px; width: 182px"/>
<i class="icon-search" id="iconsearch1" style="display: none; margin-top: -37px; margin-left: -22px;"></i>
<div id="results" stlye='display: none'></div>
php:
while($row = oci_fetch_assoc($query))
{
echo "<a href='#'>";
echo '<font>'.$row['ACCOUNT_TYPE'].'</font>';
echo '<br>';
echo "<div style='border: 1px solid #AAAAAA; margin-left: -4px'></div>";
echo "</a>";
}
ajax:
$.ajax
({
type: 'GET',
url: 'Reports/Account Search.php',
data: 'GetAccountInput='+GetAccountInput,
success: function(data)
{
$('#results').html(data);
$('#results').show();
}
});
Account Search File:
<?php
error_reporting(0);
$user = "fyp";
$pass = "fyp";
$host = "localhost/CRMP";
// Connection with the Oracle.
$con = oci_connect($user, $pass, $host);
// If connection is established with the Oracle or not.
if (!$con)
{
//header('location:../../../Extra/Error_Other.php');
}
else
{
//echo "Connected to Oracle.";
}
?>
<?php
$GetAccount = $_GET['GetAccountInput'];
if($GetAccount != '')
{
$query = oci_parse($con, "SELECT DISTINCT ACCOUNT_TYPE FROM ACCOUNTS WHERE ACCOUNT_TYPE LIKE '%".$GetAccount."%'");
oci_execute($query);
$check = oci_fetch_array($query);
if(empty($check))
{
echo "<a href='#'>";
echo "No Result Found";
echo "</a>";
}
while($row = oci_fetch_assoc($query))
{
echo "<a>";
echo $row['ACCOUNT_TYPE'];
echo '<br>';
echo "</a>";
echo "<div style='border: 1px solid #777A79; margin-left: -6px'></div>";
}
}
else
{
}
?>
Help would be apprciated.
I thought about this some more and I came up with a solution that will work for you. All you should have to do is add the kind of styling that you want and other animations as needed.
http://jsfiddle.net/2wk6Q/1095/
$('#ChangeAccountInput').keydown(function (e) { //not actually the down key though :-)
if ($('a').hasClass('yellowBack')) { // do any links have this class?
var selected = $('a.yellowBack'); // if the do, they are the 'selected' link
selected.removeClass('yellowBack'); // this cleans up the one that we move from
if (40 == e.keyCode) { // going down the list
if (selected.next().length == 0) {
// if there isn't another list item, highlight the first
$('#results a:first').addClass('yellowBack');
} else {
// add the class to the next item
selected.next().addClass('yellowBack');
}
} else { // going up the list
if (selected.prev().length == 0) {
// add the class to the last item if you have gone to the top of the list
$("#results a:last").addClass("yellowBack");
} else {
// add the class to the next one up the list
selected.prev().addClass('yellowBack');
}
}
} else {
// if none were initially selected, select the first one
$("#results a:first").addClass("yellowBack");
}
});
This will allow you to move up and down the returned list, no matter what length the list is. Proper styling will prevent scrollbar issues that you mentioned above.
EDIT: modifying PHP so that output matches latest fiddle -
while($row = oci_fetch_assoc($query))
{
echo "<div style='border-bottom: 2px solid #777A79; margin-left: -4px'>";
echo "<a href='#'>";
echo '<font>'.$row['ACCOUNT_TYPE'].'</font>';
echo "</a>";
echo "</div>";
}
The reason for the modification is because the PHP is essentially outputting HTML that is hard to work with in JavaScript. The OP is learning how to format ALL of his code, from back to front, so that it plays nicely together.

Creating a calender using php, javascript and mySQL

I have created a calender using php, javascript and mySQL.
The calender itself worked but once I attempted to add and view events on a particular day it refuses to load and I'm not too sure why. This example is taken from Sam's teach yourself PHP, MySQL and Apache all in one.
The code is as follows:
<?php
//$display = "";
$host = "xx";
$user = "xx";
$pass = "xx";
$db = "xx";
$mysqli = mysqli_connect($host, $user, $pass, $db);
// Check connection
define("ADAY", (60*60*24));
if ((!isset($_POST['month'])) || (!isset($_POST['year']))) {
$nowArray = getdate();
$month = $nowArray['mon'];
$year = $nowArray['year'];
} else {
$month = $_POST['month'];
$year = $_POST['year'];
}
$start = mktime (12, 0, 0, $month, 1, $year);
$firstDayArray = getdate($start);
?>
<!DOCTYPE html>
<html>
<head>
<title><?php echo "Calender: ".$firstDayArray['month']."
".$firstDayArray['year'] ?></title>
</head>
<style type="text/css">
table {
border: 1px solid black;
border-collapse: collapse;
}
th {
border: 1px solid black;
padding: 6px;
font-weight: bold;
background: #ccc;
}
td {
border: 1px solid black;
padding: 6px;
vertical-align: top;
width 100px;
}
</style>
<script type="text/javascript">
function eventWindow(url) {
event_popupWin = window.open(url, 'event', 'resizable=yes, scrollbars=yes, toolbar=no, width=400, height=400');
event_popupWin.opener = self;
}
</script>
<body>
<h1>Select a Month/Year Combination</h1>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<select name ="month">
<?php
$months = Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
for ($x=1; $x <= count($months); $x++) {
echo"<option value=\." $x ".\"";
if ($x == $month) {
echo " selected";
}
echo ">".$months[$x-1]."</option>";
}
?>
</select>
<select name="year">
<?php
for ($x=1990; $x<=2020; $x++) {
echo "<option";
if ($x == $year) {
echo " selected";
}
echo ">." $x ."</option>";
}
?>
</select>
<button type="submit" name="submit" value="submit">Go!</button>
</form>
<br/>
<?php
$days = Array("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat");
echo "<table><tr>\n";
foreach ($days as $day) {
echo "<th>$day</th>\n";
}
for ($count=0; $count < (6*7); $count++) { //initialise a variable called count
$dayArray = getdate($start);
if (($count% 7) == 0) {
if ($dayArray['mon'] != $month) {
break;
} else {
echo "</tr><tr>\n";
}
}
if ($count < $firstDayArray['wday'] || $dayArray['mon'] !=$month) {
echo "<td> </td>\n";
} else {
echo "<td>".$dayArray['mday']."</td>\n";
$start += ADAY;
}
}
if ($count < $firstDayArray['wday'] || $dayArray['mon'] !=$month) {
echo "<td> </td>\n";
} else {
$mysqli = mysqli_connect($host, $user, $pass, $db);
$chkEvent_sql = "SELECT event_title FROM calender_events WHERE
month(event_start) = '".$month."' AND
dayofmonth(event_start) = '".$dayArray['mday']."' AND
year(event_start) = '".$year."'
ORDER BY event_start";
$chkEvent_res = mysqli_query($mysqli, $chkEvent_sql);
or die(mysqli_error($mysqli));
if (mysqli_num_rows($chkEvent_res) > 0) {
while ($ev = mysqli_fetch_array($chkEvent_res)) {
$event_title .= stripslashes($ev['event_title']);
}
} else {
event_title = "";
}
echo "<td><a href=\"javascript:eventWindow('event.php?m= ".$month."&d=".$dayArray['mday']."&y=".$year."');/>".$dayArray['mday']."</a><br/> <br/>".$event_title."</td>\n";
unset($event_title);
$start += ADAY;
}
echo "</tr><table>";
?>
<body>
</html>
However, I believe the problem is with this section code:
$chkEvent_res = mysqli_query($mysqli, $chkEvent_sql);
or die(mysqli_error($mysqli));
if (mysqli_num_rows($chkEvent_res) > 0) {
while ($ev = mysqli_fetch_array($chkEvent_res)) {
$event_title .= stripslashes($ev['event_title']);
}
} else {
event_title = "";
}
echo "<td><a href=\"javascript:eventWindow('event.php?m= ".$month."&d=".$dayArray['mday']."&y=".$year."');/>".$dayArray['mday']."</a><br/> <br/>".$event_title."</td>\n";
Can anyone help? Thanks

Categories