HTML is processed first in the footer - php

I've got a problem
In my Footer, there is am Part Html the PHP and then HTML again. The Problem is that on the website the whole HTML is shown before the PHP. You can see it in the photo below.
Thanks, J.S.
<footer class="row align-items-center block bg-light border-t-o">
<!-- Footer Titel -->
<div class="col-lg text-left footer-content">
<h1 class="sponsor">Sponsoren:</h1>
</div>
<!-- Sponsorenbilder -->
<?php
$random1 = rand(1,4);
$random2 = rand(1,4);
$random3 = rand(1,4);
$random4 = rand(1,4);
echo "
<div class='col-md text-center footer-content' style='order: " . $random1 . ";'>
<img class='img-fluid img-hover' src='images/footer/bsp.jpg' alt='Sponsor 1'></img>
</div>
<div class='col-md text-center footer-content' style='order: " . $random2 . ";'>
<img class='img-fluid img-hover' src='images/footer/bsp.jpg' alt='Sponsor 2'></img>
</div>
<div class='col-md text-center footer-content' style='order: " . $random3 . ";'>
<img class='img-fluid img-hover' src='images/footer/bsp.jpg' alt='Sponsor 3'></img>
</div>
<div class='col-md text-center footer-content' style='order: " . $random4 . ";'>
<img class='img-fluid img-hover' src='images/footer/bsp.jpg' alt='Sponsor 4'></img>
</div>
";
?>
<!-- Impressum Button -->
<div class="col-lg text-right footer-content">
<h1 class="impressum impressum-style"><a class="impressum-style" href="impressum.html">Impressum</a></h1>
</div>
</footer>

The problem, if I understand correctly, is not that the PHP is actually loading second, but rather that the actual block of code generated by the PHP is positioned differently to the flow of code.
This is because columns that are given the order style are actually placed after columns that do not have the order style.
To fix this, you can use more PHP to ensure that the 3rd block of code is given an order which is higher than all the others.
<?php
function getHighest($list_of_numbers){
$highest = 0;
foreach($list_of_numbers as $list_item){
if ($list_item > $highest){
$highest = $list_item;
}
}
return $highest;
}
$highest = getHighest([$random1, $random2, $random3, $random4]) + 1;
echo "<div class='col-lg text-right footer-content' style='order: ${highest}'>"
?>

Related

Displaying data from while loop into html code

I need tips or direction on how can I display data from mysql using echo. But I want to display it in html code. I want to display $row["title"] of first title in mysql instead title1 and $row["content"] of first content in mysql instead content1 and do that for all 3 divs. php code works fine I just can't figure out how to make that possible.
<div class="carousel-inner" style="background-size:cover;">
<div class="item active">
<img src="img/road1.jpg">
<div class="carousel-caption d-none d-md-block">
<h2>title1</h2>
<p>content1</p>
</div>
</div>
<div class="item">
<img src="img/road2.jpg">
<div class="carousel-caption d-none d-md-block">
<h2>title2</h2>
<p>content2</p>
</div>
</div>
<div class="item">
<img src="img/road3.jpg">
<div class="carousel-caption d-none d-md-block">
<h2>title3</h2>
<p>content3</p>
</div>
</div>-->
<?php
session_start();
include_once("db.php");
$sql = "SELECT * FROM news";
$query = mysqli_query($conn, $sql);
if (mysqli_num_rows($query) > 0) {
while($row = mysqli_fetch_assoc($query)) {
echo "<h2>" . $row["title"] . "</h2>";
echo "<p>" . $row["content"] . "</p>";
}
} else {
echo "0 results";
}
?>
You're almost there. Just move the html into the echo of the while loop.
echo '<div class="carousel-inner" style="background-size:cover;">';
$counter = 1;
while($row = mysqli_fetch_assoc($query)) {
echo '
<div class="item ' . ($counter == 1 ? 'active' : '') . '">
<img src="img/road{$counter}.jpg">
<div class="carousel-caption d-none d-md-block">
<h2>' . $row["title"] . '</h2>
<p>' . $row["content"] . '</p>
</div>
</div>';
$counter++;
}
echo '</div>';
The only issue is the image, realistically you'd save the image in the database with the title and content then use the same method but for this simple case lets just use a counter
please note that I change your entire code a little bit to make the desired results...
<div class="carousel-inner" style="background-size:cover;">
<?php
session_start();
include_once("db.php");
$sql = "SELECT * FROM news";
$query = mysqli_query($conn, $sql);
if (mysqli_num_rows($query) > 0) {
while($row = mysqli_fetch_assoc($query)) { ?>
<div class="item active">
<img src="img/road1.jpg">
<div class="carousel-caption d-none d-md-block">
<h2><?php echo $row["title"]; ?></h2>
<p><?php echo $row["content"]; ?></p>
</div>
</div>
<?php
}
} else {
echo "0 results";
}
?>
Also note that I'm repeating just the first image... You need an extra on planning to determine how to handle images in code and then update this one.

