Solved

Fullpage.js not scrolling to full height of the content

Posted on 2014-07-31
2
2,668 Views
Last Modified: 2014-08-01
I've implemented the fullpage.js plugin but I'm having an issue when the section of the content is too long for the page.  As you can see from the following link:

http://ymorin007.webfactional.com/events/UFC174/ and going to the section Leaders from any device or desktop.

You will notice that the scroll bar ends before it has reach all the table content.

So how do I fix this issue so the scrollbar will see the full table content.

my fullpage() declaration:

$('#container-event-page').fullpage({
        verticalCentered: false,
        loopHorizontal: false,
        scrollOverflow: true,
        css3: true
    });

Open in new window

0
Comment
Question by:ymorin007
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 5

Accepted Solution

by:
Dobromir Yordanov earned 500 total points
ID: 40233418
I'm not sure how much this helps you but the plugin seems to be getting confused by the top padding on your body tag. Remove padding-top on body and observe the behavior. It's covered by the header (expected) but scrolling works just fine. I think what you're using was made to be a plugin that takes the full width and height of the page (thus the name fullpage.js). I'm not sure if adding a fixed header to it would be as easy as what you've done.

My best suggestion is to try to remove the padding from the body and instead add it to the actual element that you are scrolling. Also, your header wouldn't need to be fixed when using this plugin since it doesn't use native browser scrolling which makes fixed and absolute the same thing :) But that's up to you, I don't see it helping or hurting either way.

Good Luck!
Dobri
0
 

Author Comment

by:ymorin007
ID: 40233890
Thanks Dobri for the help.

You are right the top padding was the issue so I removed it and applied it to the paddingTop option from the fullpage() function and it works perfectly now.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Help with mod_substitute 18 73
Need a script that will create its own directory to dump logs into 7 44
JSON help 8 42
Can't see json data in ajax call to Highcharts 2 24
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Learn the basics of modules and packages in Python. Every Python file is a module, ending in the suffix: .py: Modules are a collection of functions and variables.: Packages are a collection of modules.: Module functions and variables are accessed us…
Learn the basics of while and for loops in Python.  while loops are used for testing while, or until, a condition is met: The structure of a while loop is as follows:     while <condition>:         do something         repeate: The break statement m…

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question