I am creating an application in which a folder gets created by the username, and inside that folder, another folder gets created dynamically called Profile_Pics.
I have used Ajax Script also.
Its just a bit of Facebook album type application. Now the problem is that, for this thing I am using session, and user can created other folders also say like "My_Pics" inside his folder. The folder is for storing photos.
The path of the created album inside username folder is like this
Candidate_Pics/sex/Username/album_name
Example:
If a male of username saz26 registers first, then the folder Profile_pics will be created by default.
Candidate_Pics/Male/saz26/Profile_pics
If he creates another album say My_Pics then:
Candidate_Pics/Male/saz26/My_pics
Where under My_Pics he can store other pics.
Now I have created this page, and I need to work with session. And also I use session variable.
Here's my photos.php file:
<?php
session_start();
ob_start();
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" media="screen" href="CSS/main.css" />
<link rel="stylesheet" type="text/css" media="screen" href="CSS/style.css" />
<script type="text/javascript" src="AJAX/AjaxCreateAlbum.js"></script>
<script>
function showalbum()
{
document.getElementById('AlbumDiv').style.display = "block";
document.getElementById('fade').style.display = "block"
return false;
}
</script>
</head>
<body>
<div id="pictures">
<h2>Photos</h2>
<form id="picture_form" name="picture_form" method="post" action="javascript:getfolder(document.getElementById('picture_form'));">
<table align="center" width="650" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="50px" align="center"/>
<td width="100px" align="center">
<label for="album_name">Create Album::</label>
</td>
<td width="50px" align="center"/>
<td width="100px" align="center">
<input type="text" name="album_name" id="album_name" class="textfield" style="width: 100px;"/>
</td>
<td width="50px" align="center"/>
<td width="100px" align="center">
<input type="submit" name="submit" id="submit" class="button" value="Create Album" />
</td>
<td width="50px" align="center"/>
<td width="100px" align="center">
<div id="album_report"></div>
</td>
<td width="50px" align="center"/>
</tr>
<tr>
<td colspan="9" height="20px"/>
</tr>
</table>
<?php
$folder=array();
if(is_dir("Candidate_Pics/". "$_SESSION[sex]". "/" . "$_SESSION[logged_user]"))
{
$dir=opendir("Candidate_Pics/". "$_SESSION[sex]". "/" . "$_SESSION[logged_user]");
$nofiles=0;
while ($file = readdir($dir))
{
if ($file != '.' && $file != '..')
{
$nofiles++;
$files[$nofiles]=$file;
}
}
closedir($dir);
}
/* populate sample data */?>
<?php
/* how many columns */
$column_number='3';
/* html table start */
?><table border="1" cellspacing="5" cellpadding="5" width="650px" align="center"
><?php
$recordcounter=1; /* counts the records while they are in loop */
foreach($files as $record) {
/* decide if there will be new Table row (<TR>) or not ... left of division by column number is the key */
if($recordcounter%$column_number==1){ echo "<tr>"; }
?>
<td width="200px" align="center">
<?php echo $record;?><br/>
<?php
$_SESSION['album_name']="Candidate_Pics/$_SESSION[sex]/$_SESSION[logged_user]/$record";
echo "$_SESSION[album_name]"; ?>
<a href="javascript:void(0)" onClick="showalbum();" ><img src="Images/folder.png" width="200px"/></a><br/>
<input type="button" name="delete" id="delete" value="delete" class="button"/>
</td>
<?php
/* decide if there will be end of table row */
if($recordcounter%$column_number==0){ echo "</tr>"; }
$recordcounter++; /* increment the counter */
}
if(($recordcounter%$column_number)!=1){ echo "</tr>"; }
?></table>
</form>
</div>
<div id="AlbumDiv" class="white_content">
<table align="center" cellpadding="0" cellspacing="0" border="0" width="382px">
<tr>
<td height="16px">
<a href="javascript:void(0)"
onclick="document.getElementById('AlbumDiv').style.display =
'none';document.getElementById('fade').style.display='none'">
<img src="images/close-icon.png" style="border-style: none; border-color: inherit;
border-width: 0px; height: 17px; width: 16px;" align="right" /></a>
</td>
</tr>
<tr>
<td>
<?php echo "$_SESSION[album_name]";?>
</td>
</tr>
<tr>
<td height="16px"/>
</tr>
</table>
</div>
<div id="fade" class="black_overlay">
</div>
</body>
</html>
the problem is that the line
echo "$_SESSION[album_name]";
inside the foreach loop is giving rite result for each record(rather say folder),
but the line
echo "$_SESSION[album_name]";
inside the AlbumDiv(used for the lightbox),
is only giving the result with Profile_pics, i.e. "Candidate_Pics/Male/saz26/Profile_pics"
no matter which ever folder image i click...
following is the AjaxCreateAlbum.js script
var http_request = false;
function makePOSTalbum(url, parameters)
{
http_request = false;
if (window.XMLHttpRequest)
{
// Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType)
{
// set type accordingly to anticipated content type
//http_request.overrideMimeType('text/xml');
http_request.overrideMimeType('text/html');
}
}
else if (window.ActiveXObject)
{ // IE
try
{
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
}
}
if (!http_request)
{
alert('Cannot create XMLHTTP instance');
return false;
}
http_request.onreadystatechange = alertAlbumCreated;
http_request.open('POST', url, true);
http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http_request.setRequestHeader("Content-length", parameters.length);
http_request.setRequestHeader("Connection", "close");
http_request.send(parameters);
}
function alertAlbumCreated()
{
if (http_request.readyState == 4)
{
if (http_request.status == 200)
{
//alert(http_request.responseText);
result = http_request.responseText;
document.getElementById('album_report').innerHTML = result;
}
else
{
alert(http_request.status);
}
}
}
function getfolder(obj)
{
alert("huhu");
var poststring = "album_name=" + encodeURI( document.getElementById("album_name").value );
alert(poststring);
makePOSTalbum('createalbum.php', poststring);
}
And following is the createalbum.php script:
<?php
session_start();
if(mkdir("Candidate_Pics/$_SESSION[sex]/$_SESSION[logged_user]/".$_POST['album_name']))
echo "done";
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
And following is the stylesheet file:
.black_overlay
{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100.7%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}
.white_content
{
display: none;
position: fixed;
top: 37%;
left: 32%;
width: 382px;
padding: 0px;
border: 0px solid #a6c25c;
background: url(loginpanel.png);
z-index: 1002;
overflow: auto;
}
.headertext
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #f19a19;
font-weight: bold;
}
.textfield
{
border: 1px solid #a6c25c;
width: 100px;
border : 1px solid #999;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
_border-radius: 5px;
}
.dropdown
{
border: 1px solid #a6c25c;
border : 1px solid #999;
border-radius: 5px;
}
.button2
{
background-color: #a6c25c;
color: White;
font-size: 11px;
font-weight: bold;
border: 1px solid #7f9db9;
width: 100px;
}
.button
{
zoom: 1;
background: url(button.png);
color: White;
font-size: 11px;
font-weight: bold;
border: 1px solid #7f9db9;
-khtml-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
#border-radius: 5px;
_border-radius: 5px;
border-radius: 5px;
}
#loading{
text-align: center;
visibility: hidden;
}
#content{
color: #000000;
margin: 0 0 20px 0;
line-height: 1.3em;
font-size: 14px;
}
.text
{
border: 1px solid #a6c25c;
border : 1px solid #999;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
_border-radius: 5px;
}
/******* TOP *******/
#topmenu{
margin: 0 0;
padding: 0 0 0 0;
background: url(button.png);
}
/******* /TOP *******/
/******* MENU *******/
#topmenu #menu_main{
float: left;
list-style-type: none;
margin: 0px 0 0px 0px;
}
#topmenu #menu_main li{
float: left;
text-transform: uppercase;
color: #000099;
margin-left: 50px;
margin-right: 50px;
}
#topmenu #menu_main li:hover{
color: #6fa5fd;
cursor: pointer;
}
/******* /MENU *******/
/******* FOOTER *******/
#footer{
background: #efefef;
border: 1px solid #d0ccc9;
padding: 5px;
color: #7e7e7e;
font-size: 11px;
text-align: right;
}
/******* /FOOTER *******/
If I'm reading this correctly, your session variable is being set multiple times within a foreach loop, and then later called. Every time you write to that session variable within a loop, it overwrites the previous value, so once that loop is done, the only value the session variable will hold is the very last one from the loop.
Luckily you can remedy that pretty easily, since you're writing a javascript function call in an <a> tag in the next line. You can change that to echo the album name (while you're still in the loop) as what will on the client side be a Javascript argument.
<a href="javascript:void(0)" onClick="showalbum();" ><img src="Images/folder.png" width="200px"/></a><br/>
Becomes:
<a href="javascript:void(0)" onClick="showalbum('<?php echo $_SESSION['album_name']; ?>');" ><img src="Images/folder.png" width="200px"/></a><br/>
Then all you have to do is change your showalbum function to accept an argument, and use it to set the content of the intended <td> element. For example:
function showalbum(album_name)
{
document.getElementById('AlbumDiv').style.display = "block";
document.getElementById('fade').style.display = "block"
document.getElementById('albumName').innerHTML = album_name; // this line added
return false;
}
And in the PHP,
<td>
<?php echo "$_SESSION[album_name]";?>
</td>
Becomes:
<td id="albumName"></td>
Related
I am trying to display client details as a pdf using dompdf from HTML. Also added a header and footer in the pdf. Some contents in the pdf are displayed under the footer section.
This is the Image of pdf generated, here the data under Other Details are displayed under the footer section. How can change the alignment of content into the next page with a header and footer?
This is the code have written, give a solution
<html>
<head>
<title>Prescription</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
padding: 0;
margin: 0;
font-family: "Times New Roman", Times, serif;
}
header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 200px;
padding: 10px 50px;
background-color: #ccc;
border-bottom: 1px solid #1f1f1f;
z-index: 1000;
}
.text-center {
text-align: center;
}
.phone {
float: right;
margin-bottom: 10px;
margin-right: 150px;
}
.phone h4 {
text-align: center;
right: 50px;
}
main {
margin-top: 200px;
padding: 10px 50px;
}
.after-header {
height: 30px;
padding: 10px 0;
}
.patient-id {
float: left;
}
.date-day {
float: right;
}
.page-header {
margin-top: 5px;
padding: 5px;
background-color: aqua;
}
.page-header h2 {
font-family: monospace;
font-size: 20px;
text-align: center;
}
footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 50px;
border-bottom: 1px solid #1f1f1f;
border-top: 1px solid #1f1f1f;
z-index: 1000;
}
footer h3 {
padding-left: 50px;
}
.details {
margin-top: 0;
padding: 2px 0;
}
table {
margin: 5px 0;
width: 100%;
border-top: 1px dotted #1f1f1f;
border-right: 1px dotted #1f1f1f;
}
td {
text-align: justify;
padding: 10px;
border-bottom: 1px dotted #1f1f1f;
border-left: 1px dotted #1f1f1f;
}
table tr>td:first-child {
border-left: none;
}
label {
font-weight: bold;
font-size: 15px;
}
</style>
</head>
<body>
<header>
<div class="text-center">
<h1>SPECIALITY CLINIC</h1>
<h2>xxxxxxxx</sub>
</h2>
<h3>Pediatrition</h3>
</div>
<div class="phone">
<h4>Phone: xxxxx</h4>
</div>
</header>
<footer>
<h3>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.</h3>
</footer>
<main>
<div class="after-header">
<div class="patient-id">
<h3>Patient Id: 1001</h3>
</div>
<div class="date-day">
<h3>Date: 17/05/2019</h3>
</div>
</div>
<div class="page-header">
<h2>Patient Details</h2>
<hr>
</div>
<div class="details">
<div>
<div style="background-color: #f2f2f2; padding: 5px;">
<h3>General Details</h3>
</div>
</div>
<table>
<col width="10%">
<col width="20%">
<col width="10%">
<col width="10%">
<col width="30%">
<tr>
<td><label>Name:</label></td>
<td colspan="3"><label>Agreesh V S</label></td>
<td rowspan="4"><img src="img.jpg"></td>
</tr>
<tr>
<td><label>Age:</label></td>
<td><label>24</label></td>
<td><label>Gender: </label></td>
<td><label>Male</label></td>
</tr>
<tr>
<td><label>Phone: </label></td>
<td colspan="3"><label>9876543210</label></td>
</tr>
<tr>
<td><label>Email: </label></td>
<td colspan="3"><label>9876543210</label></td>
</tr>
</table>
<div>
<div style="background-color: #f2f2f2; padding: 5px;">
<h3>Personal Details</h3>
</div>
</div>
<table>
<col width="50%">
<col width="50%">
<tr>
<td><label>Date Of Birth:</label></td>
<td colspan="3"><label>18/04/1995</label></td>
</tr>
<tr>
<td><label>Weight</label></td>
<td><label>65 KG</label></td>
</tr>
<tr>
<td><label>Weight at Birth </label></td>
<td colspan="3"><label>2.5 KG</label></td>
</tr>
<tr>
<td><label>Blood Group </label></td>
<td colspan="3"><label>B+ve</label></td>
</tr>
</table>
<div>
<div style="background-color: #f2f2f2; padding: 5px;">
<h3>Other Details</h3>
</div>
</div>
<table>
<col width="50%">
<col width="50%">
<tr>
<td><label>Date Of Birth:</label></td>
<td colspan="3"><label>18/04/1995</label></td>
</tr>
<tr>
<td><label>Weight</label></td>
<td><label>65 KG</label></td>
</tr>
<tr>
<td><label>Weight at Birth </label></td>
<td colspan="3"><label>2.5 KG</label></td>
</tr>
<tr>
<td><label>Blood Group </label></td>
<td colspan="3"><label>B+ve</label></td>
</tr>
</table>
</div>
</main>
</body>
</html>
Keep in mind that when Dompdf positions content it is based on the bounds of the body. If you have a header/footer on the page you need to push it outside the bounds of the body or it will overlap the document content.
A small tweak to your CSS should fix things. First, add a page margin to accommodate your header. Something along the lines of:
#page {
margin: 220px 1in 1in 1in;
}
Then modify the top positioning of your header to push it into that space:
header {
position: fixed;
top: -200px;
left: 0;
right: 0;
height: 200px;
padding: 10px 50px;
background-color: #ccc;
border-bottom: 1px solid #1f1f1f;
z-index: 1000;
}
I've been working on a Library Management Sys in PHP.
It has a page (collect_fine.php) where I've been calling all the fields related to the each & every member from the DB in a loop.
Along with all the records, I'm also echoing a button to activate a modal on getting click.
The code is as below -
do{?>
<?php
$br_id = $row['Member_id'];
?>
<tr>
<td style="outline:1px dotted #000000" height="auto" width="80px" align="center"><?php echo $row['Member_id']?></td>
<?php
$mem_id = $row['Member_id'];
?>
<td style="outline:1px dotted #000000" height="auto" width="340px" align="justify"> <?php echo $row["Member_name"]?></td>
<td style="outline:1px dotted #000000" height="auto" width="130px" align="center"><?php echo $row['Class']?></td>
<td style="outline:1px dotted #000000" height="auto" width="150px" align="center"><?php echo $row['Contact']?></td>
<td style="outline:1px dotted #000000" height="auto" width="120px" align="center"><?php
$count=mysqli_query($conn,"SELECT COUNT(Book_id) AS total_things FROM issued_books WHERE Borrower_id = '$br_id' AND Date_returned = '0'");
$cnt = mysqli_fetch_array($count,MYSQL_ASSOC);
$num_results = $cnt["total_things"];
echo $num_results;
?></td>
<td style="outline:1px dotted #000000" height="auto" width="80" align="center"><?php echo $row['Fine_Amt']?></td>
<td style="outline:1px dotted #000000" width="120px" align="center">
<?php
date_default_timezone_set('Asia/Kolkata');
$date = date('Y-m-d H:i:s');
if($row['Fine_Amt']>0)
{
echo '<style>
#media screen {
#printSection {
display: none;
}
}
#media print {
body * {
visibility:hidden;
}
#printSection, #printSection * {
visibility:visible;
}
#printSection {
position:absolute;
left:0;
top:0;
}
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
<button id="myBtn">Collect Fine</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>';
echo '<p><h1>NTHS eLibrary</h1></br>
<h2>Fine Reciept of '.$row['Member_name'].'</h2></br>
<div align="center">';
?>
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
<?php }while($row=mysqli_fetch_array($Result));?>
The above code works perfectly fine but only for the top row :(
What could possibly the reasons for this. Please help
In HTML, 'id' attribute should be unique. You are trying to set same 'id' to all buttons. Try to set button id dynamically.
I have the below Table with HTML when i click the button(update) in the table row , the particular row values i.e the button belongs to which row the respected row values only insert or update in a table.
<script type = "text/javascript" >
var table = document.getElementsByTagName("table")[0];
var tbody = table.getElementsByTagName("tbody")[0];
tbody.onclick = function (e) {
e = e || window.event;
var data = [];
var target = e.srcElement || e.target;
while (target && target.nodeName !== "TR") {
target = target.parentNode;
}
if (target) {
var cells = target.getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
data.push(cells[i].innerHTML);
}
}
alert(data);
};
</script>
<script type = "text/javascript" >
history.pushState(null, null, 'new2.html');
window.addEventListener('popstate', function(event) {
history.pushState(null, null, 'new2.html');
});
</script>
<style>
<script>
$(function() {
var pickers = {};
$('table tr').editable({
dropdowns: {
Aex: ['Automation', 'Manual']
},
edit: function(values) {
$(".edit i", this)
.removeClass('fa-pencil')
.addClass('fa-save')
.attr('title', 'Save');
pickers[this] = new Pikaday({
field: $("td[data-field=birthday] input", this)[0],
format: 'MMM D, YYYY'
});
},
save: function(values) {
$(".edit i", this)
.removeClass('fa-save')
.addClass('fa-pencil')
.attr('title', 'Edit');
if (this in pickers) {
pickers[this].destroy();
delete pickers[this];
}
},
cancel: function(values) {
$(".edit i", this)
.removeClass('fa-save')
.addClass('fa-pencil')
.attr('title', 'Edit');
if (this in pickers) {
pickers[this].destroy();
delete pickers[this];
}
}
});
});
</script><script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
body {
margin-bottom: 100px;
}
.row {
margin-bottom: 20px;
}
pre {
margin-top: 0;
}
.button.button-small {
height: 30px;
line-height: 30px;
padding: 0px 10px;
}
td input[type=text], td select {
width: 100%;
height: 30px;
margin: 0;
padding: 2px 8px;
}
th:last-child {
text-align: right;
}
td:last-child {
text-align: right;
}
td:last-child .button {
width: 30px;
height: 30px;
text-align: center;
padding: 0px;
margin-bottom: 0px;
margin-right: 5px;
background-color: #FFF;
}
td:last-child .button .fa {
line-height: 30px;
width: 30px;
}
body {
font: 400 15px Lato, sans-serif;
line-height: 1.8;
color: #818181;
}
h2 {
font-size: 24px;
text-transform: uppercase;
color: #303030;
font-weight: 600;
margin-bottom: 30px;
}
h4 {
font-size: 19px;
line-height: 1.375em;
color: #303030;
font-weight: 400;
margin-bottom: 30px;
}
.jumbotron {
color: #fff;
padding: 100px 55px;
font-family: Montserrat, sans-serif;
height:500px;
background-image: url(header.jpg);
background-repeat:no-repeat;
background-attachment: fixed;
background-position: center;
}
.container-fluid {
padding: 60px 50px;
}
.bg-grey {
background-color: #f6f6f6;
}
.logo-small {
color: #0099ff;
font-size: 50px;
}
.logo-small1 {
color: #0099ff;
font-size: 20px;
}
.logo {
color: #0099ff;
font-size: 200px;
}
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail img {
width: 100%;
height: 100%;
margin-bottom: 10px;
}
#section {
width:350px;
padding:10px;
}
.carousel-control.right, .carousel-control.left {
background-image: none;
color: #39ac73;
}
.carousel-indicators li {
border-color: #39ac73;
}
.carousel-indicators li.active {
background-color: #39ac73;
}
.item h4 {
font-size: 19px;
line-height: 1.375em;
font-weight: 400;
font-style: italic;
margin: 70px 0;
}
.item span {
font-style: normal;
}
.panel {
border: 1px solid #39ac73;
border-radius:0 !important;
transition: box-shadow 0.5s;
}
.panel:hover {
box-shadow: 5px 0px 40px rgba(0,0,0, .2);
}
.panel-footer .btn:hover {
border: 1px solid #39ac73;
background-color: #fff !important;
color: #39ac73;
}
.panel-heading {
color: #fff !important;
background-color: #39ac73 !important;
padding: 25px;
border-bottom: 1px solid transparent;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.panel-footer {
background-color: white !important;
}
.panel-footer h3 {
font-size: 32px;
}
.panel-footer h4 {
color: #aaa;
font-size: 14px;
}
.panel-footer .btn {
margin: 15px 0;
background-color: #39ac73;
color: #fff;
}
.navbar {
margin-bottom: 0;
background-color: #fff;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
font-family: Montserrat, sans-serif;
min-height: 70px;
}
.navbar li a, .navbar .navbar-brand {
color: #39ac73 !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #39ac73 !important;
background-color: #e5fff7 !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
footer .glyphicon {
font-size: 20px;
margin-bottom: 20px;
color: #39ac73;
}
.slideanim {visibility:hidden;}
.slide {
animation-name: slide;
-webkit-animation-name: slide;
animation-duration: 1s;
-webkit-animation-duration: 1s;
visibility: visible;
}
#keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
#-webkit-keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
#media screen and (max-width: 768px) {
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
.btn-lg {
width: 100%;
margin-bottom: 35px;
}
}
#media screen and (max-width: 480px) {
.logo {
font-size: 150px;
}
}
<html lang="en">
<head>
<meta charset="utf-8">
<title>Windows</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<link href="http://code.jquery.com/jquery-1.11.3.min.js" >
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<link rel="stylesheet" href="css/pikaday.css" >
<link rel="stylesheet" href="css/pikaday-skeleton.css" >
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<div class="container-fluid text-center">
<h1>Windows Data</h1>
<table id="tab_logic" class="table">
<thead >
<tr class="info">
<th>S.No</th>
<th>Machine Name</th>
<th>IP</th>
<th>Host name</th>
<th>Tester Name</th>
<th>Installation Plan</th>
<th>OS Version</th>
<th>MI Version</th>
<th>AUT/MAT</th>
<th>Reimage</th>
<th>Edit</th>
<th>Update</th>
<th>Mail</th>
</tr>
</thead>
<tbody>
<tr id='addr0' data-id="1">
<td id="sn" data-field="S.No">1</td>
<td data-field="Machine Name">sxsxsdsd</td>
<td data-field="IP">sssss</td>
<td data-field="Host name">zxzxzx</td>
<td data-field="Tester Name">Unassigned</td>
<td data-field="Installation Plan">Null</td>
<td data-field="OS Version">Windows 8.1 Pro</td>
<td data-field="MI Version">Null</td>
<td data-field="Aex">Manual</td>
<td data-field="Reimage">21/7/2015</td>
<td><a class="button button-small edit" title="Edit"><i class="fa fa-pencil"></i></a></td>
<td><button type="submit" onclick="one()" class="btn btn-primary"><span class="glyphicon glyphicon-folder-open"></span></button></td>
<td ><button type="submit" class="btn btn-info"><span class="glyphicon glyphicon-send"></span></button></td>
</tr>
<tr data-id="2">
<td data-field="S.No">2</td>
<td data-field="Machine Name">sdsdsdsd</td>
<td data-field="IP">dsdsdsdsd</td>
<td data-field="Host name">sdsdsdsdsd</td>
<td data-field="Tester Name">dsdsdsdsd</td>
<td data-field="Installation Plan">[ For OLS ] MI PC offline</td>
<td data-field="OS Version">Windows 8.1 Pro</td>
<td data-field="MI Version">Null</td>
<td data-field="Aex">Manual</td>
<td data-field="Reimage">21/7/2015</td>
<td>
<a class="button button-small edit" title="Edit">
<i class="fa fa-pencil"></i>
</a>
</td>
<td><button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-folder-open"></span></button></td>
<td><button type="submit" class="btn btn-info"><span class="glyphicon glyphicon-send"></span></button></td>
</tr>
<tr data-id="3">
<td data-field="S.No">3</td>
<td data-field="Machine Name">sdsdsdsd</td>
<td data-field="IP">dsdsdsd</td>
<td data-field="Host name">sdsdsdsd</td>
<td data-field="Tester Name">Unassigned</td>
<td data-field="Installation Plan">Null</td>
<td data-field="OS Version">Windows 8.1 Pro</td>
<td data-field="MI Version">Null</td>
<td data-field="Aex">Manual</td>
<td data-field="Reimage">21/7/2015</td>
<td>
<a class="button button-small edit" title="Edit">
<i class="fa fa-pencil"></i>
</a>
</td>
<td><button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-folder-open"></span></button></td>
<td><button type="submit" class="btn btn-info"><span class="glyphicon glyphicon-send"></span></button></td>
</tr>
</tbody>
</table>
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="Pikaday/pikaday.js"></script>
<script src="build/table-edits.min.js"></script>
</body>
</html>
Use for loop to display html table, and use index in the button.
For example, if you want to delete a meeting from the table by clicking delete button next to it, then you can do something like this:
Example format
meeting1 DELETE(button)
meeting2 DELETE(button)
meeting3 DELETE(button)
The delete button will be same only the url will be changing.
echo "<tr>
<th>Status</th>
<th>Title</th>
<th>Scheduled By</th>
<th>Scheduled Date</th>
<th>Start Time</th>
<th>End Time</th>
<th>Actions</th>
</tr>";
for ($n = 0; $n < count($meeting_array); $n++) {
$meetingname = $meeting_array[$n]; //contains meeting names.
echo "<td style= \"color : darkgoldenrod; text : strong;\" >" . $status . "</td>";
echo "<td>" . $meetingname2 . "</td>";
echo "<td>" . $extractedname . "</td>";
echo "<td>" . $mydate . "</td>";
echo "<td>" . $mystarttime . "</td>";
echo "<td>" . $myendtime . "</td>";
echo"<td>";
// pass meeting name in url.
echo"<a href=\"View_Meeting.php?id={$meetingname}\" <img src=\"../img/read1.png\" alt=\"Read\" /> ";
echo "</td>";
}
echo "</tr>";
I am loading a PHP page with a table using DataTables fixed header functionality. I can not seem to get the table to be at 100% of page load while page renders. It starts off as compressed (while loading) then expanded (once page renders).
I tried to resolve this by output buffering in php but can not get the effect of compression then expansion to go away.
Initialization Code (At Bottom of Script)
$(document).ready(function() {
$('#summary_table').DataTable( {
"scrollY": 400,
"scrollX": true,
"bSort": false,
"bPaginate": false,
"autoWidth": false
} );
$(".dataTables_wrapper").css("width","100%");
});
EDIT:
(Table is compressed during load but then goes to 100%.)
PHP
<html>
<head>
<title>Action Item Summary</title>
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
<style>
thead th {
background-color:#0038a8;
font-weight: bold;
font-style: italic;
color: white;
text-align: left;
}
table:not(#header):not(#menu):not(#find) {
background-color: white;
width: 100%;
}
td {
width: auto;
min-width: auto;
white-space: nowrap;
}
input[type='text'] {
width: 50%;
min-width: 100%;
}
span {
white-space: nowrap;
}
span.late{
color: red;
}
thead tr td a{
color: white;
}
th a:hover
{
cursor: pointer;
text-decoration: underline;
}
div.dataTables_wrapper {
width: 100%;
margin: 0 auto;
}
div.dataTables_scrollBody table#summary_table {
width: 100% !important;
}
table.dataTable tr.odd { background-color: #dae1e9; }
table.dataTable tr.even { background-color: white; }
</style>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../js/table.js"></script>
</head>
<body>
<? $pageTitle="All Action Items (".count($resAll).")"; include_once('../shared/pageheader.php'); ?>
<?if (isset($_SESSION['filteron']) && $_SESSION['filteron'] == true):?><div style="position:relative; float:right; display: inline; font-weight: bold; color:red; font-size: 12pt; background-color: lightgray; margin-right: 10"> Filter On </div><br /><?endif;?>
<form method="POST" action="/actionitems/viewactionitem.php">
<table id="find" border="1">
<tr>
<td class="label">Find Action Item</td>
<td style="width:100 !important"><input type="text" id="id" name="id" value=""></input></td>
<td><input type="submit" value="View" /></td>
<td><input type="button" value="Find" onclick="jumpTo($('#id').val())"+/></td>
</tr>
</table>
</form>
<table style="background-color: transparent">
<tr>
<td id="left" align="left">
<? if($_SESSION['userrole'] == 'Admin'): ?>[<a style="text-decoration: underline; color: black" href="newactionitem.php"><b>Add New Action Item</b></a>] <? endif;?>
</td>
<td id="middle" align="middle">
[<a style="text-decoration: underline; color: black" href="allactionitems.php"><b>All Action Items</b></a>]
[<a style="text-decoration: underline; color: black" href="openactionitems.php"><b>Open Action Items</b></a>]
[<a style="text-decoration: underline; color: black" href="completedactionitems.php"><b>Completed Action Items</b></a>]
[<a style="text-decoration: underline; color: black" href="closedactionitems.php"><b>Closed Action Items</b></a>]
</td>
<td id="right">
</td>
</tr>
</table>
<form style="display:inline" id="summaryform" method="POST" action="allactionitems.php">
<div class="summary_table" style="<? if(count($resAll)> 23): ?>height:500;<?endif;?> overflow-y:auto">
<table id="summary_table" class="display nowrap" style="width: 1000" border=1>
<thead class="header">
<tr>
<? foreach ($cols as $cidx=>$col): ?>
<? if (!in_array($col, $hideCols)): ?>
<th>
<?if (in_array($col, $categoryNames)):?>
<a onclick="$('#summaryform').attr('action', 'allactionitems.php?orderby=<?=$manageActionItems->getCategoryName($col)?>&dir=<?=($dir=="DESC")?"ASC":"DESC"?>'); $('#summaryform').submit();"><?=$manageActionItems->getCategoryName($col)?></a><? if ($orderBy == $manageActionItems->getCategoryName($col) && $dir == "DESC") echo "<white>▼</white>"; else if ($orderBy == $manageActionItems->getCategoryName($col) && $dir == "ASC") echo "<white>▲</white>"; else echo "<span style='display: inline-block; width: 13'></span>";?></td>
<? else:?>
<a onclick="$('#summaryform').attr('action', 'allactionitems.php?orderby=<?=$col?>&dir=<?=($dir=="DESC")?"ASC":"DESC"?>'); $('#summaryform').submit();"><?=($col=="ActionItemID")?"ID": $col?></a><? if ($orderBy == $col && $dir == "DESC") echo "<white>▼</white>"; else if ($orderBy == $col && $dir == "ASC") echo "<white>▲</white>"; else echo "<span style='display: inline-block; width: 13'></span>"; ?>
<?endif;?>
</th>
<? endif; ?>
<? endforeach; ?>
<th>
View
</th>
<th>
Edit
</th>
</tr>
</thead>
<tbody>
<? foreach($resAll as $idx=>$row): ?>
<? //echo"<pre>"; var_dump($row); echo"</pre>"; ?>
<tr id="row<?=$row['ActionItemID']?>">
<? foreach ($cols as $cidx=>$col): ?>
<? if (!in_array($col, $hideCols)): ?>
<td <? if($orderBy == $col) echo "class='sort'"; ?>>
</td>
<? endif; ?>
<? endforeach; ?>
<td>
View
<!--input type="submit" value="View" style="width:60;height:20;border:none; font-weight: bold"/-->
</form>
</td>
<td>
<? if(($_SESSION['userrole'] == 'Admin' && $_SESSION['userrole'] == 'Admin') || isset($_SESSION['userid']) &&($row['OwnerID'] == $_SESSION['userid'] || $row['AltOwnerID'] == $_SESSION['userid'])):?>
Edit
<? endif; ?>
<!--input type="submit" value="Edit" style="width:60;height:20; border:none;font-weight: bold" /-->
</form>
</td>
</tr>
<? endforeach; ?>
</tbody>
</table>
</div>
</form>
<script>
$(document).ready(function() {
$('#summary_table').DataTable( {
"scrollY": 400,
"scrollX": true,
"bSort": false,
"bPaginate": false,
"autoWidth": false
} );
$(".dataTables_wrapper").css("width","100%");
});
</script>
</body>
</html>
CSS
div#splash
{
background-color:#d8d8d8;
}
body
{
font-family: arial;
}
textarea
{
width: 100%;
max-width: auto;
height: 100px;
max-height: 85px;
overflow-y:scroll;
resize: none;
font-family: inherit;
}
html * :not(h1):not(h2)
{
font-size: 10pt;
}
body
{
margin: 0px;
background-image: url('/img/custom_back.gif');
}
h1, h2
{
font-family: arial;
text-align: center;
}
h3
{
font-size: 75%;
}
table.data tr td:not(.label)
{
background-color:white;
}
td#left
{
width: 25%;
}
td#right
{
width: 25%;
}
td#middle
{
width: 50%;
}
td.label
{
font-weight: bold;
font-style: italic;
}
table#find tr td.label,
table.data tr td.label
{
background-color:#0038a8;
color: white;
}
table.data tr td.label,
table.data:not(#details) tr td
{
width: 25%;
}
table.data
{
margin: 0 auto;
}
table#header
{
width: 100% !important;
}
table#header tr td
{
vertical-align: middle;
background-color: transparent;
}
input[type=submit]
{
margin: 0 auto;
}
td
{
vertical-align: middle;
}
div#header div
{
display:inline-block;
}
div#title
{
font-style: italic;
}
img#logo
{
width: 95px;
height: 95px;
}
table#toolname td
{
font-weight: bold;
font-size: 15px;
}
table#menu
{
background-color: #0038a8;
}
.required
{
border-style:solid;
border-width:2px;
border-color:red;
}
td > div:not(.filterinput):not(.cell)
{
height: 85px;
max-height: 85px;
overflow-y:scroll;
overflow-x:hidden;
}
td.sort
{
background-color: lightgray;
}
How do I resolve this issue?
for Bootstrap 4 Users
If you are using Bootstrap classes to the table, you might ran into this width issue. To fix this, use the datatable default option "autoWidth": false
Enable or disable automatic column width calculation. This can be
disabled as an optimisation (it takes a finite amount of time to
calculate the widths) if the tables widths are passed in using
$('#example').dataTable( {
"autoWidth": false
});
https://datatables.net/reference/option/autoWidth
I believe I have resolved the issue. I was using an older build.
After upgrading to 10.1 and following the table width instruction below, I resolved my issue.
I added (width="100%") to my table tag and it now stays at 100%
So instead of
<table id="summary_table" class="display nowrap" style="width: 1000" border=1>
I replaced the style width: 1000 which just sets the absolute width to 1000 pixels (I forgot to add the px unit suffix), to a percentage value of 100% `width='100%' and the resolving table tag would read.
<table id="summary_table" class="display nowrap" width="100%" border=1>
I used the answer from this question to form my response
https://stackoverflow.com/a/23842795/1691103
Example
http://www.datatables.net/examples/basic_init/flexible_width.html
I was facing the same problem and tried all the above solutions but no luck.
After hours of search, I found that the bootstrap class "table-responsive" has a problem with the DataTable.
So the solution is -
Just remove the "table-responsive" class from the table.
So the HTML of the table should look like this -
<table class="table table-striped table-hover table-sm" id="followup-table">
<thead>
<tr class="text-white">
<th>#</th>
<th>Follow Up On</th>
<th>Name</th>
<th>Phone No</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>4 Jun 2021</td>
<td>Mrityunjay Mishra</td>
<td>87838734</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$('#followup-table').DataTable();
} );
</script>
I read all the answers. none of them mentioned this simple way:
just add style="width:100%" to the table tag
<table style="width:100%" class="table table-striped- table-bordered table-hover table-checkable" id="firstmile-tbl" >
For me in Bootstrap 4.4.1 unfortunately Dexters solution didn't work. The solution is to add a class of w-100 to the table.
If you're using Bootstrap don't forget to add the table class to your table.
<table id="my_table" class="table">
...
</table>
For me adding css selector to the parent div of the table worked like a charm!
div.dataTables_wrapper {
width:100% !important;
}
I'm creating my website found here, I added my logo at the top of the page.
As this site is a mobile-optimized site, I wanted to add the logo so it correctly scales to the appropriate viewport (device screen size).
I have accomplished this by using this code in my CSS file:
.logo{
width: 75%;
height: 10%;
}
My logo is stored in header.php, and is included on all of the respective pages. However, the logo looks good on the homepage, but when clicking one of the navigational tabs to bring up the list.php page, it doesn't look scaled correctly.
header.php ------------
<html>
<head>
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" />
<link href="css/style.css" type="text/css" rel="stylesheet" />
<link type="text/css" rel="stylesheet" href="other.css" />
</head>
<body width="100%">
<p align="center"><img src="http://www.xclo.co.uk/logomobi.png" onclick="history.go(-1);" class="logo" border="0" width="100%" />
<div class="ribbon"><div class="ribbon-stitches-top"></div><strong class="ribbon-content"><h1>Home - Search - More</h1></strong><div class="ribbon-stitches-bottom"></div></div></p>
<br /><br /><br /><br />
</p>
</body>
</html>
The CSS is:
body{
background-color:#dff7c8;
}
#font-face {
font-family: 'CustomFont';
src: url('fonts/fh_ink.eot'); /* For Internet Explorer 6+ */
}
#font-face {
font-family: 'CustomFont';
src: url('fonts/fh_ink.ttf'); /* For non-IE browsers */
}
a:link{
color:black;
text-decoration:none;
}
.border {
width: 90%;
height: auto;
Margin-left:auto;
Margin-right:auto;
background-color:#c3f495;
border: 5px ridge #009900;
border-radius: 20px 50px 20px 20px;
box-shadow: 10px 10px 10px rgba(0,0,0,0.55);
}
.title {
font-family: 'CustomFont';
text-align: center;
font-size: 2.5em;
color:#000000;
text-shadow: #999 2px 2px 4px;
}
.content {
font-size: 15px;
color:#000000;
}
.search {
width: 24em;
height:3em;
border: 5px solid #009900;
border-radius: 10px;
position: relative;
box-shadow: 2px 2px 2px 2px #A4A4A4;
font-size: 20px; Position:relative;
}
/* (portrait) ----------- */
#media screen and (orientation:portrait){
.logo{
position:relative;
width: 75%;
height: 10%;
}
.go {
position:relative;
float: right;
margin: 0px 0px 0px;
border: 0px;
background-color: transparent;
}
.inlay{
position:absolute;
top:-15px;
left:-15px
}
.img {
position:relative;
width:201px;
height:81px;
background-color: transparent;
}
.img2 {
position:relative;
border-radius:20%;
width:201px;
height:81px;
background-color: transparent;
}
.img3 {
position:relative;
width:150px;
height:81px;
background-color: transparent;
}
.img4 {
position:relative;
width:201px;
height:150px;
background-color: transparent;
}
.appimg {
position:relative;
width:20%;
height:20%;
background-color: transparent;
}
.drapp {
position:relative;
width:35%;
height:15%;
background-color: transparent;
}
.appstoreimg {
position:relative;
width:110px;
height:40px;
background-color: transparent;
}
.divider {
border-top: 3px dashed #009933;
}
li.android,
li.iphone,
li.ipad{
display:none;
}
body.android .android,
body.iphone .iphone,
body.ipad .ipad{
display:block;
}
}
/*(landscape) ----------- */
#media screen and (orientation:landscape){
.go {
position:relative;
float: right;
height:90px;
width:90px;
margin: 0px 0px 0px;
border: 0px;
background-color: transparent;
}
.inlay{
position:absolute;
top:-15px;
left:-15px
}
.img {
position:relative;
width:211px;
height:81px;
background-color: transparent;
}
.img2 {
position:relative;
width:211px;
height:81px;
background-color: transparent;
}
.img3 {
position:relative;
width:150px;
height:81px;
background-color: transparent;
}
.img4 {
position:relative;
width:211px;
height:160px;
background-color: transparent;
}
.appimg {
width:15%;
height:8%;
background-color: transparent;
}
.drapp {
position:relative;
width:25%;
height:30%;
background-color: transparent;
}
.appstoreimg {
position:relative;
width:220px;
height:80px;
background-color: transparent;
}
.logo{
position:relative;
width: 75%;
height: 10%;
}
.divider {
border-top: 3px dashed #009933;
}
li.android,
li.iphone,
li.ipad{
display:none;
}
body.android .android,
body.iphone .iphone,
body.ipad .ipad{
display:block;
}
}
list.php ------------
<?php
include_once('include/connection.php');
include_once('include/article.php');
$article = new storearticle();
$articles = $article->fetch_all();
?>
<html>
<head>
<title>xclo mobi</title>
<link rel="stylesheet" href="other.css" />
</head>
<body width="100%">
<?php include_once('header.php'); ?>
<div class="container">
<h6><div align="center" class="title" style="color:#618050;"><b><u><?PHP echo "category = ", htmlspecialchars($_GET['id']); ?></b></u></h6></div>
<?php foreach ($articles as $article) {
if ($article['promo_cat'] === $_GET['id']) { ?>
<div class="border">
<a href="single.php?id=<?php echo $article['promo_title']; ?>" style="text-decoration: none">
<img src="<?php echo $article['promo_image']; ?>" border="0" class="img" align="left"><br />
<img alt="" title="" src="GO.png" height="50" width="50" align="right" />
<br /><br /><br /><br />
<?PHP echo '<div class="title">' . $article['promo_title'] . '</div>'; ?>
<br />
<font class="content"><em><center><?php echo $article['promo_content']; ?></center></em></font>
</div><br/><br />
</a>
<?php } } ?>
</div>
<?php include_once('footer.php'); ?>
</body>
</html>
Could someone please guide me in the correct direction? Thank you.
There are a few methods you can try.
Your initial logo size is 1,000px × 400px (scaled to 743px × 297px)
I suggest to use this for ALL your CSS classes (.logo)
width:100%; max-width:743px; max-height:297px;
I use something to that affect and it works beautifully.
You could also try:
<img style="-ms-interpolation-mode: bicubic; width:100%;" border=0 alt="LOGO" align=middle src="your_image.xxx">
Which is another method I used for a client's website and using a 1800px wide image which renders nicely for large as well as small iPhone screens and will automatically adjust to screen width, without worrying about height attribute.
You have to remove either the width rule or the height rule to keep the image proportions.
Do you want it to be 10% of the height or 75% of the width?
Also remove the
width="100%"
from inline html. Keep all style rules in external css.