Skip to content
Advertisement

Is it possible after making an action or in my case creating an event in calender then the page automatically scrolls down using JavaScript?

How to scroll down after making an event in calnder (code below), then page scrolls down automatically ? to end of the page or can be even adjust it ?

calender.php

<?php
include("includes/header.php");
include("includes/inavindexdiary.php");
?>

<section>
                <p><a class="button" href="index.php">E T U S I V U</a><a class="button" 
                href="analysointi.php">A N A L Y S O I N T I</a><a class="button" href="calender.php">K A L E N T E R I</a><a class="button" 
                href="profile.php">P R O F I I L I</a><a class="button" href="info.php">I N F O</a>
</section>


<form action="daily-entery.php">
    <button id="Päiväkirjamerkintä" type="submit">Move to kysely sivulla</button>
</form>



<script>

$(document).ready(function () {
    var calendar = $('#calendar').fullCalendar({
        editable: true,
        events: "fetch-event.php",
        displayEventTime: false,
        eventRender: function (event, element, view) {
            if (event.allDay === 'true') {
                event.allDay = true;
            } else {
                event.allDay = false;
            }

        },
        selectable: true,
        selectHelper: true,
        select: function (start, end, allDay) {
            var title = prompt('Event Title:');

            if (title) {
                var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
                var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");

                $.ajax({
                    url: 'add-event.php',
                    data: 'title=' + title + '&start=' + start + '&end=' + end,
                    type: "POST",
                    success: function (data) {
                        displayMessage("Added Successfully");
                        console.log("Added Successfully" + '  '+ title+'  '+ start+'  '+ end+'  ');
                    }
                });
                calendar.fullCalendar('renderEvent',
                        {
                            title: title,
                            start: start,
                            end: end,
                            allDay: allDay
                        },
                true
                        );
            }
            calendar.fullCalendar('unselect');
        },
        
        editable: true,
        eventDrop: function (event, delta) {
                    var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
                    var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
                    $.ajax({
                        url: 'edit-event.php',
                        data: 'title=' + event.title + '&start=' + start + '&end=' + end + '&id=' + event.id,
                        type: "POST",
                        success: function (response) {
                            displayMessage("Updated Successfully");
                        }
                    });
                },
        eventClick: function (event) {
            var deleteMsg = confirm("Do you really want to delete?");
            if (deleteMsg) {
                $.ajax({
                    type: "POST",
                    url: "delete-event.php",
                    data: "id=" + event.id,
                    success: function (response) {
                        //if(parseInt(response) > 0) {
                            $('#calendar').fullCalendar('removeEvents', event.id);
                            displayMessage("Deleted Successfully");

                        //}
                    }
                });
            }
        }

    });
});

function displayMessage(message) {
        $(".response").html("<div class='success'>"+message+"</div>");
    setInterval(function() { $(".success").fadeOut(); }, 1000);
}
</script>



    <div class="response"></div>
    <div id='calendar'></div>

    <div class="slogancontainer">
    
    <hr>
        <article>   
        <p class="slogan">"Love your heart, it loves you" </p>
        </article>
    </div>

  <?php
  include("includes/footer.php")
  ?>

add-event.php where i add the events :

<?php session_start(); ?>
<?php

require_once "db.php";

$title = isset($_POST['title']) ? $_POST['title'] : "";
$start = isset($_POST['start']) ? $_POST['start'] : "";
$end = isset($_POST['end']) ? $_POST['end'] : "";


//kirjautuneen käyttäjän userID?
$data2['email'] = $_SESSION['semail'];
//var_dump($data1);
$sql1 = "SELECT id FROM otium where email =  :email";
$kysely1 = $DBH->prepare($sql1);
$kysely1->execute($data2);
$tulos1 = $kysely1->fetch();

$data1['userID'] = $tulos1[0];

try {
    //Tiedot kantaan
    var_dump($_POST);

    $data1['title'] = $_POST['title'];
    $data1['start'] = $_POST['start'];
    $data1['end'] = $_POST['end'];

    $STH = $DBH->prepare("INSERT INTO tbl_events (title, start, end, userID) VALUES (:title, :start, :end, :userID);");
    $STH->execute($data1);

    $data4['userID'] = $data1['userID'];
    $sql4 = "SELECT start FROM tbl_events where userID =:userID ORDER BY start DESC LIMIT 10";

    $kysely4 = $DBH->prepare($sql4);
    $kysely4->execute($data4);
    $tulos2 = $kysely4->fetch();

    $_SESSION["startDate"] = $tulos2[0];
    $_SESSION['startDatelomake'] = $_POST['start'];

    file_put_contents('log/DBErrors.txt', 'Päiväys:' . $_SESSION["startDate"], FILE_APPEND);

    file_put_contents('log/DBErrors.txt', "n Merkintä hhhhhhhh on:"  . $title . "  " . $start . "  " . $end . "  " . ' id ' . $data1['userID'] . ' email ' . $_SESSION['semail'], FILE_APPEND);
    if (!$result) {
        $result = mysqli_error($DBH);
    }
} catch (PDOException $e) {
    echo "Yhteysvirhe: " . $e->getMessage();
    file_put_contents('log/DBErrors.txt', 'Connection: ' . $e->getMessage() . "n", FILE_APPEND);
}

?>

So after adding an event i would be scrolled down automatically, reaason why there is an form to be to be filled and submitted.

Advertisement

Answer

In the below part of your code, add a scrollBy() method. This allows you to set the scroll distance.

$.ajax({
    url: 'add-event.php',
    data: 'title=' + title + '&start=' + start + '&end=' + end,
    type: "POST",
    success: function (data) {
        displayMessage("Added Successfully");
        console.log("Added Successfully" + '  '+ title+'  '+ start+'  '+ end+'  ');
        window.scrollBy(0, 100);
    }
});
User contributions licensed under: CC BY-SA
6 People found this is helpful
Advertisement