Show first 4 items inside div with class active rest without

I got some projects that use a template layout/slider. The slider works by wrapping the first 4 projects in a div with class active and the rest inside divs without active but still grouped per 4.
I tried the following:
$tel = 1;
foreach($projectcr1 as $projects1) {
$projectimages = $projects1['images']; // Get image parameters of the article
$projectimgs = json_decode($projectimages); // Split the parameters apart
if($projectimgs->image_intro != ''){
$img = 'cms/'.$projectimgs->image_intro;
}else{
$img = 'cms/images/placeholder/placeholder.jpg';
}
if (strlen($projects1['introtext']) > 40){
$shortstrproj = substr($projects1['introtext'], 0, 40) . '...';
}else{
$shortstrproj = $projects1['introtext'];
}
if($projects1['id'] != ''){
if($tel == 1){
$projecten1 .= '<div class="carousel-item active">
<div class="row">';
}
//Here I need the first 4 projects ($projecten1 below is one project being looped)
$projecten1 .= '
<div class="col-xs-12 col-sm-6 col-lg-3 js-wpg-item" data-categories="'.$projects1['categorie_alias'].'">
<a class="card portfolio-grid__card js-wpg-card" href="project/'.$projects1['content_alias'].'.html">
<div class="imgwrapport">
<img width="360" height="180" src="'.$img.'" class="card-img-top portfolio-grid__card-img" alt="photo1" srcset="'.$img.' 360w, '.$img.' 300w, '.$img.' 768w, '.$img.' 540w, '.$img.' 830w"
sizes="(max-width: 360px) 100vw, 360px">
</div>
<div class="card-block portfolio-grid__card-block">
<h5 class="card-title ortfolio-grid__card-title">'.$projects1['title'].'</h5>
<p class="portfolio-grid__card-price">'.strip_tags($shortstrproj).'</p>
<div class="portfolio-grid__card-items">
<p class="portfolio-grid__card-item">
Bekijk project
</p>
</div>
</div>
</a>
</div>';
if(($tel % 4) == 0){
$projecten1 .= '</div></div><div class="carousel-item">
<div class="row">';
// Here I need the rest of the projects
$projecten1 .= '</div></div>';
}
$tel++;
}
}
echo $projecten1;
?>
If $tel = 1 wrap the div with active around the items. Then when $tel % 4 leaves 0 (4 divided by 4 leaves 0), close the divs and start new ones but this time without the active class.
This works fine, my only issue is how to seperate the data. How can I show the first 4 projects inside the first div, and the rest in the following divs without active class?
Example how I want the code in the end:
<div class="carousel-item active">
<div class="row">
project1
project2
project3
project4
</div>
</div>
<div class="carousel-item">
<div class="row">
project5
project6
project7
project8
</div>
</div>
<div class="carousel-item">
<div class="row">
project9
project10
project11
project12
</div>
</div>
try this Code . if u have questions about the code just post under it.
<?php
$tel = 1;
$next_div = true;
$foreach_ended = 0;
// 2 New vars they are needed for the right output down
foreach($projectcr1 as $projects1) {
$projectimages = $projects1['images']; // Get image parameters of the article
$projectimgs = json_decode($projectimages); // Split the parameters apart
if($projectimgs->image_intro != ''){
$img = 'cms/'.$projectimgs->image_intro;
}else{
$img = 'cms/images/placeholder/placeholder.jpg';
}
if (strlen($projects1['introtext']) > 40){
$shortstrproj = substr($projects1['introtext'], 0, 40) . '...';
}else{
$shortstrproj = $projects1['introtext'];
}
if($projects1['id'] != '')
{
$foreach_ended=0;
// set to 0 when a DIV is Open.
if($tel == 1&&$next_div==true){ /* set the first ACTIVE div with $next_div */
$projecten1 .= '<div class="carousel-item active"><div class="row">';
$next_div=false; /* set it to false so every new 4xDIV is not Active */
}
elseif($tel == 1&&$next_div!=true)
{
$projecten1 .= '<div class="carousel-item"><div class="row">';
}else{}
$projecten1 .= '
<div class="col-xs-12 col-sm-6 col-lg-3 js-wpg-item" data-categories="'.$projects1['categorie_alias'].'">
<a class="card portfolio-grid__card js-wpg-card" href="project/'.$projects1['content_alias'].'.html">
<div class="imgwrapport">
<img width="360" height="180" src="'.$img.'" class="card-img-top portfolio-grid__card-img" alt="photo1" srcset="'.$img.' 360w, '.$img.' 300w, '.$img.' 768w, '.$img.' 540w, '.$img.' 830w"
sizes="(max-width: 360px) 100vw, 360px">
</div>
<div class="card-block portfolio-grid__card-block">
<h5 class="card-title ortfolio-grid__card-title">'.$projects1['title'].'</h5>
<p class="portfolio-grid__card-price">'.strip_tags($shortstrproj).'</p>
<div class="portfolio-grid__card-items">
<p class="portfolio-grid__card-item">
Bekijk project
</p>
</div>
</div>
</a>
</div>';
if(($tel % 4) == 0){
$tel=1; /* reset Tel */
$projecten1 .= '</div></div>'; /* End DIV when 4x is reached */
$foreach_ended=1; /* set DIV to closed */
}
else
{
$tel++;
}
}
}
if($foreach_ended==0){$projecten1 .= '</div></div>';} /* when the Foreach enden and the LAST div had less then 4 items its not marked as CLOSED . so this IF closes the last open DIV */
echo $projecten1;
?>

