Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Salman Akram
Salman Akram
Courses Plus Student 40,065 Points

Scrolling issue

Hi,

While spending long hours on simple scrolling and numerous fixing in current project, vertical scrolling on right side (black dots) doesn't show up at all or something wrong.

I exactly follow this One Page Scrolling Example while looking at the documentation.

Github - https://github.com/peachananr/onepage-scroll

I don't know what I am missing something? I know I added scripts, links, main class, and other files. Please advise.

Ryan Duchene gloria

{inside head tag}

        <script>
          $(document).ready(function(){
          $(".main").onepage_scroll({
            sectionContainer: "section",
            responsiveFallback: 600,
            loop: true
          });
            });            
        </script>

{inside body tag}

  <div class="wrapper">
      <div class="main">

      <section class="page1">
           <div class="page_container">        
                  .....................................
           </div>                
        </section>

    <section class="page2">
        <div class="page_container">
                 .....................................
            </div>
        </section>

    <section class="page3">
        <div class="page_container">
                   .....................................
            </div>
        </section>
     </div>
</div>

4 Answers

Gloria Dwomoh
Gloria Dwomoh
13,116 Points

Hi again Salman Ak , you have no main class in your HTML. I suggest you try to read the documentation a little bit more, it notes...

"

To add this to your website, simply include the latest jQuery library together with jquery.onepage-scroll.js, onepage-scroll.css into your document's <head> and call the function as follows:

<body>
  ...
  <div class="main">
    <section>...</section>
    <section>...</section>
    ...
  </div>
  ...
</body>

Container "Main" must be one level below the body tag in order to make it work full page.

"

Gloria Dwomoh
Gloria Dwomoh
13,116 Points
Gloria Dwomoh
Gloria Dwomoh
13,116 Points

From what I see the verical dots are created with css example:

This one below is to make the circle that is blank within when it is active ie. has been clicked

a.active:before {
width: 10px;
height: 10px;
background: none;
border: 1px solid black; // this makes 
margin-top: -4px;
left: 8px;
}

This one is to create the black dot when it is not active.

a:before {
content: '';
position: absolute;
width: 4px;
height: 4px;
background: rgba(0,0,0,0.85);
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

so you have to use your CSS to link an anchor for example, to the dots created by the CSS.

I hope this helps.

Ps. You probably have to add a click listener etc if you haven't done that as well.

Salman Akram
PLUS
Salman Akram
Courses Plus Student 40,065 Points
Salman Akram
Salman Akram
Courses Plus Student 40,065 Points

Alright, thank you Gloria. I will re-check again.

Gloria Dwomoh
Gloria Dwomoh
13,116 Points
Gloria Dwomoh
Gloria Dwomoh
13,116 Points

Hey another thing I noticed is you haven't include jQuery in your HTML, so you probably need that as well. You are welcome.