Align loop output in one row - html

I have this code in which the image output $check or $uncheck and title $val_c are inside a loop, what i want is to output everything in one row using <div class="col-sm-12"> but what i always get is a column. what i want is like this
image_title_______________image_title________________image_title
what im getting is like this...
image
title
image
title
image
title
heres is the code
<div class="panel-body">
<div class="col-sm-12">
';
$funcs->viewSurvey();
$array4 = $funcs->viewSurvey();
$searchengine = $array4['searchengine'];
$sum = $array4['sum'];
$searches = explode(',', $searchengine);
$searchesa = array("google","yahoo","bing");
$check = '<img src="images/checked.png" height="40px" width="40px">';
$uncheck = '<img src="images/unchecked.png" height="40px" width="40px">';
foreach ($searchesa as $key_a => $val_c) {
$found = false;
foreach ($searches as $key_b => $val_d) {
if ($val_c == $val_d) {
echo ''.$check.'<h3 class="head8">'. $val_c.'</h3>' ;
$found = true;
}
}
if (!$found)
echo ''.$uncheck.'<h3 class="head8">'. $val_c.'</h3>' ;
}
echo '
</div>
</div>

Use this style
h3 {
display:inline;
}

I already solved it. i just placed the <div class="col-sm-12"> inside the first foreach.

Related

Retrieving Image from folder using codeigniter

I want to retrieve image from folder and rest of data from database using CodeIgniter.
Right now I am able to retrieve data only from database.
Can anyone explain how to get an image from any folder and display it in a web page.
Follow this procedure:
Model
function getDataByID ($user_id)
{
$q = $this->db->query("SELECT name, image FROM tbl_user WHERE user_id = $user_id");
if ($q->num_rows() > 0) {
$d = $q->row_array();
if ($d['image'] != '') {
$temp = $d['image'];
$d['image'] = "http://domain.com/myimages/".$temp;
} else {
$d['image'] = '';
}
return $d;
} else {
return array();
}
}
Controller
function user_detail($user_id)
{
$dt = $this->code_model->getDataByID($user_id);
$display['user_data'] = $dt;
$this->load->view('user_view',$display);
}
View
if(isset($user_data) && !empty($user_data)) {
extract($user_data);
} ?>
<div class="form-group">
<label class="col-lg-2 control-label">Name</label>
<div class="col-lg-6">
<?php echo $name; ?>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Image</label>
<div class="col-lg-6">
<img src="<?=$image?>">
</div>
</div>
I am not sure how you are constructing the page, but the easiest way to add an image is to set the data to a variable in PHP and adding it to the <img> tag:
<img src="{base_url}_assets/_images/folder/<?=$productData[0]->Image1?>" />

how to create space between anchor tag elements in loop in paging

I'm creating a paging option in my website. The problem is that the paging digits is not align in the appropriate way in fact the images is attached. [This is my image in which number not align correctly
This is output of my paging numbers:
This is my code.
<section>
<div class="container" style="padding-bottom:10px; font-size:20px;">
<?php $sql1 = "SELECT * FROM videos ";
$query = $conn->query($sql1);
// Return the number of rows in result set
$rowcount = $query->rowCount();
$a=$rowcount/3;
$a= ceil($a);
for($b=1; $b<=$a; $b++)
{
?> <a style=" " href="index.php?page=<?php echo $b; ?>"><?php echo $b. " " ?> </a> <?php
}?>
</div>
</section>
But I want to align these numbering in this way:
This image exactly shows requirement of my result:
please anyone can help me. how to fix it. thanks
you should use a table as grid
Try this
<table>
<tr>
<?php
$numbers_per_row = 5;
$rowi= 0;
$numbers_limit = 25;
for($b=1; $b<=$numbers_limit ; $b++)
{
echo '<td><a href="index.php?page='.$b.'">'.$b.'</td>';
if($rowi<=$numbers_per_row) {
$rowi++;
}
else { echo '</tr><tr style="margin-top:10px;">';
/* <-- change it ^ to what you want */
/* Reset counter */
$rowi = 0; }
}
?>
</table>

