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);
});
Related
I dont know whats wrong with the code , when i search from march 3 - march 12 , the march 12 transaction does not show.
Thank you very much , this would help me a lot.
What I want is to show the march 12 transaction , like the e.g. given below .
I want it to show transactions from this date , to the date chosen.
E.G.
This is where I input it
Picture 1
March 3-12 Sample
Picture 2
March 3-13 Sample
Picture 3
This is my code
<head>
<script>
$(function() {
$( "#tabs" ).tabs();
$('a[rel*=facebox]').facebox();
$( ".datepicker" ).datepicker();
});
$(document).ready(function(){
// Write on keyup event of keyword input element
$("#searchme").keyup(function(){
// When value of the input is not blank
if( $(this).val() != "")
{
// Show only matching TR, hide rest of them
$("#searchTbl tbody>tr").hide();
$("#searchTbl td:contains-ci('" + $(this).val() + "')").parent("tr").show();
}
else
{
// When there is no input or clean again, show everything back
$("#searchTbl tbody>tr").show();
}
});
});
// jQuery expression for case-insensitive filter
$.extend($.expr[":"],
{
"contains-ci": function(elem, i, match, array)
{
return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
</script>
<script>
function goBack() {
window.history.back();
}
</script>
<?php include('session.php'); ?>
<?php include('header.php'); ?>
<?php include('navbar.php'); ?>
<style>
.logo1 {
position: absolute;
right: 45%;
font-family: ""Lucida Console", Monaco, monospace";
top: 0%;
width: 80%;
background-color:#F8F8FF;
color: black;
text-align: center;
}
h3{
font-size:20px;
font-family: "Arial";
}
table {
width:60%;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: center;
}
#media print {
#page { margin: 0; }
body { margin: 1cm; }
#printPageButton {
display: none;
}
#e{
display:none;
}
.footer {
position: fixed;
left: 0;
font-family: ""Lucida Console", Monaco, monospace";
bottom: 0;
width: 100%;
background-color:#F8F8FF;
color: black;
text-align: center;
}
}
</style>
<?php
if(isset($_POST['salesbtn'])) {
$from = date('Y-m-d', strtotime($_POST['dayfrom']))." 00:00:01";
$to = date('Y-m-d', strtotime($_POST['dayto']))." 23:59:59";
?>
</head>
<body>
<div style="height:50px;"></div>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-0">
<br><img src="../upload/logo.jpg" class="logo1" style="height:50px; width:50px;" ><br>
<center><h1>Inventory Report</h1><h3> From (<?php echo $from; ?>) To (<?php echo $to; ?>)</h3>
<br>
<button id="printPageButton" class="btn btn-primary" onClick="window.print();">Print</button>
<button id="e" class="btn btn-primary" onclick="goBack()">Back</button>
<br><br>
<table width="100%" cellspacing="0" cellpadding="0" style="font-family:Arial Narrow, Arial,sans-serif; font-size:15px;" border="1">
<tr>
<th width="25%"><div align="center"><strong> Date </strong></div></th>
<th width="20%"><div align="center"><strong> User</strong></div></th>
<th width="20%"><div align="center"><strong>Action</strong></div></th>
<th width="20%"><div align="center"><strong>Product Name</strong></div></th>
<th width="20%"><div align="center"><strong>Quantity </strong></div></th>
</tr>
<?php
$iq=mysqli_query($conn,"select * from inventory left join product on product.productid=inventory.productid where inventory_date BETWEEN CAST('$from' AS DATE) AND CAST('$to' AS DATE) order by inventory_date desc ");
while($iqrow=mysqli_fetch_array($iq)){
?>
<tr>
<td class="hidden"></td>
<td><?php echo date('M d, Y h:i A',strtotime($iqrow['inventory_date'])); ?></td>
<td>
<?php
$u=mysqli_query($conn,"select * from `user` left join customer on customer.userid=user.userid left join supplier on supplier.userid=user.userid where user.userid='".$iqrow['userid']."'");
$urow=mysqli_fetch_array($u);
if($urow['access']==1){
echo "Admin";
}
elseif($urow['access']==2){
echo $urow['customer_name'];
}
else{
echo $urow['company_name'];
}
?>
</td>
<td align="right"><?php echo $iqrow['action']; ?></td>
<td align="right"><?php echo $iqrow['product_name']; ?></td>
<td align="right"><?php echo $iqrow['quantity']; ?></td>
</tr>
<?php
} }
?>
</tr> </td>
</br> </br>
<td style="color:red;" align="center"> Total:<?php
try {
require ("conn.php");
$stmt = $conn->prepare("SELECT SUM(sales_total) as 'test' FROM sales WHERE sales_date BETWEEN '$from' AND '$to'");
$stmt->execute();
$row=$stmt->fetch(PDO::FETCH_ASSOC);
echo $row['test'];
}
catch(PDOException $e) {
echo 'ERROR: ' . $e->getMessage();
}
?>
</table>
</div>
</div>
</div>
<?php include('script.php'); ?>
<?php include('modal.php'); ?>
<?php include('add_modal.php'); ?>
<script src="custom.js"></script>
The problem is occurring because you are casting your $to value as a DATE, which implies a TIME portion of 00:00:00. The BETWEEN then fails because '2018-03-12 11:31:25' is not <= '2018-03-12 00:00:00'
Changing the CAST of $to to a DATETIME should fix the problem. i.e.
$iq=mysqli_query($conn,"select * from inventory left join product on product.productid=inventory.productid where inventory_date BETWEEN CAST('$from' AS DATE) AND CAST('$to' AS DATETIME) order by inventory_date desc ");
The date range picker won't work properly in my inventory report, but for the sales report it works properly.
E.g. From 2018-03-07 to 2018-03-08, the 2018-03-08 does not show in the report.
Picture of the report:
Here is my code
<head>
<script>
$(function() {
$( "#tabs" ).tabs();
$('a[rel*=facebox]').facebox();
$( ".datepicker" ).datepicker();
});
$(document).ready(function(){
// Write on keyup event of keyword input element
$("#searchme").keyup(function(){
// When value of the input is not blank
if( $(this).val() != "")
{
// Show only matching TR, hide rest of them
$("#searchTbl tbody>tr").hide();
$("#searchTbl td:contains-ci('" + $(this).val() + "')").parent("tr").show();
}
else
{
// When there is no input or clean again, show everything back
$("#searchTbl tbody>tr").show();
}
});
});
// jQuery expression for case-insensitive filter
$.extend($.expr[":"],
{
"contains-ci": function(elem, i, match, array)
{
return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
</script>
<script>
function goBack() {
window.history.back();
}
</script>
<?php include('session.php'); ?>
<?php include('header.php'); ?>
<?php include('navbar.php'); ?>
<style>
.logo1 {
position: absolute;
right: 45%;
font-family: ""Lucida Console", Monaco, monospace";
top: 0%;
width: 80%;
background-color:#F8F8FF;
color: black;
text-align: center;
}
h3{
font-size:20px;
font-family: "Arial";
}
table {
width:60%;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: center;
}
#media print {
#page { margin: 0; }
body { margin: 1cm; }
#printPageButton {
display: none;
}
#e{
display:none;
}
.footer {
position: fixed;
left: 0;
font-family: ""Lucida Console", Monaco, monospace";
bottom: 0;
width: 100%;
background-color:#F8F8FF;
color: black;
text-align: center;
}
}
</style>
<?php
if(isset($_POST['salesbtn'])) {
$from=$_POST['dayfrom'];
$to=$_POST['dayto'];
?>
</head>
<body>
<div style="height:50px;"></div>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-0">
<br><img src="../upload/logo.jpg" class="logo1" style="height:50px; width:50px;" ><br>
<center><h1>Inventory Report</h1><h3> From (<?php echo $from; ?>) To (<?php echo $to; ?>)</h3>
<br>
<button id="printPageButton" class="btn btn-primary" onClick="window.print();">Print</button>
<button id="e" class="btn btn-primary" onclick="goBack()">Back</button>
<br><br>
<table width="100%" cellspacing="0" cellpadding="0" style="font-family:Arial Narrow, Arial,sans-serif; font-size:15px;" border="1">
<tr>
<th width="25%"><div align="center"><strong> Date </strong></div></th>
<th width="20%"><div align="center"><strong> User</strong></div></th>
<th width="20%"><div align="center"><strong>Action</strong></div></th>
<th width="20%"><div align="center"><strong>Product Name</strong></div></th>
<th width="20%"><div align="center"><strong>Quantity </strong></div></th>
</tr>
<?php
$iq=mysqli_query($conn,"select * from inventory left join product on product.productid=inventory.productid where inventory_date BETWEEN CAST('$from' AS DATE) AND CAST('$to' AS DATE) order by inventory_date desc ");
while($iqrow=mysqli_fetch_array($iq)){
?>
<tr>
<td class="hidden"></td>
<td><?php echo date('M d, Y h:i A',strtotime($iqrow['inventory_date'])); ?></td>
<td>
<?php
$u=mysqli_query($conn,"select * from `user` left join customer on customer.userid=user.userid left join supplier on supplier.userid=user.userid where user.userid='".$iqrow['userid']."'");
$urow=mysqli_fetch_array($u);
if($urow['access']==1){
echo "Admin";
}
elseif($urow['access']==2){
echo $urow['customer_name'];
}
else{
echo $urow['company_name'];
}
?>
</td>
<td align="right"><?php echo $iqrow['action']; ?></td>
<td align="right"><?php echo $iqrow['product_name']; ?></td>
<td align="right"><?php echo $iqrow['quantity']; ?></td>
</tr>
<?php
} }
?>
</tr> </td>
</table>
</div>
</div>
</div>
<?php include('script.php'); ?>
<?php include('modal.php'); ?>
<?php include('add_modal.php'); ?>
<script src="custom.js"></script>
EDITED:
This is my inventory.php
In here the user can input the range date from , to .
I dont know if this will help you guys.
I just want to know why it does not work well.
The problem is when i input 2018-03-08 - 2018-03-08 , the march 7 shows up but the march 8 wont show up.
<form action="total_inventory.php" method="post">
From: <input type="text" class="datepicker" placeholder="E.G.(2018-01-14)" name="dayfrom" required pattern="[0-9]{4}+[0-9]+[0-9]"> To: <input type="text" class="datepicker" placeholder="E.G.(2018-02-11)" name="dayto" required pattern="[0-9]{4}+[0-9]+[0-9]">
<input type="submit" value="Show Report" name="salesbtn" ></form>
EDITED:
Here is my inventory table
INVENTORY DATA TABLE
UPDATED:
This is the output , still does not show the transaction from march 7
Sample Updated
There is time also in your table so you have to search with time. means your from should be d-m-Y 00:00:01 and your to should be d-m-Y 23:59:59
Updated : concat your date variables like this.
// Assume `$_POST['dayfrom'] = 03/15/2018;`
// Assume `$_POST['dayto'] = 03/31/2018;`
$from = date('Y-m-d', strtotime($_POST['dayfrom']))." 00:00:01";
$to = date('Y-m-d', strtotime($_POST['dayto']))." 23:59:59";
echo $from; // if date is `03/15/2018` output like `2018-03-15 00:00:01`
echo $to; // if date is `03/31/2018` output like `2018-03-31 23:59:59`
// NOTE: check your date format is like this or not, then run the SQL query.
Updated Query:
$iq=mysqli_query($conn,"select * from inventory left join product on product.productid=inventory.productid where ( inventory_date BETWEEN CAST('$from' AS DATE) AND CAST('$to' AS DATE) ) order by inventory_date desc ");
i have this code:
<?php
$i=5;
while($i > 0){
echo '
<table width="500px" border="1">
<tr>
<td>
<button id="button">Show comments</button>
</td>
</tr>
<tr>
<td id="comments" style="display:none;height:300px;width:100%;"></td>
</tr>
</table>
<script type="text/javascript">
$("#button").toggle(
function (){
$("#button").text("Hide Comments");
document.getElementById("comments").style.display="inline";
},function (){
$("#button").text("Show Comments");
document.getElementById("comments").style.display="none";
}
);
</script>
<script type="text/javascript" src="jquery.js"></script>
';
$i--;
}
?>
When the show comments button is clicked the comment box should show up. It works for the first one. But it doesn't work for the others.What's wrong?
I'd just escape the php interpreter and print the HTML markup directly into the page. I'd also change the ids to classes, so we can more easily reuse them without quirky additional numbers.
<?php
$i=5;
while($i > 0):
?>
<table width="500px" border="1">
<tr>
<td><button class="button" data-clicked="0">Show comments</button></td>
</tr>
<tr>
<td class="comments" style="display:none;height:300px;width:100%;"></td>
</tr>
</table>
<?php
$i--;
endwhile;
?>
I don't know what the element with an ID of show is, but we'll just assume it was the button.
$(".button").click(function (){
var $this = $(this);
if(!$this.data('clicked')){
$this.text("Hide Comments");
$this.closest('table').find('.comments').css('display', 'inline');
$this.data('clicked', 1);
}else{
$this.text("Show Comments");
$this.closest('table').find('.comments').css('display', 'none');
$this.data('clicked', 0);
}
});
Don't print that javascript in a while loop in php, just include it in the head of the page, or in a separate file.
Edit
As indicated in a comment below,in jQuery 1.9 the toggle no longer works as you're intending to use it, as a work around, you can add a data attribute to the button, and check it each time we click.
<button class="button" data-clicked="0">
As you can see we've added the new data-clicked attribute.
In our JavaScript above, you can see that we've completely changed how it works. We perform our own if/else to check the data-clicked state.
It is generally good practice to separate code, markup and style declarations. As a matter of style, I prefer numbered IDs. I find they help with debugging. ymmv
I also like to animate changes so people can more easily follow a change.
<!doctype html>
<html>
<head>
<title>Button Testing 1 2 3</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style>
.comment {
display: none;
height: 0px;
width: 500px;
}
td {
width: 500px;
border: 1px solid #555;
border-collapse: collapse;
}
</style>
</head>
<body>
<?
$j = 0;
while ($j < 5 ) {
?>
<table>
<tr>
<td>
<button id="button_<?= $j ?>" class="button">Show comments</button>
</td>
</tr>
<tr>
<td class="comment"><span id="comment_<?= $j ?>">J = <?= $j ?></span></td>
</tr>
</table>
<?
$j++;
} ?>
<script type="text/javascript">
$(document).ready(function(){
$(".button").click(function(){
var id = $(this).attr('id');
var j = id.substr(id.indexOf('_') +1);
if ($(this).hasClass('revealed')) {
$(this).removeClass('revealed').text('Show Comments');
$('#comment_'+j).removeClass('revealed').parent().animate({'height' : 0}, function(){$(this).css({'display': 'none'})});
} else {
$(this).addClass('revealed').text('Hide Comments');
$('#comment_'+j).addClass('revealed').parent().css({'display': 'inline'}).animate({'height' : '300px'});
}
});
});
</script>
</body>
</html>
thanks you for paying attention on my issue here. I am a total beginner for PHP and jQuery programming. Now I am trying to create a very simple function to show and hide multi-layer divs. For example, when you click "show div 1", the corresponding content under div 1 will be shown (this is div 1 contents). After that you still can click the content under div 1 to show lower level contents (graph1). I got all these worked properly. However, when I click "show div 2", the div 2 contents (this is div 2 contents) will be shown but the lower level contents of div 1 is still there (graph1). What I want is the lower content of div 1 is shown, and then I click show div 2, the lower content of div 1 will be hidden and only show div 2 contents. The following is my codes, thank you guys in advance~
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>show and hide try</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
function showStock(n)
{
document.getElementById("div"+n).style.display = 'block'
return false;
}
function hideStock(n)
{
for (x=1; x<=10; x++)
{
document.getElementById("div"+x).style.display = 'none'
}
document.getElementById(n).style.display = 'block'
return false;
}
function toggleStock(id)
{
for (x=1; x<=3; x++)
{
document.getElementById("div"+x).style.display = 'none';
}
document.getElementById(id).style.display = 'block';
}
</script>
<script>
function showGraph(m)
{
document.getElementById("graph"+m).style.display = 'block'
return false;
}
function hideGraph(m)
{
for (y=1; y<=10; y++)
{
document.getElementById("graph"+y).style.display = 'none'
}
document.getElementById(m).style.display = 'block'
return false;
}
function toggleGraph(id)
{
for (y=1; y<=3; y++)
{
document.getElementById("graph"+y).style.display = 'none';
}
document.getElementById(id).style.display = 'block';
}
</script>
</head>
<body>
<table width="50%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>
show div 1
show div 2
show div 3
</td>
</tr>
</table>
<div id="div1" style="display: none; border:1px solid black;">
<table border=1 width=25% cellspacing="0" cellpadding="0">
<tr><td>this is div 1 contents</td></tr>
</table>
</div>
<div id="div2" style="display: none; border:1px solid black;">
<table border=1 width=25% cellspacing="0" cellpadding="0">
<tr><td>this is div 2 contents</td></tr>
</table>
</div>
<div id="div3" style="display: none; border:1px solid black;">
<table border=1 width=25% cellspacing="0" cellpadding="0">
<tr><td>this is div 3 contents</td></tr>
</table>
</div>
<div id="graph1" style="display: none; border:1px solid black;">graph1</div>
<div id="graph2" style="display: none; border:1px solid black;">graph2</div>
<div id="graph3" style="display: none; border:1px solid black;">graph3</div>
</body>
</html>
Replace your code with this, Hope it will help you
function toggleStock(id)
{
for (x=1; x<=3; x++)
{
document.getElementById("div"+x).style.display = 'none';
}
document.getElementById(id).style.display = 'block';
toggleGraph(id);
}
I want to create a banner scrolling function for my homepage. I am not too sure of which programming language to use here. I want to code something similar to: http://www.squidfaceandthemeddler.com/. But I want the footer to remain at the same position while the user scroll the table. Is it possible to get that result? I have create a simple tables and 2 images for the user to click on
here is my code for the tables:
<div id="banner" style="height:750px; width:600px; overflow:scroll;" >
<table width="750px" height="600px">
<tr>
<td><img src="banner1.png"/></td>
</tr>
</table>
<table width="750px" height="600px">
<tr>
<td><img src="banner2.png"/></td>
</tr>
</table>
<table width="750px" height="600px">
<tr>
<td><img src="banner3.png"/></td>
</tr>
</table>
</div>
and this is the upwards and downwards button for the scrolling:
<table width="750px" height="30px">
<tr>
<td align="right"><img src="images/up_arrow.png"/><img src="images/down_arrow.png"/></td>
</tr>
</table>
If you put the contents inside two div tags you can use CSS to clip the
outer div and "scroll" the inner div by scripting its CSS "top" value, thus:
<html><head><style>
#contents{
position: relative; top: 0; left: 0; width: 100px; height: auto;}
#scrollable{ overflow: hidden; width: 100px; height: 100px; border: 1px
solid black;
}
</style>
<script>
var t = 0;
function up()
{
t += 10;
with(document.getElementById("contents"))
{
if (t > 0)
t = 0;
if(style)
style.top = t + "px";
else
setAttribute("style", "top: " + t + "px");
}
}
function down()
{
t -= 10;
with(document.getElementById("contents"))
{
if(t < -clientHeight)
t = -clientHeight;
if(style)
style.top = t + "px";
else
setAttribute("style", "top: " + t + "px");
}
}
</script></head>
<body><table><tr><td>up</td>
<td rowspan="2"><div id="scrollable">
<div id="contents">scrolling content scrolling content scrolling content
scrolling content scrolling content scrolling content scrolling content
scrolling content scrolling content scrolling content scrolling content
</div></div>
</td></tr><tr><td>
down</td></tr></table>
</body></html>
take the help of this edit your code
Have a look at jquery scrolltop: http://api.jquery.com/scrollTop/. I would fix the tables width to a certain height, like you already did and then:
$('#buttonUpID').click(function () {
var currentScrollTop = $('body').scrollTop();
$('body').scrollTop(currentScrollTop - 600);
});
$('#buttonDownID').click(function () {
var currentScrollTop = $('body').scrollTop();
$('body').scrollTop(currentScrollTop + 600);
});