Basically what I need to do foreach three divs and show 5 services from the database.
I don't know how to do that. Can someone explain to me how?
I try everything but just I have no idea how to do it.
Second div should not be in row.
Output be like on image link that I put below.
Thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-4">
<div class="row">
<div class="service-img service" style="background-image: url(images/image1.jpg); height: 300px; background-color: red;">
<figcaption>
<h3>Service Title Goes Here 1</h3>
</figcaption>
</div>
</div>
<div class="row">
<div class="service-img service" style="background-image: url(images/image2.jpg); height: 300px; background-color: green;">
<figcaption>
<h3>Service Title Goes Here 2</h3>
</figcaption>
</div>
</div>
</div>
<div class="col-lg-4 service-middle">
<div class="service-img service" style="background-image: url(images/image3.jpg); height: 600px; background-color: blue;">
<figcaption>
<h3>Service Title Goes Here 3</h3>
</figcaption>
</div>
</div>
<div class="col-lg-4">
<div class="row">
<div class="service-img service" style="background-image: url(images/image4.jpg); height: 300px; background-color: yellow;">
<figcaption>
<h3>Service Title Goes Here 4</h3>
</figcaption>
</div>
</div>
<div class="row">
<div class="service-img service" style="background-image: url(images/image5.jpg); height: 300px; background-color: pink;">
<figcaption>
<h3>Service Title Goes Here 5</h3>
</figcaption>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
This should look like this
Hmm, I can't test this out yet but try to put this css; What it does is, were setting the height of .service-img.service to 50%. Then on the selector .service-middle>.service-img.service we're adding 100% height.
Do let me know if this worked and how it looked like on your screen. Thanks.
PS: dont run snippet, just use the css, bootstrap is not included.
.service-img.service {
height: 50%;
}
.height100{
height:100px;
}
.service-middle>.service-img.service{
height:100% !important;
}
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="row height100">
<div class="col-lg-4">
<div class="row">
<div class="service-img service" style="background-image: url(images/image1.jpg); height: 300px; background-color: red;">
<figcaption>
<h3>Service Title Goes Here 1</h3>
</figcaption>
</div>
</div>
<div class="row">
<div class="service-img service" style="background-image: url(images/image2.jpg); height: 300px; background-color: green;">
<figcaption>
<h3>Service Title Goes Here 2</h3>
</figcaption>
</div>
</div>
</div>
<div class="col-lg-4 service-middle">
<div class="service-img service" style="background-image: url(images/image3.jpg); height: 618px; background-color: blue;">
<figcaption>
<h3>Service Title Goes Here 3</h3>
</figcaption>
</div>
</div>
<div class="col-lg-4">
<div class="row">
<div class="service-img service" style="background-image: url(images/image4.jpg); height: 300px; background-color: yellow;">
<figcaption>
<h3>Service Title Goes Here 4</h3>
</figcaption>
</div>
</div>
<div class="row">
<div class="service-img service" style="background-image: url(images/image5.jpg); height: 300px; background-color: pink;">
<figcaption>
<h3>Service Title Goes Here 5</h3>
</figcaption>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Not really sure if the div.row should go in 2nd row, but I hope you get the idea.
I'm just using a ternary operator to add the service-middle class: <?php echo $num == 2? 'sevice-middle' : '' ?>
<?php if ($num == 1): ?>
<div class="col-lg-4" <?php echo 'num= '.$num; ?> >
<?php endif ?>
<?php foreach ($services as $service): $num++; ?>
<div class="row">
<div class="sevice-img service <?php echo $num == 2? 'sevice-middle' : '' ?> " style="background-image: url(<?php echo 'images/'.$service['image']); ?>); height: 300px;">
<figcaption>
<h3><?php echo $service['title']; ?></h3>
</figcaption>
</div>
</div>
<?php endforeach ?>
<?php if ($num > 0): ?>
</div>
<?php endif ?>
The primary bug you are facing is this:
<?php if ($num == 1): ?>
should be
<?php if ($num === 1): ?>
For more info:
How does true/false work in PHP?
Related
I have tried
<?php session_start(); ?>
.
.
.
<p><?php $_SESSION['loggeduser']; ?>;</p>
I have also tried this JS after the
<script type="text/javascript">
let vuser = '<%= session.getAttribute("loggeduser") %>';
document.getElementById("userid").value= "Not set";
</script>
If someone can tell me what am I doing wrong please!
This is my full body code:
<body>
<section id="MyHeader" style="border:solid red thin;">
<div id="TheHead" style="width:80%; display:inline-block;">
<div id="HeadImg" style="width: 100px; height:100px;">
<a href="main.html">
<img src="../images/icon-redcross.png" alt="AGR">
</a>
</div>
<div id="HeadLegend">
<div id="AGRbrand"><h1>AGR</h1></div>
<div id="quote">
<span style="font-size: small;"><i>Properties catalogue</i></span>
</div>
</div>
</div>
<div id="user" style="display:inline-block; width:12%; height:25px;">
<p id="userid" style="width:100%;"><?php $_SESSION['loggeduser'];?></p>
<script type="text/javascript">
let vuser = '<%= session.getAttribute("loggeduser") %>';
document.getElementById("userid").value= "Not set";
</script>
</div>
<div style="width:100%; display:block;">
<div id="MenuButtons" style="width:80%; display:flex; justify-content:right;">
<div id="newbtn" class="TopButton">New</div>
<div id="exitbtn" class="TopButton">Exit</div>
</div>
</div>
<div class="Subtitle">
<div style="display: flex; justify-content: left; width:100%;">
<h4>Properties</h4>
</div>
</div>
</section>
<div id="Estates" class="pagebreak"></div>
<section id="MyPage">
<div id="Home"></div>
<div class="page" style="width:100%; background-color: white; ">
<div style="display: flex; justify-content:center; width:100%;">
<div class="ServiceBox">
<div class="div-img">
<img src="../../images/house-B.png" alt="AGR">
</div>
<div class="div-info">
</div>
<div class="div-desc">
</div>
<div class="div-btns">
<a class="SideButton" href="Edit.html">Edit</a>
<a class="SideButton" href="Delete.html">Delete</a>
<a class="SideButton" href="pdf-file.html">Pdf</a>
</div>
</div>
</div>
</div>
</section>
</body>
Notes: $_SESSION["loggeduser"] is populated before this page,at the login page; I verified the variable was properly set by a log file I have, and I was able to see the value printed in the log, after the user logs in and before this page is loaded.
Not sure if it is the php version or the goDaddy servers, but in my case the problem was, I was using html extension for the files, I changed them to .php extension and the php code started to work.
I'm trying to display MySQL query in each card but how do I print the cards inline? It is now printing below one another but I want them to be on the same row horizontally.
<?php
$output="";
while($row = mysqli_fetch_array($result))
{
$id = $row['courseID'];
$name = $row['courseName'];
$category = $row['category'];
$description = $row['description'];
$output.=
"
<div class='col-sm-12'>
<div class='col-md-4 mb-5'>
<div class='card h-100'>
<div class='card-body'>
<h4 class='card-title'>$name</h4>
<p class='card-text'>$id</p>
<p class='card-text'>$description</p>
</div>
<div class='card-footer'><a href='#' class='btn btn-primary'>Assign</a></div>
</div>
</div>";
}
$output .= "</div></div>";
echo $output;
?>
just move your while into this :
<div class="container">
<div class="row">
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<!--from here-->
<div class="col-lg-4 col-md-6 col-sm-12 mb-5 mt-5">
<div class="card">
<div class="card-body">
<div class="card-title">
<h1>title</h1>
</div>
<div class="card-text">
<h5>body</h5>
<a class="btn btn-outline-primary rounded-0 float-end" href="" name="readmore">Read more</a>
</div>
</div>
</div>
</div>
<!--to here-->
</div>
</div>
duplicate the code between (from here) and (to here)
here is a for loop example I used a while ago:
<div class="container">
<div class="row">
<?php for ($i=0; $i < count($user_elements[0]) ; $i++):?>
<div class="col-lg-4 col-md-6 col-sm-12 mb-5 mt-5">
<div class="card">
<img class="card-img-top" src="<?php if(isset($user_elements)){echo "../private/uploads/".$thumbnail[$i];}?>">
<div class="card-body">
<div class="card-title">
<h1><?php echo $user_elements[4][$i];?></h1>
</div>
<div class="card-text">
<h5><?php echo $user_elements[5][$i];?></h5>
<a class="btn btn-outline-primary rounded-0 float-end" href="readmore.php?Post=<?php echo $user_elements[0][$i];?>" name="readmore">Read more</a>
</div>
</div>
</div>
</div>
<?php endfor?>
</div>
</div>
create a parent div with container as a class add one more div to that parent div with row as a class then add your cards in that row classed div.
ex:
<div class="container">
<div class="row">
//your cards div
</div>
</div>
Use this snippet. Grid can be better with grid-gap.
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 0.5rem;
grid-row-gap: 0.5rem;
padding: 10px;
}
.grid-item {
background-color: #999;
border: 1px solid #fff;
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>
</html>
You can make a new div before your while loop and join the
As you can see below, you will make a new div named cards
<?php
$output="<div class='cards' style='white-space:nowrap'>";
while($row = mysqli_fetch_array($result))
{
$id = $row['courseID'];
$name = $row['courseName'];
$category = $row['category'];
$description = $row['description'];
$output.=
"
<div class='col-sm-12' style='display:inline-block'>
<div class='col-md-4 mb-5'>
<div class='card h-100'>
<div class='card-body'>
<h4 class='card-title'>$name</h4>
<p class='card-text'>$id</p>
<p class='card-text'>$description</p>
</div>
<div class='card-footer'><a href='#' class='btn btn-primary'>Assign</a></div>
</div>
</div>";
}
$output .= "</div></div>";
echo $output;
?>
I hope by using this code the cards will align in same line.
When i am listing products i want them to have fixed height according to its step by step div's max height. For example below there is a screenshot from amazon that has what i want. All 4 elements' height are same.
and i'm using the code below to list products
<div class="shop-product-wrap">
<div class="row row-8">
<?php foreach ($products as $product): ?>
<div class="product-col col-lg-3 col-md-4 col-sm-6">
<!-- Single Product Start -->
<div class="single-product-wrap mt-10">
<div class="product-image">
<a href="<?= $product['url'] ?>"><img class="lazy"
src="<?= public_url('images/other/thumbnail.jpg') ?>"
data-src="<?= image_url($product['image_small']) ?>"
alt=""></a>
</div>
<div class="product-button">
<a onclick="wishlist.add(<?= $product['product_id'] ?>)"
class="add-to-wishlist">
<i class="icon-heart"></i></a>
</div>
<div class="product-content">
<h6 class="product-name"><?= $product['product_name'] ?>
</h6>
<div class="starts-icon-box">
<i class="stars-icon"></i>
</div>
<div class="price-box">
<div class="single-product-discount-and-price">
<?php if ($product['product_discount_price']): ?>
<span class="onsale"><?= (100 - (round(($product['product_price'] * 100) / $product['product_discount_price']))) . '%' ?></span>
<?php endif; ?>
<div class="old-and-new-price">
<span class="old-price"><?= $product['product_discount_price'] ?> TL</span>
<span class="new-price"><?= number_format($product['product_price'], 2) ?> TL</span>
</div>
</div>
</div>
<div class="product-button-action">
<a onclick="cart.add(<?= $product['product_id'] ?>,1)"
class="add-to-cart">Add to cart</a>
</div>
</div>
</div>
<!-- Single Product End -->
</div>
<?php endforeach; ?>
</div>
</div>
and when i listing products they all take the height they can according to their content such as its name and so that they don't have the same height. How can i make them have same height step-by-step.
Sorry for my bad english.
You have to use div tag with same class name for every product item and add a parent div like this...
<div class="parent">
<div class="child">Item 1</div>
<div class="child">Item 2</div>
<div class="child">Item 3</div>
<div class="child">Item 4</div>
</div>
Then use flex box for parent and child element...
.parent{
display: flex;
flex-wrap: wrap;
align-content: stretch;
height: 600px; /*or something*/
}
.child{
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
Please visit those links for more information about flex box...
https://www.w3schools.com/css/css3_flexbox.asp
https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_align-content_stretch
How can I accomplish for Bootstrap to push a column on next line if doesn't fit? This is a link how it is right now: Link to current page
Image of current page:
This is an image how it is right now. I'd like that the third image to drop to the row below if it doesn't fit.
This is code below
<div class="row">
<?php
if($members):
?>
<ul class="team_members">
<li>
<?php foreach($members as $member): ?>
<div class="cl col-xs-12 col-sm-3 col-md-3 col-lg-3">
<?php if($member["member_avatar"]): ?>
<div class="animated">
<div class="member drivprojekt" style="border-radius: 50%; width: 100%; height: 100%; overflow: hidden;">
<img src="<?php echo $member["member_avatar"]["sizes"]["member_thumb"]; ?>" alt="" />
</div>
</div>
<?php endif; ?>
</div>
<div class="cl col-xs-12 col-sm-3 col-md-3 col-lg-3">
<div class="member_info">
<h3><?php echo $member["member_name"]; ?></h3>
<h4><?php echo $member["member_position"]; ?></h4>
<p><?php echo do_shortcode(nl2br($member["member_description"])); ?></p>
</div>
</div>
<?php endforeach; ?>
</li>
</ul>
<?php endif; ?>
</div>
use flex-box
ul.team_members li{
display: flex;
flex-wrap: wrap;
}
you can use this kind of divs if you want. Its just a suggestion
<div class="cl col-xs-12 col-sm-3 col-md-2 col-lg-3"></div>
replace col-md-3 to col-md-2
I want to show the number of players in the server instead of that UNKNOWN thing, I haven't enabled the API yet, can I get help that, I want to integrate the progress bar to the total players in game like
if players are 50/100
= 50% of the bar will be filled.
Like the bar should work as the api updates.
<div class="is-clearfix"></div>
<section class="section dark-grey has-text-centered">
<div class="container">
<div class="heading">
<h1 class="title">Our Servers</h1>
<br>
</div>
<div class="columns is-gapless">
<div class="column">
<div class="card card-server">
<div class="card-image">
<figure class="image is-2by1">
<img src="./OutBreak Gaming_files/sfcnr_card1.png">
</figure></div> <div class="card-content">
<div class="title" style="font-size: 1.25em; color: rgb(119, 119, 119); margin-top: 0.5em;">87.98.241.207:7775</div>
<div class="players is-marginless">
<div class="content playersOnline">
Unknown PLAYERS ONLINE
</div>
<progress value="0" max="100" class="progress is-success"></progress>
<br></div> <a class="button is-info is-medium is-fullwidth">Play Now</a>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
Just use the SACNR monitor API, and
<div class="columns is-gapless">
<div class="column"><div class="card card-server">
<div class="card-image">
<figure class="image is-2by1">
<img src="./OutBreak Gaming_files/sfcnr_card1.png"></figure></div>
<div class="card-content">
<div class="title" style="font-size: 1.25em; color: rgb(119, 119, 119); margin-top: 0.5em;">87.98.241.207:7775</div> Hostname:
<div class="hosting"></div>Gamemode:
<div class="game-mode"></div>Map:
<div class="language"></div> Players:
<div class="players is-marginless"><div class="content playersOnline">
FETCHING PLAYERS ONLINE
</div>
<progress value="0" max="100" class="progress is-success"></progress><br></div>
<a class="button is-info is-medium is-fullwidth">Play Now</a></div></div></div></div></div></section></div>
Where We fetch from API the following things
<?php
require_once("sampsvr.php");
$monitor = new SACNR\Monitor;
//$obj = $monitor->get_info_by_id(1790345);
$obj = $monitor->get_info_by_ip('87.98.241.207','7775');
$players = $obj->Players;
$hostName = $obj->Hostname;
$Gamemode = $obj->Gamemode;
$Mapname = $obj ->Language;
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.progress').val(<?php echo $players;?>);
$('.playersOnline').html(<?php echo $players;?> +' PLAYERS ONLINE' );
$('.hosting').html("<?php echo $hostName;?>");
$('.game-mode').html("<?php echo $Gamemode;?>");
$('.language').html("<?php echo $Mapname;?>");
});
</script>
You may find the API at http://monitor.sacnr.com/api.html