I have two arrays which I use implode() on to convert into strings which are then echoed out.
Ideally i'd like the 1 value from the one string to be next to the other value in the other string, prefably nested inside a
<p></p>
Here's the code I'm using to issue a line break after every value, wrap it in a div, and float it.
<?php
echo '<div class="wrapper"><div style="text-align:left; float:left;"
class="glue">';
echo implode('<br>',$test);
echo '</div>';
echo '<div style="text-align:right; float:right;" class="glue">';
echo implode('<br>',$_POST);
echo '</div></div>';
?>
This works well for now as both divs sit next to each other within my container but it would be easier if the values were inside P tags instead so I could easily put an image in-between them.
I've added some images below to better demonstrate what I'm going for.
The first one is what I've tried and the second one is what I would like.
Is it what you want?
<style type="text/css">
p{
overflow: hidden;
}
span.left{
float: left;
}
span.right{
float: right;
}
</style>
<?php
foreach($test as $k=>$v){
echo '<p><span class="left">'.$test[$k].'</span><span class="right">'.$_POST[$k].'</span></p>';
}
That is not possible until you split the paragraph tag into 2 halves.
Try this,
.div1 {
float: left;
}
.div2 {
float:right;
}
.div2 {
float:right;
text-align: right;
}
<p>
<div class="div1">Left Text</div>
<div class="div2">Right Text</div>
</p>
if both arrays have the same length the most simple example woud look like this:
<?php
$test[0] = "a";
$test[1] = "b";
$test[2] = "c";
$test[3] = "d";
$test2[0] = 1;
$test2[1] = 2;
$test2[2] = 3;
$test2[3] = 4;
for($i=0;$i<count($test);$i++)
{
echo "<p><nobr>".$test[$i] . "</nobr> <nobr style='float:right;'>" . $test2[$i] . "</nobr></p>";
}
if you wanna test to see if it fits just paste the code here
Related
Having a bit of an issue here. Could use some insight. I'm displaying user created events to visitors to my website. I'm using a while loop to display everything that hasn't not yet already passed. My goal is to display two separate events right next to each other, then another two below that and so on. Currently I'm using the flex box css property to achieve this, but it's only displaying the output vertically and not the way I want it to, meaning it's only putting one event per line. Here is my current output for displaying the events.
include 'db_connect.php';
$event_type = $_POST['event_type'];
$state = $_POST['state'];
$current_date = date("Y-m-d");
$sql = "SELECT * FROM events WHERE event_type LIKE '%".$event_type."%' AND state LIKE '%".$state."%' AND end_date > '$current_date' ORDER By end_date ASC";
$result = mysqli_query($conn, $sql);
if (isset($_POST['search-events']) && !empty($event_type) && !empty($state)) {
while($row = mysqli_fetch_array($result)) {
$event_name= $row['event_name'];
$image = $row['image'];
$start_date = $row['start_date'];
$end_date = $row['end_date'];
$start_time = $row['start_time'];
$end_time = $row['end_time'];
$street = $row['street'];
$city = $row['city'];
$state = $row['state'];
$zip_code = $row['zip_code'];
$id = $row['event_id'];
echo '<div class="filter-wrap">';
echo '<div id="filter-boxes">';
echo '<div id="list_image"><img src="'.$image.'"></div>';
echo '<div id="list_name">'.$event_name.'</div>';
echo '<div id="list_date">'.$start_date. ' - ' .$end_date. '</div>';
echo '<div id="list_time">' .$start_time. ' - ' .$end_time. '</div>';
echo '<div id="list_location">'.$street.''.$city.''.$state.''.$zip_code.'</div>';
echo '</div>';
echo '</div>';
}
}
Then there's the css that I'm using.
.filter-wrap {
display: flex;
flex-direction: row;
padding: 10px;
justify-content: center;
align-items: center;
}
#filter-boxes {
border: 2px solid #999;
text-align: center;
width: 50%;
height: 150px;
}
As you can see, I'm using the flex property inside the container that holds each of the individual boxes that holds each event. I have the flex direction set to row since I want it to display horizontally, then go the next line after it runs out of room on each line.
I tried a few things. I tried switching to the css column count property but didn't get the results I was expecting. I honestly probably didn't tweak with that property enough, but I have my heart set on the flex box property. I also tried setting the flex direction to column and also tried adding an inline-block display property to the boxes that are suppose to repeat on the while loop with each event. I'm finding this online that are kind of similar to my issue, but not quite. One uses javascript, but this can obviously also be accomplished somehow with php. I also found several articles talking about centering the content using flexbox, which is not the goal here.
Try move your .filter-wrap div element to outside of the while() {} loop.
Your current coding:
while() {
echo '<div class="filter-wrap">';
echo '<div id="filter-boxes">';
// content goes here...
echo '</div>';
echo '</div>';
}
will result in following structure where each .filter-wrap only container a single child .filter-boxes, which will always results in vertical presentation:
<div class="filter-wrap">
<div id="filter-boxes"> content </div>
</div>
<div class="filter-wrap">
<div id="filter-boxes"> content </div>
</div>
<div class="filter-wrap">
<div id="filter-boxes"> content </div>
</div>
For horizontal presentation, the correct structure should be one .filter-wrap consists of multiple .filter-boxes childs:
<div class="filter-wrap">
<div id="filter-boxes"> content </div>
<div id="filter-boxes"> content </div>
<div id="filter-boxes"> content </div>
</div>
So you can try change your coding to:
echo '<div class="filter-wrap">';
while() {
echo '<div id="filter-boxes">';
// content goes here...
echo '</div>';
}
echo '</div>';
Snippet for demo to you the coding logic result. It is in JS but you just have to apply the same in your PHP
Hope it helps and Happy coding!
var result_1 = document.getElementById('result_1');
var result_2 = document.getElementById('result_2');
var content_1 = '';
var content_2 = '';
content_2 = '<div class="filter-wrap">';
for (var i = 1; i <= 5; i++)
{
// result 1
content_1 += '<div class="filter-wrap"> <div class="filter-boxes">content ' + i + '</div> </div>';
// result 2
content_2 += '<div class="filter-boxes">content ' + i + '</div>';
}
content_2 += '</div>';
result_1.insertAdjacentHTML('beforeend', content_1);
result_2.insertAdjacentHTML('beforeend', content_2);
.filter-wrap {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: 10px;
justify-content: center;
align-items: center;
}
.filter-boxes {
border: 2px solid #999;
text-align: center;
width: 50%;
height: 50px;
/* for two columns display */
max-width: 49%;
}
#result_1,
#result_2 {
background-color: lightgray;
border: 1px dashed black;
margin: 3px;
}
result 1
<div id="result_1"></div>
result 2
<div id="result_2"></div>
I've a table showing 7 days of week created using php function. How can i give different background color to each day in the table. I'm new to this, any and all help would be great.
<?php
for($prev_days = 0 ; $prev_days<7;$prev_days++) {
$curr_date = date('Y-m-d', strtotime(-$prev_days.' days'));
$dayOfWeek = date("l",strtotime(strval($curr_date)));
/*echo $dayOfWeek;*/
?>
<td title="click here to see the files">
<label>
<a onclick="document.getElementById('id01').style.display='block'" class="clr">
<?php echo substr(strval($dayOfWeek),0,3); ?>
</a>
</label>
</td>
<?php
}
?>
.CSSTableGenerator tr:first-child td{
background:-o-linear-gradient(bottom, #005fbf 5%, #003f7f 100%);
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #005fbf), color-stop(1, #003f7f) );
background:-moz-linear-gradient( center top, #005fbf 5%, #003f7f 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#005fbf", endColorstr="#003f7f"); background: -o-linear-gradient(top,#005fbf,003f7f);
background-color:#005fbf;
}
This is the table created
: https://i.stack.imgur.com/nLnxP.png
CSS Solution
Using nth terms:
td:nth-of-type(1) {
background: red;
}
td:nth-of-type(2) {
background: blue;
}
td:nth-of-type(3) {
background: green;
}
td:nth-of-type(4) {
background: yellow;
}
td:nth-of-type(5) {
background: orange;
}
td:nth-of-type(6) {
background: gray;
}
... And so on
PHP Solution
First off, you'd want to create a method that returns a random HEX or something
Like so:
<?php
function random_color_part() {
return str_pad( dechex( mt_rand( 0, 255 ) ), 2, '0', STR_PAD_LEFT);
}
function random_color() {
return random_color_part() . random_color_part() . random_color_part();
}
?>
Generating a random hex color code with PHP
Next, we need to use this like so:
<?php for($prev_days = 0 ; $prev_days<7;$prev_days++) {$curr_date = date('Y-m-d', strtotime(-$prev_days.' days'));$dayOfWeek = date("l",strtotime(strval($curr_date)));
/*echo $dayOfWeek;*/?>
<td title="click here to see the files"><label><a onclick="document.getElementById('id01').style.display='block'" style=<?php echo "'" . random_color() . "'" ?> class="clr"><?php echo substr(strval($dayOfWeek),0,3); ?></a></label></td>
<?php}?>
So basically we're using PHP to output a dynamic style attribute to each TD.
Hopefully, this helped ya out, mate!
There are a number of way to do that. I can see some good solutions here. But here is a PHP only solution with minimal changes in your code.
<?php
$day_color = ["#ffccee","#ccccee","#f1dcee","#a2ccf3","#d7c3e3","#f3cc3e","#6fc63e"];
for($prev_days = 0 ; $prev_days<7;$prev_days++) {
$curr_date = date('Y-m-d', strtotime(-$prev_days.' days'));
$dayOfWeek = date("l",strtotime(strval($curr_date)));
/*echo $dayOfWeek;*/
?>
<td title="click here to see the files">
<label style="background-color:<?php echo $day_color[$prev_days]?>">
<a onclick="document.getElementById('id01').style.display='block'" class="clr">
<?php echo substr(strval($dayOfWeek),0,3); ?>
</a>
</label>
</td>
<?php
}
?>
you can choose your desired colors in the $day_color array as you see fit.
CSS only solution. Put a class on the tr parent of the td's and then use a number from 1 to 7 to add bg color on each.
.someclass td:nth-child(1) {
background:blue
}
.someclass td:nth-child(2) {
background:red
}
....
.someclass td:nth-child(7) {
background:green
}
<tr class="someclass">
<?php for($prev_days = 0 ; $prev_days<7;$prev_days++) {$curr_date = date('Y-m-d', strtotime(-$prev_days.' days'));$dayOfWeek = date("l",strtotime(strval($curr_date)));
/*echo $dayOfWeek;*/?>
<td title="click here to see the files"><label><a onclick="document.getElementById('id01').style.display='block'" class="clr"><?php echo substr(strval($dayOfWeek),0,3); ?></a></label></td>
<?php}?>
</tr>
Edit: after looking again at your image second solution I had is not good.
This may be a very simple and stupid question, but it's so simple that I don't know what I did wrong.
I'm trying to get the content of a textarea while retaining the formatting (breakline, spaces, etc). but when i tried to post the form, there was no html tags to be found. all I got was plain text.
when I type in the textarea like this:
first line
after 3 br
I expected the result of echo $foo; to be something like this:
first line
<br/>gt;
<br/>gt;
<br/>gt;
after 3 br
but instead, the result of echo $foo; was still like this:
first line
after 3 br
this is the display.php:
<form method="post" action="">
<textarea name="foo"><?php echo set_value('foo'); ?></textarea>
<br/>
<input type="submit" name="submit" value="Submit"/>
</form>
this is the controller:
function form_foo()
{
$foo = $this->input->post('foo');
if (get_magic_quotes_gpc())
{
$foo = stripslashes($foo);
}
$foo = htmlentities($foo);
echo $foo;
$this->load->view('display', $this->data);
}
what did I do wrong?
P.S : I'm using codeigniter 3.0 and PHP 5.6.15
Try this code -
function form_foo()
{
$foo = $this->input->post('foo');
if (get_magic_quotes_gpc())
{
$foo = stripslashes($foo);
}
//$foo = htmlentities($foo);
echo $foo;
$this->load->view('display', $this->data);
}
Why don't you use contenteditable?
<div contenteditable="true"></div>
This can turn <div> into editable area but without style. You need to style them additionally.
Here is my CSS solution
[contentEditable=true] {
white-space: pre;
background-color: #FFFFFF;
min-height: 6em;
max-height: 12em;
overflow-y: scroll;
outline: none !important;
border-radius: 4px;
padding: 4px;
}
Beware of dealing with the HTML tags.
See reference contenteditable.
How can I add different font-styles to different rows?
I want all of them to have a different font-style. For example:
while($row = mysqli_fetch_array($result))
{
echo $row['Nimi']."<br>".$row['Kirjailija']."<br>".$row['ISBN']."<br>".$row['Kunto']."<br>".$row['Hinta']."€"."<br>".$row['Pvm'];
echo "<br>"."<br>";
}
I am not so good at php. But I gave a little try about it like this:
Slight modification to your code.. Adding a classing to each row!
i = 1;
while($row = mysqli_fetch_array($result))
{
/* adding <span class="row1"> row2 etc.. using i */
echo "<span class='row".i."'>".$row['Nimi']."<br>".$row['Kirjailija']."<br>".$row['ISBN']."<br>".$row['Kunto']."<br>".$row['Hinta']."€"."<br>".$row['Pvm'];
echo "<br>"."<br></span>";
i++;
}
Giving Styles in css based on row names:
.row1{
font-family: verdana;
}
.row2{
font-family: arial;
}
etc..
I am repeating once again, I'm not sure about syntax.. I am posting this only to share the concept hoping that it should work! :)
For example:
style="font-family:verdana;"
You can use inline styling <span style="color: red;">test</span>, or use classes of css: <span class="red-color">text</span> with a css
.red-color{
color: red;
font-family: Arial;
}
In general, it is better to use classes with an external css file - that would keep your code organized and scalable.
In your case it is possible to use inline style like:
echo "<span style=\"color: red; font-family: Arial\">" . $row['Nimi'] . "</span>" . "<span style=\"color: green; font-family: Verdana\">" . $row['Kirjailija'];
Also, it is not a good practice to use <br /> now-a-days. Better wrap each text with a <span>, or a <div>
I've been away from programming in general for a long time. Amazing how you forget the simplest things. So I'm trying to warm-up my web design/PHP by making a resume generator.
I made my resume in Word, and I want to try to mimic the document formatting.
I tried doing this with tables, and then I scraped that because it wasn't working exactly like I wanted, and now I'm using divs and spans.
But that's breaking the formatting even more so I don't know what to do...
My main problem is getting spaces to line up precisely the way tabs do in Microsoft Word, on the same line as other things.
Here is the code I'm using
function fieldFill($fieldL, $fieldR = 'NoneAtAll'){
$numOfSpaces = 50;
echo '<div class="left">' . $fieldL . '</div>';
//if ($fieldR != 'NoneAtAll'){
// for($i = 0; $i <= $numOfSpaces - strlen($fieldL); $i++){
// echo ' ';
// //echo $i;
if ($fieldR != 'NoneAtAll'){
for($i = 0; $i <= $numOfSpaces; $i++){
echo ' ';
}
echo '<span class="rightt">' . $fieldR . '</span>';
echo '<br></br>';
}
}
And here is the CSS section
<style>
.rightt {margin: 0 0 0 300px;}
.name { font-size: 22pt;}
.sections {
padding: 15px 0px 0px 0px;
font-size: 12pt;
font-weight: bold;
text-decoration: underline;
}
.years {
font-size: 12pt;
font-weight: bold;
/*white-space:pre*/
}
.jobtits {
font-size: 12pt;
font-weight: bold;
}
</style>
I know there's already good resume generators out there but I'm doing this for the practice. Thanks
Here we go, I want to mimic this format
As of today I'm finding that this code
<div id="page-container">
<div id="leftside">
<div class="name">Name</div>
Address
<br>
City
<br>
State
<div class="sections">Objective</div>
To do good stuff!
<div class="sections">Education</div>
A college
<div class="sections">Awards</div>
Did some good stuff
<div class="sections">Job Experience</div>
<div class="jobtits">Some place</div>
Was an editor
<div class="jobtits">Another place</div>
Did stuff there too.
<div class="sections">Skills</div>
</div>
<div id="rightside">
<div class="name">That's my name</div>
Mobile: 334-223-3244
<br>
Home: 334-223-3244
<br>
Email: Email#me.com
<div class="sections">Filler</div>
Filler
<div class="sections">Filler</div>
2012-1030
<div class="sections">Filler</div>
Filler
<div class="sections">Job Experience</div>
<div class="jobtits">Jul 00 - 32</div>
Filler
<div class="jobtits">Everybody's heard</div>
About the bird.
<div class="sections">Skills</div>
</div>
</div>
is working for the most part, but there are still parts that need to overlap, such as the objective line. I probably need to make a new div/table for that huh? I'm walking through the html static before making it dynamic.
SPAN tag is inline element so margin will not be appled to it, use DIV tag instead.