The bottom section is not displaying properly at the conclusion of the div slide

Question

The bottom section is not displaying properly at the conclusion of the div slide

The division ends without displaying the footer.

<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>

Here is the corresponding script:

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

Although smooth scrolling works with full page js, the footer fails to display.

jquery html css fullpage.js

Answer 1

Answer №1

The unique footer modification you attempted is not inherently supported by fullpage as it comes. I've developed a straightforward extension to the original fullpage.js that addresses this issue.

            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 test it out here: link

The height of the footer dynamically adjusts based on the content within it.

Answer 2

The unique footer modification you attempted is not inherently supported by fullpage as it comes. I've developed a straightforward extension to the original fullpage.js that addresses this issue.

            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 test it out here: link

The height of the footer dynamically adjusts based on the content within it.

Answer 3

Answer №2

It seems like your code on the fiddle is slightly different from what you originally posted, but the solution should still work for you.

Update your CSS as follows:

#footer{
    bottom:0px;
}

To:

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

http://jsfiddle.net/GUTBA/

EDIT - The provided solution will fix the footer at the bottom of the page across all sections. If you want it to appear after the last slide, consider the options below:

If the footer has a fixed height: Modify the CSS to:

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

http://jsfiddle.net/vU5hY/

This adjustment will move the footer up by its height after the slide.

If the footer does not have a fixed height: Update the CSS to:

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

Revise 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/

Place the footer in the last slide, and set the container as position: relative; so that when we set the footer to position: absolute; its positioning is based on the container.

Answer 4

It seems like your code on the fiddle is slightly different from what you originally posted, but the solution should still work for you.

Update your CSS as follows:

#footer{
    bottom:0px;
}

To:

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

http://jsfiddle.net/GUTBA/

EDIT - The provided solution will fix the footer at the bottom of the page across all sections. If you want it to appear after the last slide, consider the options below:

If the footer has a fixed height: Modify the CSS to:

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

http://jsfiddle.net/vU5hY/

This adjustment will move the footer up by its height after the slide.

If the footer does not have a fixed height: Update the CSS to:

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

Revise 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/

Place the footer in the last slide, and set the container as position: relative; so that when we set the footer to position: absolute; its positioning is based on the container.

Answer 5

Answer №3

If you want to achieve this, you can utilize the new auto-height sections feature in fullpage.js 2.7.1.

Take a look at the documentation for more information.

For a live demonstration, check out this online example. Scroll down to the last section to see it in action.

Answer 6

If you want to achieve this, you can utilize the new auto-height sections feature in fullpage.js 2.7.1.

Take a look at the documentation for more information.

For a live demonstration, check out this online example. Scroll down to the last section to see it in action.

Answer 7

Answer №4

I implemented a non-fixed footer that is positioned outside of the fullpage div. After testing out different CSS codes for a fixed-height footer, I noticed an issue where there was extra space below the footer matching the height specified in the 'bottom' attribute (in this case, 20px).

Instead, I found a solution that does not create the additional space, making it suitable for a footer with variable height:

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

Answer 8

I implemented a non-fixed footer that is positioned outside of the fullpage div. After testing out different CSS codes for a fixed-height footer, I noticed an issue where there was extra space below the footer matching the height specified in the 'bottom' attribute (in this case, 20px).

Instead, I found a solution that does not create the additional space, making it suitable for a footer with variable height:

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

The bottom section is not displaying properly at the conclusion of the div slide

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

In the scenario where PHP outputs the complete form as JSON before rendering it as HTML, the form becomes unrecognizable and undefined once passed

Retrieving JSON data from the server using ASP.NET

Creating a Vuetify dialog sheet with stylish rounded edges

Aligning the stars with CSS

Having trouble with uploading images?

Smoothly scroll down to the bottom of the page with a jQuery button using the anchor

Html page only visible to authorized users

Ways to track activities involving a specific input element

In JavaScript, use the following code to replace "(" with "(":

HTML - Table Layout Overlap

Setting line height as a pixel value does not yield the desired result

The background-repeat property in CSS appears to cease functioning when the container becomes too wide

The alignment of my divs is all out of whack -

Setting the image source for each image in a table using VB.net

Dealing with a passed EJS variable in string form

Jquery error caused by index variable in form validation issue

The JavaScript feature designed for activating modal popups is only effective for the initial item

What is the best way to display a particular JavaScript variable in an HTML document?

How to reduce the text input field size in Django Bootstrap for a sleeker design

Send an ArrayList to jQuery Flot