user3422637 user3422637 - 4 years ago 193
Javascript Question

How to contain fullscreen.js slides in a div of fixed height and fixed width

By default, any example of fullpage.js is written to render the slides at maximum height and width of the screen (full screen).

However, I am trying to contain the slides in one fixed-sized div in my html page. I have a div of fixed height and fixed width and would wish the fullpage.js slides to play within that div. I tried but I cannot get the height to be reduced to prescribed fixed height. The fixed width works fine.

<div id="fullpage" style="height: 40px; max-height:200px; width: 500px;">
<div class="section " id="section0">
<div class="intro">
<h1>Responsive</h1>
<p>This example will turn to normal scroll when the window size gets smaller than 600px height</p>
</div>
</div>
<div class="section" id="section1">
<div class="slide" id="slide1">
<div class="intro">
<h1>Ideal for small screens</h1>
</div>
</div>
<div class="slide" id="slide2">
<h1>This example uses responsiveHeight: 600</h1>
</div>
</div>
<div class="section" id="section2">
<div class="intro">
<h1>Keep it simple!</h1>
</div>
</div>
</div>

Answer Source

As stated here:

This is a FULL PAGE plugin. There's no such option.

but is possible to hack it via CSS.

Code:

$('#fullpage').fullpage({
    sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
    anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
    css3: true,
    verticalCentered:false
});

CSS:

#section0, #section1, #section2 {
    height: auto !important;
}

And don't forget the verticalCentered: false option. Othewise you would also need to overwrite another wrapper fp-table

Demo: http://jsfiddle.net/IrvinDominin/o46332j6/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download