CODEWITHSUNDEEP
jqueryhtmlcssfullpage.js
Rhy Manlangit
Rhy Manlangit

Reputation: 27

The footer Doesn't show at the end of div slide

The footer is missing after the end of division.

<div id="fullpage">
  <div class="section " id="section0"> content1 </div>
  <div class="section " id="section0"> content1 </div>
  <div class="section " id="section0"> content1 </div>
  <div class="section " id="section0"> content1 </div>
</div>
<footer> this is my footer </footer>

and this is my script

<script type="text/javascript">
  $(document).ready(function() {    
     $('#fullpage').fullpage({
        verticalCentered: false,
        resize : true,
        easing: 'easeInQuart',
        navigation: true,
        navigationPosition: 'right',
        scrollOverflow: false,
     });    
  });
</script>

I use the full page js scrolling is working smoothly but the footer is not showing.

Upvotes: 3

Views: 4952

Answers (4)

Alvaro
Alvaro

Reputation: 41605

You can do it if you use a new feature of fullpage.js 2.7.1. (auto-height sections)

Check out it in the documentation

Here you have an example online. Scroll to the last section.

Upvotes: 1

IndirectDesign
IndirectDesign

Reputation: 1

I have a non-fixed footer OUTSIDE the fullpage div. When I tried the above css code for a fixed-height footer, it resulted in an additional space below the footer equal to the height set in the 'bottom' attribute (in the above case, 20px).

However using the following code does not put in the extra space, and it can be used for a variable-height footer:

.footer {
    padding: 30px 0;
    bottom: 75px;
    margin-bottom: -75px;
    position: relative;
}

Upvotes: 0

Peter
Peter

Reputation: 21

This footer solution you tried is not supported by fullpage by default. I made a simple extension to the original fullpage.js, which supports this.

            if (v.anchorLink == 'footer')
            {
                footer_a = $('#section-footer').height();
                footer_h = $('#footer-text').height();
                var translate3d = 'translate3d(0px, -' + (v.dtop - footer_a + footer_h) + 'px, 0px)';
            }
            else
            {
                var translate3d = 'translate3d(0px, -' + v.dtop + 'px, 0px)';
            }

You can try it: link

The footer height is calculated by the text in it.

Upvotes: 2

Hidden Hobbes
Hidden Hobbes

Reputation: 14183

Your fiddle looks different to the code posted in your original question, however, the answer should still be applicable.

Change your css from:

#footer{
    bottom:0px;
}

To:

#footer{
    position: fixed;
    bottom:0;
}

http://jsfiddle.net/GUTBA/

EDIT - The above will fix the footer to the bottom of the page for all sections. If the requirement is to show it after the last slide you will need to do one of the following:

If the footer is a fixed height Change the css to:

#footer{
    bottom: 20px;
    height: 20px;
    position: relative;
}

http://jsfiddle.net/vU5hY/

This will shift the footer up from it's position after the slide by an amount equal to it's height.

If the footer is not fixed height Change the css to:

#footer{
    bottom: 0;
    position: absolute;
}
.section {
    position: relative;
    text-align: center;
}

Change the HTML to:

<div class="section" id="section3">
    <div class="sectionContent">
        <h1>Section 3</h1>
    </div>
    <div id="footer">Footer</div>
</div>

http://jsfiddle.net/CKGQ5/

Move the footer into the last slide, set the container as position: relative; so that when we set the footer to position: absolute; it is positioned relative to it.

Upvotes: 1

Related Questions