I need to print an html table with row heights sets dynamically based on some values from the database using PHP. seems that html 5 doesn't support inline height and with tags and using css instead.
My requirement is to generate an html file and then convert it into pdf using DOM pdf.
Please guide me how to set these parameters dynamically inline or using css or whether a library already available for the same purpose.
I Googled a lot, but unable find any results matching my requirement.
Also am attaching final output format
(In answer column i printed some values which is the height required for each row)
Thanks in advance
You can use inline styles:
<tr style="height: 300px;"></tr>
I am not sure if you can effectively set the height of a <tr> tag, so you might have to set the height of each <td> in the row individually. Give it a try.
Furthermore, I am not sure how you have your array of rows and columns structured, but this might shed some light on how to do it.
<?php
$array=array(array(50,'r1c1','r1c2'),array(50,'r2c1','r2c2'));
echo '<table>';
foreach($array as $row)
{
echo '<tr style="height: '.$row[0].'px;">';
echo '</tr>';
for($i=1;$i<count($row);++$1)
{
echo '<td>'.$row[$i].'</td>';
}
}
echo '</table>';
?>
If you still need help, post the exact array you wish to turn into a <table> and I will do my best to assist.
If I understand this right, your table rows can be different sizes from each other, but for each row there is a rule in database, that sets row's height, no matter what height the content of the row, right? Then you can use something like this:
<html>
<head>
<style>
<?php foreach($yourRows as $key => $row) { ?>
#row<?=$key;?>{
height: <?=$row['height']; ?>px;
}
<?php } ?>
</style>
</head>
<body>
<table>
<?php foreach($yourRows as $key => $row) { ?>
<tr id="row<?=$key; ?>">
...
</tr>
<?php } ?>
</table>
</body>
In the style tag you can replace "#row<?=$key;?>" with "#row<?=$key;?> td"
Updated
Anyway, if you want to use the inline styling, you can make it happen like that:
<html>
<body>
<table>
<?php foreach($yourRows as $row) { ?>
<tr style="height:<?=$row['height']; ?>px">
Or you can apply height to td instead of the tr...
</tr>
<?php } ?>
</table>
</body>
If you think that jQuery might work here is a suggestion. I'm not sure it works with DOMPDF but as we're dynamically creating CSS it should be fine once the DOM has loaded.
If you know exactly the heights of each row - then select them using jQuery using eq.
$(document).ready(function() {
$('table tr').eq(1).css({'height':'250'});
$('table tr').eq(3).css({'height':'450'});
});
Here is the fiddle.
That way you don't have to modify the output but you have to make the assumption the content isn't going to be higher than your fixed height.
If you need this to be more dynamic then you'll need to either associate identifiers to your rows, like a class or something like that. Or alternatively, if you have a pattern in your content is to create a regular expression that scans your content and identifies it that way - then you can apply CSS rules to these rows once matched using jQuery.
EDIT
OK so I may have slightly misunderstood if you have the height value stored in the database. It also looks as though you've determined already that you're unable to use inline styles.
Here is my next suggestion.
You're building the table from a loop so it probably looks something like this.
foreach($rows as $row) {
echo '<tr data-height="'.$row['height'].'"><td>...</td></tr>;
}
if you add data-height="'.$row['height'].'" then you have a value that we can get using jQuery's data like so.
$(document).ready(function() {
$('table tr').each(function() {
var height = $(this).data('height');
$(this).css({ 'height': height });
});
});
Here is an example fiddle with static data-height values. Let me know how you get on.
Related
<?php
$con = mysqli_connect("localhost","root","","shady");
$query = "SELECT * fROM hall1 ";
$result = mysqli_query($con,$query) or die(mysqli_error());
echo "<form action='food.php' method='post'>";
echo "<table >";
$size = 0;
while($row = mysqli_fetch_array($result))
{
$imagewidth=200;
if($size > 900)
{
echo"<tr>";
}
echo'<td width='.$td3=100 .'px > </td>' ;
echo'<td width='.$td1=200 .'px> <label><input type="radio" name="radii" value='.$row[1].' checked> <img src="'.$row['image'].'" width="200" height="200" style="margin-top:10px;"> </label></td>' ;
echo"<td width=".$td2=200 ."px> Name  : " .$row[1] ."<br> Size     : ".$row[2] ."Person <br> Price    : ".$row[3] ." SDG <br> See More </td>";
$size+= $imagewidth+$td1+$td2+$td3;
if($size > 900)
{
echo"<tr>";
}
}
echo"</table>";
echo "<BR><BR><BR><CENTER><input type='submit' name='radiii' value='next' width='200PX' height='200PX' ></a> </CENTER></b>";
echo "</form>";
}
?>
There are many problems with your code:
It's unclear what the variable size does. I'm willing to bet it's unnecessary
You are using deprecated code. The width attribute on HTML elements is no longer supported, and if you insist on using it, you should only enter the width in pixels without the px like so: <td width="200">. The <center> tag is also deprecated.
Your <label> tag is pretty much useless. What are you trying to achieve with it?
It's a bad practice to set the widths on all rows, just set the widths on the first row's cells. Even better, do not use any style directly on the HTML tags and using CSS rules instead.
Lastly, i believe it would be much more readable code to NOT echo HTML and instead use the following approach to "plug in" your variables from PHP into HTML code :
<? $a = "Some variable"; $b = 123; $c = "http://example.com/img/1.png"; ?>
<p><strong>My variable a: <?=$a?></p>
<p><strong>My variable b: <?=$b?></p>
<p><strong>My img: <img src="<?=$c?>"></p>
In short, wrap your PHP logic in <? and ?> (be sure to have short_open_tag = On in your PHP settings or you'll need to use the alternative opening tag <?php like you did.
The write plain old HTML without all the echo. Whenever you want to echo something you simply write a new PHP opening tag like so :
<? echo $a ?>
OR, the shorthand version
<?=$a?>
Now your real problem is about designing the page. And i think you are starting in the wrong order. I would suggest you
1- Build a design that works using some IDE like Adobe Dreamweaver or a freeware alternative. With that tool, make the design for 1 item (1 iteration of your while loop).
The next step is to see how you're gonna repeat it. You seem to want a Horizontal list that wraps around lines at a certain width. One way you would do that is that you would wrap all the list items with a div element for which you will set a fixed width. And inside you will have the code you have for each item repeated for all items. If your outer div has a width of 900px and each element consumes 300px in width and you have 9 items, you would have a 3x3 grid.
Here is a summary code of what i explained. In your PHP file you would have:
<div class="grid">
<? while($row = .... ){ ?>
<div class="item">
<!-- The code for the image, label and whatever information you want to have for each item -->
</div>
<? } ?>
</div>
And a CSS file which you would link in your PHP file, containing:
.grid {
width: 900px;
}
.item {
width: 300px;
}
If the information your are displaying come from user input you should sanitize it and have some sort of logic that breaks long text, either with CSS or PHP.
In short, you seem to be doing all the math in PHP so that you jump into a new line once the total width exceeds your desired grid width. This is a design issue and not a logic / programming issue. Therefore you should tackle this with CSS and not PHP.
I strongly suggest you either follow a video tutorial (there are plenty online) or read some documentations on HTML, CSS, JavaScript, PHP and MySQL in that order.
Here is a link to get you started: Mozilla Developer Network
I would like to output mysqli query rows, like 4 divs/spans inline and then it goes to next line, outputs next 4 divs/spans and so on. How can I do this ? what should I echo, and/or what kind of operators should I use ?
Actually it isn't a programming issue, but design. You'll need a container with a determined width, and then you can create divs which float aside with the width (%) you need.
Like this:
<div class="container">
{for}
<div class="col-4">echo field</div>
{next}
</div>
And, in your CSS, something like:
.container{width: 1070px}
.col-4{float: left; width: 25%}
You can use a table. Here's my pseudocode
<table>
foreach row in result
echo "
<tr>
<td>result[column1]</td>
<td>result[column2]</td>
... etc
</tr>
"
</table>
each tr will make an inline row and the td's will fill it with data from the query.
I am creating a <div> that represents a table row in sql, with php. Fine.
Then I am using a javascript function to test the values of the div (position, width etc).Fine.
But I need to pass another value to the div to be checked by the function. It is there in the database but I don't know if there is a (simple) way to do it. Ideally it would look something like this.
<div id='plumber5' class='plumber' style='width:50px;left:100px' value='numericValue'>Derek</div>
The inline styles are generated in php, and can't think of a way of passing a numeric value other than by style (width, height etc) that js can detect.
eg.
<script>
a=document.getElementById('plumber5');
if (a.style.width=>75){
execute something here}
</script>
Instead of using style as a source for testing
Its very troubling!
Thanks
EDIT - solution
function checkData($type){
a = document.getElementsByClassName($type);
for(i = 0; i < a.length; i++)
{
if (a[i].getAttribute('data-dob') >= sessionStorage.Value) {
// execute something here
}
}
}
You can use the data attribute of HTML5 to add some custom data to your HTML tags:
http://ejohn.org/blog/html-5-data-attributes/
Example:
<div data-value='10' id='plumber5' class='plumber' style='width: 50px; left: 100px;'>
Derek
</div>
You can get the value like this:
<script>
a = document.getElementById('plumber5');
if (a.getAttribute('data-value') => 75) {
// execute something here
}
</script>
You can use data- attributes this way:
<div id='plumber5' class='plumber' style='width: 50px; left: 100px'
data-value='numericValue'>Derek</div>
Note: HTML5 Data Attributes are supported only in modern browsers like IE 9+, Chrome 12+, Firefox 5+.
Notice that you have an error in the style attribute. Replace:
style='width=50px;left=100px'
With:
style='width: 50px; left: 100px'
If your audience doesn't support HTML5, you can embed a div like:
<div id="plumber5" class="plumber" style="width:50px;left:100px">
Derek
<div style="display: none">numericValue</div>
</div>
That would hide the value from view, but would allow you to access it view Javascript.
HTML5 supports data-* tag attributes, so you can use:
<div id='plumber5' class='plumber' data-value='numericValue' data-myothervalue='otherOne'>
Derek
</div>
EDIT
Since it looks messy in comments, here's how to access the example values:
var myDiv = document.getElementById('plumber5');
var myVal = myDiv.getAttribute('data-value'); // 'numericValue'
var myVal2 = myDiv.getAttribute('data-myothervalue'); // 'otherOne'
Let's say I have a html table with cells background as red. I would like to print alphabet letters(A-Z) in a loop on the table using jquery, for example letter J would look like as in the following image:
Click here to view the image
I can create a table and a pointer which can loop through all the cells of the table and change the background color to black. However, I don't understand which cells to highlight for a particular alphabet. For example, to display letter "A" on a 30 x 30 table, which cells do I need to change its background such that I get letter A displayed on the screen and so on for other letters. Is there any pattern for this?
Here is the code i have so far:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var x=0;
var y=1;
function movePointer(){
printCell();
if(x==30){
x=0;
y++;
}
if(y==31){
y=1;
x=0;
$(".pointer").css("background","red");
}
x++;
}
function printCell(){
$("#"+x+"_"+y).css("background","black");
}
function eraseCell(){
}
setInterval(movePointer,1);
});
</script>
</head>
<body style="margin:0; padding:0">
<?php
$h=30;
$v=30;
echo "<table border='1'>";
for($y=1;$y<=$v;$y++){
echo "<tr>";
for($x=1;$x<=$h;$x++){
echo "<td style='border:1px solid red; width:20px; height:20px'>";
echo "<div style='width:20px; height: 20px; background:red' class='pointer' id='".$x."_".$y."'></div>";
echo "</td>";
}
echo "</tr>";
}
?>
</table>
</body>
To achieve such a thing you will require something like a "bitmap", so you will need an alphabet map/array that has attached for each element another array that has the index of squares to be colored differently.
EDIT:
A simple example would be using something like:
var alphabet = ("abcdefghijklmnopqrstuvwxyz").split("");
var letterBitmap = {};
$.each(alphabet,function(index,data){
letterBitmap[data] = new Array("1.1");
console.log(letterBitmap[data]);
});
Take note that the line that says new Array("1.2") is actually the coordinate for the first block that needs to be collored, given 1 as the row and 2 as the column. For a letter you should have something like:
new Array("1.1","2.3","5.2") etc., note that the coordinates are not valid they are just as proof of concept.
After you have data in such a format it is very simple to go trough that Array of coordinates, split them and choose the right index to color.
Hope it helps.
You could create some sort of Bitmap for each Letter as a Multidimensional array.
You can write a simple html that let you draw the letters by clicking on the cells. Then return a hex number with the state of the cells. Then use the resulting data in your code.
Other option would be to search in google for some "Ascii font table" (I tried, ..not luck) with the letters already done.
If everything fails, you can use the console command "banner" to generate this text for a-Z.
The easier way is to write this mini-draw html tool :D
can anyone pls give sugessions on how to write the script for selecting a color in a live page so that the selected color apply to whole page.can any one pls provide me a sample scripts for dis.
Try using a jQuery Colorpicker like this one. I'm guessing that's what you mean by 'selecting'.
if you want to change the background color of your page dynamically with PHP here are the tips to start:
create a simple PHP page like this (ugly but fast solution):
<?php
function getBackgroundColor() {
switch(rand(0, 3)) {
case 1:
return "#f00";
case 2:
return "#0f0";
case 3:
return "#00f";
default:
return "#fff";
}
}
?>
<html>
<head><title>test page</title></head>
<body style="background-color: <?php echo getBackgroundColor(); ?>">
here comes the body
</body>
</html>
you can create a template file for the PHP and do the same just put the HTML in a different file
do with AJAX the PHP will answer only the color and your javascript will change the background color
If by "applying the color to the whole page" you are talking about changing the background color of the page, try something like:
<input type="text" id="col" value="Enter hex color here" />
<input type="button" value="Change" onclick="changeColor()"/>
<script>
function changeColor()
{
col = document.getElementById("col").value;
/*
Make sure the col is indeed a valid one.
Acceptable formats include:
#789abc
#xyz //expanded to #xxyyzz
rgb(0, 127, 255)
Standard colors like "red", "blue" etc.
*/
document.body.style.backgroundColor = col;
}
</script>
To avoid errors caused by ignorant user inputs, you can use a drop-down-box instead of the text-field and populate it with allowed values.