msqli_fetch_array or assoc and css getting empty spaces

I am developing a simple project but encountered a problem which I can not find solution.
The follow php code:
<?php include "header.php"; ?>
<?php
$subtitle = "Os teus animes favoritos diariamente!";
$conn = mysqli_connect("$host","$dbuser","$dbpw","$db");
if (mysqli_connect_errno())
{
echo "Falha ao ligar à Base de Dados: " . mysqli_connect_error();
}
$result = mysqli_query($conn, "SELECT * FROM m_capitulos ORDER BY 'm_capitulos'.'id_cap' DESC LIMIT 30") or die(mysqli_error($conn));
mysqli_close($conn);
?>
<section class="mbr-section mbr-section--relative mbr-section--fixed-size mbr-after-navbar" id="features1-3" style="background-color: rgb(255, 255, 255);">
<div class="mbr-section__container container"><!-- "mbr-section__container--std-top-padding" para dar padding no top! -->
<div class="mbr-section__row row">
<?php while ($row = mysqli_fetch_array($result)){ ?>
<div class="mbr-section__col col-xs-12 col-sm-4">
<div class="mbr-section__container mbr-section__container--center mbr-section__container--middle">
<figure class="mbr-figure"><img class="mbr-figure__img" src="<?php echo $row['p_thumb']; ?>"></figure>
</div>
<div class="mbr-section__container mbr-section__container--middle">
<div class="mbr-header mbr-header--reduce mbr-header--center mbr-header--wysiwyg">
<h3 class="mbr-header__text"><?php echo $row['nombre_cap']; ?></h3>
</div>
</div>
<div class="mbr-section__container mbr-section__container--last">
<div class="mbr-buttons mbr-buttons--center">DOWNLOAD</div>
<br>
<div class="mbr-buttons mbr-buttons--center">DOWNLOAD</div>
<br>
<div class="mbr-buttons mbr-buttons--center">ASSISTIR</div>
</div>
</div>
<?php } ?>
</div>
</div>
</section>
<?php include "footer.php"; ?>
But when I remove the page css the empty space between the results disappears.
The Empty Space on the midle of my content box :
The result on the right just above the space is shorter, thus the next element goes below it instead of going to next row. I suggest you split elements into groups of 3 so that they can go into rows, or alternatively set the height for each result so that they all line up.
The example below adds a counter; every time you run through an element it checks if the element count divides by three, and if so, starts a new row. The same check is done at the end, except that it checks whether the element is the last in the row-of-three, and if so, ends the row tag.
<?php
$i = 0;
while ($row = mysqli_fetch_array($result)){ ?>
<?php if ($i % 3 == 0): ?><div class="row"><?php endif; ?>
<div class="mbr-section__col col-xs-12 col-sm-4">
<div class="mbr-section__container mbr-section__container--center mbr-section__container--middle">
<figure class="mbr-figure"><img class="mbr-figure__img" src="<?php echo $row['p_thumb']; ?>"></figure>
</div>
<div class="mbr-section__container mbr-section__container--middle">
<div class="mbr-header mbr-header--reduce mbr-header--center mbr-header--wysiwyg">
<h3 class="mbr-header__text"><?php echo $row['nombre_cap']; ?></h3>
</div>
</div>
<div class="mbr-section__container mbr-section__container--last">
<div class="mbr-buttons mbr-buttons--center">DOWNLOAD</div>
<br>
<div class="mbr-buttons mbr-buttons--center">DOWNLOAD</div>
<br>
<div class="mbr-buttons mbr-buttons--center">ASSISTIR</div>
</div>
</div>
<?php if ($i % 3 == 2): ?></div><?php endif;
$i++
?>
<?php } ?>