Organizing database content with jquery mobile using php

So I have this code :
<div data-role="content" class="ui-widget-content" align="justify">
<div class="ui-grid-a">
<div class="ui-block-a" id="clients"><strong>Clients</strong></div>
<div class="ui-block-b" id="freelancers"><strong>Freelancers</strong></div>
<?php
$sql = "SELECT * FROM users";
$query =mysqli_query($link,$sql) or die(mysqli_error($link));
$checkuser= mysqli_num_rows($query);
if ($checkuser > 1) {
while($row = mysqli_fetch_assoc($query)) {
extract($row);
if ($usertype == 'client') {
echo '<div class="ui-block-a" align="justify"> '.ucfirst($username).'</div>';
}
if ($usertype == 'freelancer') {
echo '<div class="ui-block-b" align="justify"> '.ucfirst($username).'</div>';
}
}
}
mysqli_close($link);
?>
</strong></div>
And it gives out this result :
Can someone help me understand why the second column freelancers displays the data spaced like that and what I need to change in my code to make it look like the first column, without that vertical spacing ?

Inserting mysql inside a div inside an array

I have created a database to access the images inside a slider which uses jquery. The problem starts when I try to insert the connection given that it is an array:
<?php
$slides = array(
'<div data-thumb="images/slider/slides/image1_small.jpg" data-src="images/slider/slides/image1.jpg">
<div class="camera_caption fadeFromBottom">
Text 1 below image
</div>
</div>',
'<div data-thumb="images/slider/slides/image2_small.jpg" data-src="images/slider/slides/image2.jpg">
<div class="camera_caption fadeFromBottom">
Text 2 below image
</div>
</div>',
'<div data-thumb="images/slider/slidesimage3_small.jpg" data-src="images/slider/slides/image3.jpg">
<div class="camera_caption fadeFromBottom">
Text 3 below image
</div>
</div>'
);
shuffle($slides);
foreach ($slides as $slides) {
echo "$slides\n";
}
?>
My question is, is there a way to change that array to access the images and the text? I've tried with a while loop but couldn't figure it out.
Update: What I want is to change the array to
<?php
$query = "SELECT * FROM tblslider";
if ($result=mysqli_query($connection, $query)) {
while ($slides = mysqli_fetch_array($result)) {
'<div data-thumb="images/slider/slides/<? echo $row_DataSlider['strImagesmall'] ?>" data-src="images/slider/slides/<? echo $row_DataSlider['strImage'] ?>">
<div class="camera_caption fadeFromBottom">
<? echo $row_DataSlider['strText'] ?>
</div>
</div>'
}
}
?>
obviously this is not possible but im looking for a solution to get something like it
I believe you have a typo in your foreach...foreach ($slides as $slides) (using $slides twice)
I'd put:
foreach ($slides as $s) {
echo $s . "</br>";
}

How to push <DIVS> together, vertically?

