jQuery panelSnap.js not working properly?

Question

jQuery panelSnap.js not working properly?

1.2k Views Asked by K Ghumaan At 19 April 2025 at 15:28

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!

Original Q&A

There are 1 best solutions below

**Kiran Shakya** · Answer 1

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?

There are 1 best solutions below

Related Questions in JQUERY

Related Questions in SCROLL-SNAP-POINTS

Trending Questions

Popular # Hahtags

Popular Questions