Always show specific result at the end of a for each loop

I got a project page that echoes multiple projects in a foreach loop, and every 4 results it starts a new row on the page.
However I got an element that always needs to be shown as the last result. How can I achieve that?
My foreach loop:
<?
$tel = 1;
foreach ($projectcr as $project) {
$article_images = $project['images']; // Get image parameters of the article
$pictures = json_decode($article_images); // Split the parameters apart
$introtext = $project['introtext'];
if ($project['title'] != '') {
if($tel == 1) {
echo '<div class="row">';
}
echo '
<div class="col-xs-12 col-sm-6 col-lg-3 js-wpg-item" data-categories="gardening">
<a class="card portfolio-grid__card js-wpg-card" href="project/'.$project['alias'].'.html">
<img src="cms/'.$pictures->{'image_intro'}.'" class="card-img-top portfolio-grid__card-img wp-post-image" alt="19" height="240" width="360">
<div class="card-block portfolio-grid__card-block">
<h5>'.$project['title'].'</h5>
<p>'.$project['created'].'</p>
</div>
</a>
</div>'
;
if(($tel % 4) == 0){
echo '</div> <div class="row">';
}
$tel++;
}
}
if(($tel % 4) != 0){
echo '</div>';
}
?>
The element I want to be shown as last block:
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-3 js-wpg-item" data-categories="">
<div class="portfolio-grid__card portfolio-grid__card--dummy js-wpg-card" href="projects/">
<div class="portfolio-grid__card-block text-center">
<span class="fa fa-cloud-upload fa-2x"></span>
<h5>Uw volgende project hier?</h5>
<p class="portfolio-grid__card-text">
NEEM CONTACT OP
</p>
</div>
</div>
</div><!-- /.col -->
</div><!-- /.row -->
This has the following result:
The element is now shown outside the row, while I need it to be inside the row (but only the last one).
Change your last if condition just after ending foreach
if(($tel % 4) != 0){
//echo div.col-... inside .row started in loop
echo '<div class="col-xs-12 col-sm-6 col-lg-3">always to be shown at last</div>';
//end .row
echo '</div>';
}
Add the content you want to show at the end of the loop. Don't check the condition and add the closing tag for row div, because it will fail to add the close tag if modulus of $tel is equal to zero. Your last content should be shown in new row but it will not close the tag.
$last = <div class="col-xs-12 col-sm-6 col-lg-3 js-wpg-item" data-categories="">
<div class="portfolio-grid__card portfolio-grid__card--dummy js-wpg-card" href="projects/">
<div class="portfolio-grid__card-block text-center">
<span class="fa fa-cloud-upload fa-2x"></span>
<h5>Uw volgende project hier?</h5>
<p class="portfolio-grid__card-text">
NEEM CONTACT OP
</p>
</div>
</div>
</div>
foreach($projectcr as $project) {
...//your code
...
}
echo $last. '</div>';
There are multiple ways to achieve that but can't you just add a element to your array?
$p = [];
$p['title'] = 'Uw volgende project hier?';
$p['created'] = 'NEEM CONTACT OP'
array_push($projectcr, $p);
A other way to do it is to check if its the last element in the array
$lastElement = end($array);
// you code
if($project == $lastElement){
//add the static block
}

