First of all: I have already asked this question: How to scroll to next div using Javascript?
But this was only using javascript, with a static page.
Now I have a dynamic page that loads data from my database.
PHP:
<html>
<head>
<title>Page</title>
<link rel="stylesheet" href="main.php">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<script src="jquery.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<?php
//DB connection
$db_hostname = "localhost";
$db_username = "root";
$db_password = "";
$db_db = "php_testing";
$conn = new mysqli($db_hostname,$db_username,$db_password,$db_db);
$sql = "SELECT * FROM podaci";
$result = $conn->query($sql);
//print_r($result);die;
if ($result->num_rows > 0) {
// Show each data returned by mysql
while($row = $result->fetch_assoc()) {
?>
<div class="conteiner active">
<div class="g name">
<i class="fas fa-user"></i>
<h class="ime"><?= $row['ime'] ?>
<?= $row['prezime'] ?>
</h>
</div>
<div class="g date">
<i class="fas fa-calendar-alt"></i>
<h class="ime"><?= $row['datum_rodjenja'] ?></h>
</div>
<div class="g school">
<i class="fas fa-school"></i>
<h class="ime"><?= $row['skola'] ?></h>
</div>
<div class="g movie">
<i class="fas fa-film"></i>
<h class="ime"><?= $row['omiljeni_film'] ?></h>
</div>
<div class="g address">
<i class="fas fa-map-marker-alt"></i>
<h class="ime"><?= $row['adresa'] ?></h>
</div>
<div class="g uspjeh">
<i class="fas fa-marker"></i>
<h class="ime"><?= $row['uspijeh'] ?></h>
</div>
<div class="g jelo">
<i class="fas fa-utensils"></i>
<h class="ime"><?= $row['omiljeno_jelo'] ?></h>
</div>
<div class="g pjesma">
<i class="fas fa-music"></i>
<h class="ime"><?= $row['omiljena_pjesma'] ?></h>
</div>
<button class="next">NEXT</button>
</div>
<?php
}
} else {
echo "0 results";
}
$conn->close();
?>
</body>
</html>
Here's what my website looks like for now. .conteiner
is set to take height: 100vh
I have added main.js
file to make it so when I click NEXT
button it scrolls to next .conteiner
JAVASCRIPT:
$(".next").click(function() {
var $target = $('.conteiner.active').next('.conteiner');
if ($target.length == 0)
$target = $('.conteiner:first');
$('html, body').animate({
scrollTop: $target.offset().top
}, 'slow');
});
In your PHP change
while($row = $result->fetch_assoc()) {
?>
<div class="conteiner active">
to
$first = true;
while($row = $result->fetch_assoc()) {
?>
<div class="conteiner <?php if ($first) {$first = false; echo 'active';} ?>">
And in your JS :
$(".next").click(function() {
var $active = $('.conteiner.active');
var $target = $active.next('.conteiner');
if ($target.length == 0)
$target = $('.conteiner').first();
$active.removeClass('active');
$target.addClass('active');
$('html, body').animate({
scrollTop: $target.offset().top
}, 'slow');
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.