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