Delay on div after new picture

ok i have a script which change the image everytime you rate it, and it is working great, but the problem is that people can spam the rating system so i thought it could be possible to do some sort of delay before the div which contains the rating shows up after the new image was set
code to the ratingbar which should be delayed:
<div id="button" onclick="changeSrc2()">
<div class="rate_widget" id="<? echo $id;?>">
<div class="star_1 ratings_stars"></div>
<div class="star_2 ratings_stars"></div>
<div class="star_3 ratings_stars"></div>
<div class="star_4 ratings_stars"></div>
<div class="star_5 ratings_stars"></div>
<div class="total_votes">vote data</div>
</div>
</div>
code to change the image onclick on the rating bar:
$number="1";
$wrongnumber="2";
$random = mysql_query("SELECT * FROM images ORDER BY RAND()");
$place="upload/";
echo '<script type="text/javascript"> ';
while($wor = mysql_fetch_array($random))
{
$ids=$wor['id'];
$name = $wor['name'];
$images = $place . $wor['name'];
$number=$number + 1;
$wrongnumber=$wrongnumber + 1;
echo 'function ' . 'changeSrc' . $number . '() '; ?>
{
document.getElementById("rand").src="<? echo $images;?>";
document.getElementById("button").onclick=changeSrc<? echo $wrongnumber;?>;
document.getElementsByClassName('rate_widget')[0].id = <? echo $ids;?>;
}
<?
}
?>
</script>
and code to display the first images:
/*Display images*/
$r = mysql_query("SELECT * FROM images ORDER BY RAND() LIMIT 1");
while($wor = mysql_fetch_array($r))
{
$place="upload/";
$id=$wor['id'];
$name = $wor['name'];
$image = $place . $wor['name'];
echo '<img id="rand" src="'.$image.'" style="max-height:330px;">';
}
Try to use sleep() functions. It would look like this:
<?php
sleep(2);
echo '
<div id="button" onclick="changeSrc2()">
<div class="rate_widget" id=' . $id . '">
<div class="star_1 ratings_stars"></div>
<div class="star_2 ratings_stars"></div>
<div class="star_3 ratings_stars"></div>
<div class="star_4 ratings_stars"></div>
<div class="star_5 ratings_stars"></div>
<div class="total_votes">vote data</div>
</div>
</div>
';
?>

Categories