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
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 am trying to link a MySQL DB to an SVG image to dynamically change the SVG elements with Raphael JS.
I have a MySQL DB where I query using PHP and display the results in table form to an html page: (The script below works and displays the username and a picture only when the condition of the timestamp is met.)
<?php
mysql_connect("","","");
mysql_select_db("");
$res=mysql_query("select username, picture from 'table' WHERE status > UNIX_TIMESTAMP(NOW()) - 300");
echo "<table>";
if (!$res) {
die("Query to show fields failed");
}
$fields_num = mysql_num_fields($res);
echo "<h1>Table:Status</h1>";
echo "<table border='1'><tr>";
for($i=0; $i<$fields_num; $i++)
{
$field = mysql_fetch_field($res);
echo "<td>{$field->name}</td>";
}
echo "</tr>\n";
while($row=mysql_fetch_array($res))
{
echo "<tr>";
echo "<td>"; echo $row["username"]; echo "</td>";
echo "<td>"; ?> <img src=" <?php echo $row["picture"]; ?>" height="50">
<?php
How can I take the similar concept above of displaying the results in table form to an SVG image where the SVG elements will change/update only when the query condition is met?
Here is my sample SVG image with 5 elements:
<polygon fill="#B2B2B2" points="150.3,8.8 203.8,31.7 169.8,91.4 133.4,75.8 "/>
<circle id="circleT3" circle fill="#FFFFFF" cx="163.1" cy="53.6" r="7.3"/>
<circle id="circle3_1" circle fill="#CCCCCC" cx="184.5" cy="82.4" r="7.3"/>
<circle id="circle3_5" circle fill="#CCCCCC" cx="136.6" cy="27.2" r="7.3"/>
<circle id="circle3_4" circle fill="#CCCCCC" cx="166.4" cy="7.3" r="7.3"/>
Can someone point me to some sample code or tutorial? Or is there a better way to do this? Thanks.
EDIT:
In MySQL DB I have a column for username, password and timestamp. When a user logs into webpage the timestamp updates. The PHP code above is used to query who has logged within 5 minutes ago from current time.
What I would like to do with this information with SVGs is create a graphical representation of the login.
So each username will have their own SVG element (a circle) associated with them and when they log in/out, that SVG element (code above) will change color.
Right now I do not know how to link the username with my SVG elements so the SVG element will dynamically update like my table I query from MySQL when the timestamp changes.
The answer will depend on further information that isn't really available until the rest is written.
You could combine Snap (to modify existing inline SVG or create it) or Raphael (to create new SVG only, you can't use it to modify inline SVG), or another SVG library of choice (eg svg.js or jquery.svg maybe).
Assuming you already have something to use on the page, that is showing the logged in user, you could do something like in pseudocode...
loop user;
if( document.getElementById( userId ) ) Snap('#' + userId + '_image').attr({ fill: 'green' });
(The svg reference may be the same as the circles, but somewhere you would need some type of lookup to know which circle is which userid)
This assumes the svg is on the page. If its not, you could create it with
paper.circle(x,y,r).attr({ fill: 'green' });
If you want it dynamic (so status changes without a refresh), you may need to tie ajax calls to get status from the mysql db, but if you already have a user name displaying on the page, I'm assuming that is already taken care of.
I have successfully update the svg element color to when the user logs in, the corresponding circle will change color. So I have my svg code from illustrator. I then put in this script in my php file:
window.onload = function () {
if(document.body.innerHTML.toString().indexOf('username') > -1){
circle1_1.setAttribute("fill", "yellow");
};
};
Whenever a user logs in, the info is populated on the table in the html from the MYSQL query and the script looks to see if that username is on the page and if it is, change color of SVG element.
So it basically links the SVG element to any value/variable.
Not the prettiest code or logic out there but for anyone else doing something similar, enjoy.
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.
I am using Javascript to hide / show a blog-post stored in a mysql table. The script for doing this is:
<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className = (item.className == 'hidden') ? 'unhidden' : 'hidden';
}
}
</script>
This links to some css styling:
.hidden {
display: none;}
.unhidden {
display: inline;}
I am calling the script via a href styles as a button:
<a class=button href="javascript:unhide('first_post');">More</a>
As for the content I originally tried the following to initially show a small section of text, then the rest after the link is clicked:
<?php $var = mysql_result($result,0,"post_text"); ?>
<?php echo substr($var, 0, 400); ?>
<div id="first_post" class = "hidden">
<?php echo substr($var, 400, 5000)?>
</div>
However where the two sets of sub-strings join there is a space. For example if the first sub-string ends in "the tree's hav" and the second sub-string starts "e eyes you know" the concatenation results in "the trees hav e eyes you know"
Can anyone help me with this problem?
Remove newlines between <?php ?> and <div> tags - this should help you get rid of spaces.
<?php echo substr($var, 0, 400); ?><div id="first_post" class = "hidden"><?php echo substr($var, 400, 5000)?></div>
I think what you're looking for is you want to truncate string from the end of the word rather than giving link somewhere in between. That's what I see as permanent solution...
When I googled up expecting that PHP would have something available out of the box found following 2 article which might help you.
http://css-tricks.com/snippets/php/truncate-string-by-words/
How to Truncate a string in PHP to the word closest to a certain number of characters?
They are not exactly what you're looking for but they can be of great help if you take inspiration from the concepts.
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.