I've been looking for a solution for this, for a long time now.
How can I vertically push divs together (see attached image).
It's been suggested to use specific CSS coding, but that is no good in this case as the div height is not set - it changes depending on the content being loaded.
------------------Added information ------------------
As requested, this is the code the populates the divs using content from a database. The divs simply need to be pushed up as shown in the attached image.
<?php
require_once('../scripts/include.php');
$who = 65; //temp value to be deleted
$result = mysql_query(
"SELECT
tbl_status.id as statID,
tbl_status.from_user as statFROM,
tbl_status.status as statSTATUS,
tbl_status.deleted as statDEL,
tbl_status.date as statDATE,
tbl_users.id as usrID,
tbl_users.name as usrNAME,
tbl_users.location as usrLOCATION,
tbl_photos.profile as photosPROFILE,
tbl_photos.photo_link as photoLINK,
tbl_photos.default_photo as photoDEFAULT
FROM tbl_status
LEFT JOIN tbl_users ON tbl_status.from_user = tbl_users.id
LEFT JOIN tbl_photos ON tbl_photos.profile = tbl_users.id
WHERE tbl_status.deleted = '0' AND tbl_photos.default_photo IS NULL OR tbl_photos.default_photo = '1'
ORDER BY tbl_status.date desc
LIMIT 24
");
while($row = mysql_fetch_array($result))
{
$sampleText = $row['statSTATUS'];
$pattern = '/#[a-zA-Z0-9]*/';
$replacement = '$0';
$updatedText = preg_replace($pattern, $replacement ,$sampleText);
echo'
<div class="statusCont" style="width:150px;">
<div class="statusUsr">' . $row['usrLOCATION'] . '</div>
<div class="statusTxt"><p>' . $updatedText . '</p></div>
<div class="statBackground" style="background-image:url(../assets/uploads/resized_' . $row['photoLINK'] .');
background-repeat:no-repeat; background-size:100%;width:150px; height:50px; opacity:1;"></div>
</div><!-- ends .statusCont -->
';}
?>
I have an idea which I think you can implement in your site with the 3-column idea.
How about using the MOD % of the total posts displayed on your page.
Since you have 3 columns, the first post will be in the first column. If a second post post out, the first one will display on the second column, and etc.
Let the total number of post displayed on the page be $total.
And let the current number be $current.
$total; // the total divs will be displaying in the page
for ($current = 1; $currrent < $total+1; $current++)
{
if($current % 3 == 1)
{
//the code php or javascript to display <div> in column 1
}
else if($current % 3 == 2)
{
//the code php or javascript to display <div> in column 2
}
else if($current % 3 == 0)
{
//the code php or javascript to display <div> in column 3
}
}
Please forgive me if I made mistakes in the code but you get the idea.
Do 3 columns :
Codepen
HTML
<div id="col1" class="col">
<div id="rand1"></div>
<div id="rand2"></div>
</div>
<div id="col2" class="col">
<div id="rand3"></div>
<div id="rand4"></div>
</div>
<div id="col3" class="col">
<div id="rand5"></div>
<div id="rand6"></div>
</div>
CSS
.col {
width:100px;
float:left;
margin-left:10px
}
#rand1
{
height:90px;
background: pink;
}
#rand2
{
height:100px;
background: green;
}
#rand3
{
height:200px;
background: grey;
}
#rand4
{
height:200px;
background: red;
}
#rand5
{
height:300px;
background: green;
}
#rand6
{
height:150px;
background: red;
}
PHP
<?php
$i=1;
$sampleText = array();
$pattern = array();
$replacement = array();
$updatedText = array();
while($row = mysql_fetch_array($result))
{
$sampleText[$i] = $row['statSTATUS'];
$pattern[$i] = '/#[a-zA-Z0-9]*/';
$replacement[$i] = '$0';
$updatedText[$i] = preg_replace($pattern, $replacement ,$sampleText[$i]);
$Myvar[$i] ='<div class="statusCont" style="width:150px;">
<div class="statusUsr">' . $row['usrLOCATION'] . '</div>
<div class="statusTxt"><p>' . $updatedText[$i] . '</p></div>
<div class="statBackground" style="background-image:url(../assets/uploads/resized_' . $row['photoLINK'] .');
background-repeat:no-repeat; background-size:100%;width:150px; height:50px; opacity:1;"></div>
</div>';
$i++;
}
$col1=1;
$col2=2;
$col3=3;
$i=$i-1;
//column2
echo '<div class="col">';
while($col1<=$i) {
echo $Myvar[$col1] ;
$col1=$col1+3;
}
echo '</div>';
//column2
echo '<div class="col">';
while($col2<=$i) {
echo $Myvar[$col2] ;
$col2=$col2+3;
}
echo '</div>';
//column 3
echo '<div class="col">';
while($col3<=$i) {
echo $Myvar[$col3] ;
$col3=$col3+3;
}
echo '</div>';
print_r ($Myvar);
?>