CODEWITHSUNDEEP
phpcookies
xo.
xo.

Reputation: 485

I cannot get a COOKIE to update it's value (which is an integer)

I have been working on this for so long now, I feel this is my last option, I have a slideshow on a html web page and they can essentially flick through all the way through to the end by scrolling. Essentially I want users to be able to go back to their dashboard and when they click to go back into the slideshow, to re-load the page they were on...

At the top of the page I have this:

    <?php
  if (!isset($_COOKIE['PageNo'])){
    setcookie("PageNo", 1, time() + (86400 * 30), "/"); // 86400 = 1 day, so set the cookie for a month long period
  }
?>

I am essentially saying set the cookie at 1 to begin with (the first page in the slideshow = 1, then above the next section I have the below:

<?php

    if($_COOKIE['PageNo'] >= 2) 
  {
    ?>

    <script>
      window.location.replace("<?php echo "istudy_university.php#slide=".$_COOKIE['PageNo']; ?> ");
    </script>

<?php
  }
    else
  { 
?>
  <script>
      window.location.replace("istudy_university.php#slide=1");
  </script>
<?php
  }
?>

Above each slide I have the below and just changing the slide=number:

<?php $_COOKIE['PageNo'] = 3; ?>

So I'm saying, if the cookie is more than or equal to 2, then go to the page no'x' else go to page 1. However all it keeps doing is bringing me back constantly to Page 1. Please help!! Am I setting the cookie wrong?

UPDATE: After sliding through some of the slides, the cookie should have changed to 5, however it's still 1?

enter image description here

UPDATED code showing the HTML for page:

        <?php
      session_start();
      require "includes/dbh.inc.php";
    ?>

    <?php
    echo $_COOKIE['PageNo'];
      //$_COOKIE['PageNo'] = 5; //Commented out, for testing
      if (!isset($_COOKIE['PageNo'])){
        setcookie("PageNo", 1, time() + (86400 * 30), "/"); // 86400 = 1 day, so set the cookie for a month long period
      }
    ?>
    <!doctype html>
    <html lang="en" prefix="og: http://ogp.me/ns#">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>iStudy University | Stress & Anxiety</title>
    <link rel="stylesheet" type='text/css' media='all' href="webslides.css" rel="stylesheet">
    <body>

        <script src="static/js/webslides.js"></script>

         <!-- BEGINNING OF SLIDES -->
         <?php

          if($_COOKIE['PageNo'] >= 2) 
          {
            ?>

            <script>
              window.location.replace("<?php echo "istudy_university.php#slide=".$_COOKIE['PageNo']; ?> ");
            </script>

        <?php
          }
            else
          { 
        ?>
          <script>
              window.location.replace("istudy_university.php#slide=1");
          </script>
        <?php
          }
        ?>
        <main role="main">
          <article id="webslides">
            <!-- SLIDE 1 -->

            <section class="bg-apple aligncenter">
             <span class="background dark" style="background-image: url('istudy_slides_images/abstract.jpg')"/></span>
              <div class="wrap" id="slide=1">
                <h1 class="text-landing">Stress & Anxiety</h1>
                <br>
                <br>
                <br>
                <hr id="hor-rule">
                <h1 class="slides-logo">iStudy University <i class="fas fa-graduation-cap"></i></h1>
                <h2 class="slogan">Designed by Students <br><span class="iv">IV</span> <br>Students</h2><br><br>
              </div>
            </section>

            <!-- SLIDE 2 -->
            <?php $_COOKIE['PageNo'] = 2; ?>
            <section class="aligncenter">
              <span class="background light" style="background-image: url('istudy_slides_images/mountain.jpg')"/></span>
              <div class="wrap" id="slide=2">
                <blockquote class="quote">
                  <p class>"No one can create negativity or stress within you. Only you can do that by virtue of how you process your world"</p>
                  <p><cite>Wayne Dyer</cite></p>
                </blockquote>
              </div>
            </section>

        <!-- SLIDE 3 -->
        <?php $_COOKIE['PageNo'] = 3; ?>
        <section class="bg-slide3">
          <div class="wrap size-80" id="slide=3">
            <h3 class="title stessAnx"><strong>&ensp;Stress & Anxiety</strong></h3><br>
              <p>Stress and anxiety are common experiences of students in higher education.<br>This module will introduce you to evidence based techniques for managing stress and anxiety based upon cognitive behavioural therapy (CBT).</p>
</section>
</div>

Upvotes: 2

Views: 217

Answers (1)

the.marolie
the.marolie

Reputation: 1079

Include jQuery library in both dashboard and slides page. Include Scrollify library in the slides page

In the dashboard page, add an id to the slide page navigation link, like:

<a  id="home" href="#">Slides</a>

Modify the sections in your slides page as follows:

  • Add a unique ID and a common class name for all the sections.

Example:

<section class="slides aligncenter" id="b">
        <span class="background light" style="background-image: url('istudy_slides_images/mountain.jpg')" /></span>
        <div class="wrap" id="slide=2">
            <blockquote class="quote">
                <p class>"No one can create negativity or stress within you. Only you can do that by virtue of how you process your world"</p>
                <p><cite>Wayne Dyer</cite></p>
            </blockquote>
        </div>
    </section>
    <!-- SLIDE 3 -->
    <section class="slides bg-slide3" id="c">
        <div class="wrap size-80" id="slide=3">
            <h3 class="title stessAnx"><strong>&ensp;Stress & Anxiety</strong></h3><br>
            <p>Stress and anxiety are common experiences of students in higher education.<br>This module will introduce you to evidence based techniques for managing stress and anxiety based upon cognitive behavioural therapy (CBT).</p>
    </section>

** The id for each section is given as 'b', 'c' etc.

** both section contains a common class name - 'slides'.

In the slides page, add the following JavaScript code in the footer.

$.scrollify({
    section: ".slides", //Rename the class name with the common class name that you gave for the sections
    after: function() {

        localStorage.setItem('currentPage', $.scrollify.current()[0].id)

    }
});

In the dashboard page, add the below JavaScript code to the footer at the end:

 <script>
      if(localStorage.getItem('currentPage') != ''){
          var newUrl = 'scroll.html#'+localStorage.getItem('currentPage');
        $("#home").attr("href", newUrl);
      }
    </script>

Upvotes: 1

Related Questions