?
Solved

Fullpage.js not scrolling to full height of the content

Posted on 2014-07-31
2
Medium Priority
?
2,779 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 1500 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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
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…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…
Suggested Courses

777 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