Hello I have the following code, which is sorting results from a database, how I can set it up so the results will be shown in 2 different columns, one for template.channel_item.php and one for template.channel_item.php in which 2 columns will be next to each other ?
if(is_array($array)) {
foreach($array as $row) {
include($basepath.'/templates/template.channel_item.php');
include($basepath.'/templates/template.channel_item_title.php');
}
if(is_array($array)) {
foreach($array as $row) {
echo '<div id="left">';
include($basepath.'/templates/template.channel_item.php');
echo '</div>';
echo '<div id="right">';
include($basepath.'/templates/template.channel_item_title.php');
echo '</div>';
}
CSS
#right { float:left; width: 400px;}
#left { float:left; width: 400px;}
There is no need to use loop
<div class="item-section" style="clear:both">
<div id="left-sidebar">
<?php include($basepath.'/templates/template.channel_item.php'); ?>
</div>
<div id="right-sidebar">
<?php include($basepath.'/templates/template.channel_item_title.php'); ?>
</div>
</div>
css
#left-sidebar, #right-sidebar { float: left; width: 400px; }
Related
I have a problem with displaying images in carousel. I want to display 2 images per carousel slide. I took images from database using while loop to create slides. The problem is that with my code it only displays one image per slide.
This is how it looks now:
Check the image
<?php
$brojacPoStrani = 0;
$sqlIzvestaji = mysqli_query($con, "SELECT operacije.nazivEng, izvestaji.operacija, izvestaji.ucinak, izvestaji.id FROM izvestaji INNER JOIN operacije ON izvestaji.operacijaId=operacije.id WHERE projekatId='$projekatId' AND datum='$datum'");
while ($row = mysqli_fetch_array($sqlIzvestaji)) {
$id = $row['id'];
$sqlSlike = mysqli_query($con, "SELECT img_name FROM slike WHERE izvestajId='$id' AND datum='$datum'");
$brojacDuplikata = false;
while ($row2 = mysqli_fetch_array($sqlSlike)) {
if ($brojacPoStrani % 2 == 0) {
?>
<div class="carousel-cell" style="background-image: url('img/izvestaji.jpg'); background-repeat: no-repeat; background-size: 100% 350px;">
<h1 style="color: #fff; text-align: left; padding-left: 15px; font-weight: bold;"><?php echo $row['nazivEng']; ?></h1>
<?php
if ($brojacDuplikata === false) {
$brojacDuplikata = true;
?>
<p style="text-align: left; padding-left: 45px; padding-top: 20px; padding-bottom: 10px;"><?php echo $row['operacija'] . " - " . $row['ucinak']; ?></p>
<?php
} else {
?>
<p style="text-align: left; padding-left: 45px; padding-top: 40px; padding-bottom: 10px;"></p>
<?php
}
?>
<div class="row">
<?php
if ($brojacPoStrani % 2 == 0) {
?>
<div class="col-lg-6">
<img src="../files/izvestaji/<?php echo $project; ?>/<?php echo $datum; ?>/<?php echo $row['nazivEng']; ?>/<?php echo $row2['img_name']; ?>" style="width: 350px; height: 350px; padding-left: 10px;" class="float-right" />
</div>
<?php
} else {
?>
<div class="col-lg-6">
<img src="../files/izvestaji/<?php echo $project; ?>/<?php echo $datum; ?>/<?php echo $row['nazivEng']; ?>/<?php echo $row2['img_name']; ?>" style="width: 350px; height: 350px; padding-right: 10px;" class="float-left" />
</div>
<?php
}
?>
</div>
<br />
</div>
<?php
}
$brojacPoStrani++;
}
$brojacPoStrani = 0;
}
As mentioned it looks like you should be able to use a single query rather than having nested queries - and to display 2 images per carousel slide you effectively want to select data from the current and next rows. One easy way to do that would be to assign the entire recordset to a variable and then process that array using a for loop. The following is a simplified, semi-pseudo code version that attempts to combine the sql queries and assign recordset to an array. It is not tested as such but it might? be of use.
$sql="select
o.naziveng,
i.operacija,
i.ucinak,
i.id,
s.img_name
from izvestaji i
inner join operacije o on i.operacijaid=o.id
inner join slike s on s.izvestajId=i.id
where projekatid='$projekatid' and datum='$datum'";
$res = mysqli_query( $con, $sql );
if( $res ){
$arr = mysqli_fetch_all( $res, MYSQLI_BOTH );
for( $i=0; $i < count( $arr ); $i+=2 ){
try{
$r1=array_key_exists( $i+0, $arr ) ? $arr[ $i+0 ] : false;
$r2=array_key_exists( $i+1, $arr ) ? $arr[ $i+1 ] : false;
/*
generate the HTML structure and add two images
*/
echo '<div class="carousel-cell">'; # simplified version
if( $r1 )echo 'row 1: '.$r1['img_name'];
if( $r2 )echo 'row 2: '.$r2['img_name'];
echo '</div>';
}catch( Exception $e ){
continue;
}
}
}
I am implementing the printing of pages in HTML.
My aim is if a table will not be accommodated in the same page, the whole table will be transferred to the next page. How do i do this. i have this code.. please help me.
here is my CSS part.
<style type="text/css">
.printOnly {
margin-top: 100px;
display: none;
}
.textSummaryTable { page-break-inside:auto }
.textSummaryTable tr { page-break-inside:avoid; page-break-after:auto }
#media print {
.summaryTable tr:nth-child(odd){ background-color:#E1E4E5;}
.summaryTable tr:nth-child(even) { background-color:#ffffff; }
.printOnly { display: block; }
.panel {
border: 1px solid transparent;
padding: 2px;
margin: 0;
}
.textSummaryTable{ border:1px solid gray; }
.textSummaryTable td{ border:1px solid gray; }
#main {
overflow: hidden;
position: absolute;
padding: 0px;
height: auto;
width: 100%;
}
#title { display: none; }
#line-break { display: block; }
.textSummaryTable { width: 100%; }
}
#media screen {
#line-break { display: none; }
}
</style>
and My tables are here.
<?php
$this->pageTitle = Yii::app()->name . ' - View Evaluation';
$user = LoginForm::getUser();
?>
<?php $participants = $modelE->evaluationDetails; ?>
<style type="text/css">
#media print {
body {
overflow: hidden;
}
}
</style>
<div class=" non-printable">
<div class='pull-right non-printable'>
<button id="btnPrint" type="button" class="btn btn-default pull-right" onclick="window.print();">
<span class="glyphicon glyphicon-print"></span> Print
</button>
</div>
<?php
$startDate = date("M j, Y", strtotime($modelE->start_date));
$endDate = date("M j, Y", strtotime($modelE->end_date));
?>
</div>
<div id='line-break'>
<br>
<br>
<br>
</div>
<div class="container-fluid">
<div class="printable">
<h4><?php echo htmlentities($modelE->evaluationForm->name); ?></h4>
<h5><?php echo $startDate; ?> - <?php echo $endDate; ?></h5>
<h5>Candidate: <?php echo htmlentities($modelE->evaluatee); ?></h5>
<h5>Overall Evaluation: <?php echo htmlentities($modelE->getResult()); ?></h5>
<h5>Participants: <?php echo htmlentities(count($participants)); ?></h5>
<div class="panel panel-default">
<div class="panel-body">
<h5><strong>Instructions: </strong> <?php echo htmlentities($modelE->evaluationForm->description); ?></h5>
<!-- <h4>Results Summary</h4> -->
<?php
$radioFlag = false;
foreach ($modelE->evaluationForm->evaluationFormDetails as $question) {
$criteria = new CDbCriteria;
$criteria->with = 'evalResult';
$criteria->addInCondition('eval_form_question_id', array($question->id));
$criteria->addInCondition('evalResult.eval_id', array($modelE->id));
$resultSet = EvaluationResultsDetails::model()->findAll($criteria);
if ( strtolower($question->field_type) != "radioheader" && $question->field_type != "slider" ) {
if($radioFlag){
echo "</table>";
$radioFlag = false;
}
if( $question->field_type == "text" ) {
echo "<h4>" . $question->field_name . "</h4>";
}
else {
echo "<table class='textSummaryTable'><tr><td style='width: 100%'><label>" . $question->field_name . "</label></td></tr>";
foreach ($resultSet as $answer) {
echo "<tr><td>" . $answer->eval_answer . "</td></tr>";
}
echo "</table>";
}
} else {
if(!$radioFlag){
echo '<table border-size = 0px width=100% class="summaryTable">';
$radioFlag = true;
}
echo "<tr><td style='width: 90%'>" . $question->field_name . "";
echo "</td><td style='width: 10%'>";
$sum = 0;
$count = 0;
foreach ($resultSet as $answer) {
$count++;
$sum += $answer->eval_answer;
}
echo $count == 0 ? "-" : number_format($sum / $count, 2);
echo "</td></tr>";
/*** end here ***/
}
}
if($radioFlag){
echo "</table>";
}
?>
<table class="printOnly">
<tr>
<td colspan="2">
<p> I hereby certify that all information declared in this document are accurate and true. Each item have been discussed with my Immediate Superior and mutually agreed upon.</p>
</td>
</tr>
<tr>
<td>
<p>Prepared by
<?= $modelE->project->manager->family_name . ", " . $modelE->project->manager->first_name ?>
</p>
Date <?= date("Y-m-d"); ?>
</td>
<td>
<p>Conformed by <?= $modelE->evaluatee ?></p>
Date
</td>
</tr>
<tr>
<td colspan="2">
<p>Noted by HR Division</p>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
I have this list of images:
http://thegelu.com/camera/ffffff.php
And I'd like the pictures to display as a grid, not like a list. (aka each pictures next to each other)
Here's the PHP code:
<?php
$uploadsDirectory = 'slides/tail/';
if ($handle = opendir($uploadsDirectory)) {
echo '<hr/>';
echo 'Official Backgrounds';
echo '<hr/>';
echo "<div class='bgitem' style='color:white;font-weight:bold'>None</div>";
$uplo = array();
while (false !== ($file = readdir($handle))) {
array_push($uplo, $file);
}
sort($uplo);
$user = array();
foreach($uplo as $fname) {
if($fname != ".." && $fname != "."){
if(substr($fname,0,1) != "_")
echo "<div class='bgitem'><img src='slides/tail/$fname' height='30px'/></div>";
else
array_push($user, "$fname");
}
}
echo '<hr/>';
echo 'User Uploads :';
echo '<hr/>';
foreach($user as $div){
echo $div;
closedir($handle);
}
?>
I'm a beginner in PHP so I don't exactly know what to do.
Thanks in advance!
You can easily achieve a grid view using CSS. If you add the individual .bgitem items to a container, you can use the following CSS to achieve a grid view:
.grid {
width: 100%;
float: left;
clear: both;
}
.grid .bgitem {
float: left;
width: 30px;
height: 30px;
margin: 10px;
}
In turn, your markup should look something like:
<div class="grid">
<div class="bgitem"><img src="slides/tail/1.png" height="30px"></div>
...
</div>
jsFiddle Demo
my site which is a search engine returns many many results with a foreach loop as such:
foreach ($xml->channel->item as $result) {
$ltitle = $result->title;
$ldesc = $result->description;
$url = $result->displayUrl;
$link = $result->link;
if (strlen($ltitle) > 60)
{
$title = substr($ltitle,0,60).'...' ;
}
else
{
$title = $ltitle;
}
if (strlen($ldesc) > 195)
{
$desc = substr($ldesc,0,195).'...' ;
}
else
{
$desc = $ldesc;
}
echo "
<br>
<div class='resultbox'>
<a class='normal' style='text-decoration:none;font-size:huge;font-weight:bold' href='$link'>$title</a><br>
<div style='padding-top:3px;padding-bottom:4px;width:580px;'>
<font style='text-decoration:none;font-size:small;font-family:Arial;'>$desc<br></font></div>
<a style='text-decoration:none;' href='$link'><font style='text-decoration:none;font-size:small;color:green;font-weight:bold;'>$url<br></font></a>
</div>
";
}
And the resultbox class above styles all of the results with this
.resultbox
{
height:auto;
width:600px;
background-color:transparent;
font-size:19px;
padding:10px;
padding-left: 30px;
padding-right: 30px;
border-left: 6px solid #333;
}
.resultbox:hover
{
border-left: 8px solid #555;
}
The border-left color is what i want changed, i would like it to generate or to style randomly off of a list of colour codes so the results, insead of being all #333 can be #333 #555 #999 and so on..... any ideas?
If u have no problems using JS , You can certainly do this :
$(document).ready(function () {
$('.resultbox').mouseenter(function() {
var randomColor = Math.floor(Math.random()*16777215).toString(16);
$('.resultbox').css("border-left", " 8px solid #"+randomColor);
});
});
change <div class='resultbox'> to <div class='resultbox random-color-".rand(1,YOUR_COLOR_LIMIT)."'> AND define colors like
.random-color-1 {
border-left: 8px solid #555;
}
.random-color-2 {
border-left: 8px solid #555;
}
.....
.random-color-YOUR_COLOR_LIMIT {
border-left: 8px solid #555;
}
change
<div class='resultbox'>
to
<div class='resultbox' style='border-left-color:$yourColorInCssFormat;'>
the style attribute overrides the css from class.
set $yourColorInCssFormat to the color you wish to have for the div. for example: $yourColorInCssFormat = '#999';
You can use inline style for that. Or alternatively you can user nth-child selector of css to repeat the border-color scheme something like this:
.resultbox:nth-child(n+1):hover {
}
.resultbox:nth-child(2n+1):hover {
}
.resultbox:nth-child(3n+1):hover {
}
First off, try this out for your foreachloop:
<?php foreach ($xml->channel->item as $result): ?>
<?php
$ltitle = $result->title;
$ldesc = $result->description;
$url = $result->displayUrl;
$link = $result->link;
if (strlen($ltitle) > 60){
$title = substr($ltitle,0,60).'...' ;
}else{$title = $ltitle;}
if (strlen($ldesc) > 195){
$desc = substr($ldesc,0,195).'...' ;
}else{$desc = $ldesc;}
?>
<div class='resultbox'>
<a class='normal' style='text-decoration:none;font-size:huge;font-weight:bold' href='<?php echo $link ?>'><?php echo $title; ?></a>
<br>
<div style='padding-top:3px;padding-bottom:4px;width:580px;'>
<font style='text-decoration:none;font-size:small;font-family:Arial;'>
<?php echo $desc; ?><br>
</font>
</div>
<a style='text-decoration:none;' href='<?php echo $link; ?>'><font style='text- decoration:none;font-size:small;color:green;font-weight:bold;'><?php echo $url; ?><br></font> </a>
<?php endforeach; ?>
That way you're not playing with big echos.
Now for generating random colors your could use php rand();
For example:
//Generate a random number between the two parameters
$randomNumber = rand(1, 3);
//Use this number to dictate what the variable color should be
if($randomNumber == 1){$color = "#333"}
elseif($randomNumber == 2){$color = "#555"}
elseif($randomNumber == 3){$color = "#999"}
You can then use the variable $color in your code to randomly assign one of the colors to elements.
Hope this helps!
-Gui
Here is my Code:
<?php
$qr = mysql_query("SELECT * FROM products");
while($res = mysql_fetch_array($qr)):
?>
<div class="box">
<p><?php echo $res[1]; ?></p>
<img src="<?php echo $res[3]; ?>" width="100" /><br />
View Data Sheet
</div>
<?php
endwhile;
?>
I want the output of the fetched record like this http://jsfiddle.net/CqYhE/3/
Please help me that how can I apply margin of 10px on both sides (left & right), only on the center div of each row when printing it with php loop.
Here is your solution:
This will work for N divisions.
<?php
$qr = mysql_query("SELECT * FROM products");
$count = 1;
$margin='';
while($res = mysql_fetch_array($qr)):
$count == 2 ? $margin='style="margin:0px 10px;"' : $margin = '';
$count == 3 ? $count = 1 : $count++;
?>
<div class="box" <?php echo $margin; ?>>
<p><?php echo $res[1]; ?></p>
<img src="<?php echo $res[3]; ?>" width="100" /><br />
View Data Sheet
</div>
<?php
endwhile;
?>
Use css :first-child and :last-child selectors
#container .box{
float: left;
width:245px;
height:200px;
background-color:#0CC;
margin-bottom:10px;
margin-left:10px;
margin-right:10px;
}
#container .box:first-child,
#container .box:last-child { margin-left:0px; margin-right:0px;}
if you have Multiple Rows you will need to change you html to make it easy : See This DEMO
This is best achieved with a CSS solution. If you forget about the left margin and just apply a right one you can then remove it from the last-child. Fewer lines of CSS so better performance.
.box{
float: left;
width:245px;
height:200px;
background-color:#0CC;
margin: 0 20px 10px 0;
}
.box:last-child {
margin-right: 0;
}