1

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

enter image description here

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');

});
MareGraphics MaRe
  • 419
  • 4
  • 11
  • You're scrolling to next .g not the next .conteiner – Adrien Mar 03 '19 at 20:52
  • @Adrien I have tried with `.conteiner` too. But for some reason it won't scroll. Maybe because PHP creates 3 new `.conteiner`s all of them with `.active` but that `.active` class should only be applied to the first `.conteiner` – MareGraphics MaRe Mar 03 '19 at 20:55

1 Answers1

0

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');

});
Adrien
  • 497
  • 4
  • 9