jQuery panelSnap.js not working properly?

Question

and thanks in advance for any help.

I'm new into jQuerys and have been teaching myself through the help of GitHub. I have a very simple scroll-snap code written out, however, the actual snapping part is not working. I will paste my code right below:

<!DOCTYPE html>
<html>
<center>
<head>
  <link href="my.css" rel="stylesheet" type="css/text">
<meta name="robots" CONTENT="all">

<title></title>
<script type="text/JavaScript" src="/htdocs/jQuery/jquery-1.12.1.min.js">    </script>
 <script type="text/JavaScript" src="/htdocs/jQuery/jquery.panelSnap.js">     </script>
 <script>
      jQuery(function($) {
        $('body').panelSnap();
      });
    </script>
</head>
<body>

<div>
    <div class="page one">
      <div class="inside">
        <div>TrynaMatch?</div>
      </div>
    </div>
    <div class="page two">
      <div class="inside">
      </div>
    </div>
    <div class="page three">
      <div class="inside">
      </div>
    </div>
    <div class="page four">
      <div class="inside">
      </div>
    </div>
</div>

</center>

</body>
</div>
</html> `

Please help me with any tips. I am a complete beginner so feel free to offer any criticism. Thanks again!

According to http://guidobouman.github.io/jquery-panelsnap/, basic setup, you need to have html5 `section` blocks in place of `div` blocks. — Kiran Shakya, Mar 16 '16 at 01:58

Kiran Shakya · Answer 1 · 2016-03-16T02:25:04.307

jQuery(function($) {
  $('body').panelSnap({
    panelSelector: 'div.page',
  });
});

.page {
  height: 300px;
  background: green;
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://guidobouman.github.io/jquery-panelsnap/jquery.panelSnap.js"></script>
<center>
  <div>
    <div class="page one">
      <div class="inside">
        <div>TrynaMatch?</div>
      </div>
    </div>
    <div class="page two">
      <div class="inside">
      </div>
    </div>
    <div class="page three">
      <div class="inside">
      </div>
    </div>
    <div class="page four">
      <div class="inside">
      </div>
    </div>
  </div>
</center>

For your case, basic setup won't work as, it is designed to work with html5 sections by default. You have to provide panelSelector option as in example above. As of HTML5, I suggest not to use center tag, as it is not supported by HTML5.

jQuery panelSnap.js not working properly?

1 Answers1