fullpage.js: the content exceeds the height limit

I am currently working on customizing the jquery script fullpage.js for a website built on the French CMS "SPIP" ().

This script is used to create a one-page website with both horizontal and vertical navigation.

However, I have encountered an issue with the horizontal navigation, where text is being cut off before the end due to the height depending on the window size.

I find that I need to resize the window twice in order to be able to read all the text properly.

Any suggestions on what I can do to fix this issue?

You can view the website here: (look under "blognotes").

(please note that I am not very familiar with javascript)

Thank you in advance for your help!

javascriptjquerycssfullpage.js

Answer №1

Based on your configuration, it seems like you have set scrollOverflow: true and included the jquery.slimscroll.min.js, so everything should be functioning properly.

However, I did notice that you are loading the jquery.slimscroll.min.js before jQuery.

To ensure compatibility, try loading the jquery.slimscroll.min.js just before jquery.fullPage.js, but after jquery.min.js. It is recommended to follow this order:

<!-- jQuery and jQuery UI -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<!-- Plugins -->
<script type="text/javascript" src="squelettes/vendors/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="squelettes/js/jquery.fullPage.js"></script>

Consult the fullpage.js manual for more information.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on preventing &ersand symbols from being processed through ajax requests, while preserving them as plain text

One challenge I am facing is with my comment form submission through ajax. Below is the ajax code snippet: $('#button').click(function(){ comment = $('#comment').val(); $.ajax({ type : 'POST', url ...

jqueryajaxsanitization

Encountering a 404 error when utilizing the window.push.state function

Currently working on a new project involving an ajax call. I have successfully implemented a function that can change the URL using window.push.state. However, when attempting to access this function directly through the URL, I keep encountering a 404 erro ...

phpjqueryajaxurlhttp-status-code-404

Postman is displaying [object object] as the return value, but the actual value is not

Currently, I am working on automating tasks using Postman One interesting aspect is the presence of a vehicles array in the body { "Vehicles":[ { "car":"{{car}}", "bike":"{{bike}}&quo ...

javascriptjsonpostmanpostman-collection-runnerpostman-pre-request-script

Using Typescript: How to pass a function as an argument in another function

In my angular application, I am working on the following setup: this.myServiceOne.getDataOne().subscribe((res => {this.variableOne= res})); this.myServiceTwo.getDataTwo().subscribe((res => {this.variableTwo= res})); this.myServiceThree.getDataThree( ...

javascriptangulartypescriptecmascript-6

Learn the process of converting Null values to empty strings within a chain of functions when manipulating a database

Currently, I am utilizing the lodash library and have the following code in place: data: _(responseData.data) .pick(['title', 'layout', 'slug', 'author', 'seo', 'css', 'js']) ...

javascriptarraysvue.jslodash

Modify the div class depending on the date

I am in the process of creating a simple webpage where I can keep track of all my pending assignments for college. Take a look at the code snippet below: <div class="assignment"> <div class="itemt green">DUE: 28/03/2014</div> </d ...

javascriptphpjquery

jQuery Validate - validate form inputs while still allowing form submission

Can the jQuery Validation plugin be configured to run validation but still allow form submission? I am interested in implementing a 'save progress' button that permits users to submit incomplete or incorrect data. The form will have multiple ste ...

jqueryjquery-validate

Raising css properties using jquery

Is there a way to adjust CSS values using jQuery? I am looking to specifically increase values like top and left, but my current attempt is not producing the desired outcome: var left = 5; $(.object).css("left" + 5); The challenge I am facing is that I ...

jquerycss

What is the best way to incorporate CDN into my webpack build process?

I have developed a module with the following code: export default () => console.log('hello my_module~!') The configuration in the webpack.config.js file looks like this: module.exports = { // ... output: { // ... library: 'he ...

javascriptnode.jsnpmwebpack

Using jQuery's .get() function to retrieve HTML content is not permissible

I am trying to retrieve the HTML content from another page using the jQuery .get() function as shown below: $.get("chk_vga.aspx", function(data) { alert($('#vga').html()); }); The "chk_vga.aspx" page contains only one value <html> ...

jqueryasp.netget

The element 'stripe-pricing-table' is not a recognized property of the 'JSX.IntrinsicElements' type

I am currently trying to incorporate a pricing table using information from the Stripe documentation found at this link. However, during the process, I encountered an issue stating: "Property 'stripe-pricing-table' does not exist on type &ap ...

javascriptreactjstypescriptstripe-payments

Bootstrap modal should be closed by using the back button in bootstrap

Currently, I am in the process of developing an angularjs application that utilizes a bootstrap modal feature. My goal is to have the modal close when the user presses the back button on their phone. I have disabled html5mode, so my URLs include the # sy ...

javascriptasp.netangularjspushstate

Expanding box geometry from a single side in Three.js

Just starting out with three.js and my first task was to create a box geometry that could be increased from only one side. Issue : When increasing the width or height of an object, both sides automatically expand. Check out this jsFiddle Example I waste ...

javascriptthree.jsgeometry

Transmitting JSON AJAX response to populate location markers on Google Maps

When a button is clicked, an AJAX response is triggered to display JSON data based on a search query. My goal is to take the all_locations variable from the AJAX response and use it to show markers on a Google map. I'm uncertain about how to achieve t ...

javascriptjqueryjsonajaxgoogle-maps

The issue of the jQuery ajax script being inadvertently reloaded is persisting even after

I've successfully integrated a bootstrap modal and included a .js file that contains the necessary Ajax function. However, I have encountered an issue where the ajax function is triggered multiple times when the load more button is clicked multiple ti ...

jqueryajax

Processing the results from a recursive function call in Node.js

I have an objects array that needs to be processed with delayed calls to an external server, then collect all results into an array for postprocessing. Here is an example: (async () => { const serverOperation = () => new Promise(resolve => setT ...

javascriptnode.jsrecursion

The Vue/Nuxt application displays content duplication on each page, rendering the content twice without duplicating the components

I recently delved into Vue/Nuxt programming and worked through a tutorial on adding a blog, which I then customized for my website. Everything functions perfectly except that the content is rendering twice. It goes from rendering NavPage (component) > c ...

javascriptvue.jsnuxt.js

What is the best way to incorporate an exported TypeScript class into my JavaScript file?

One of my JavaScript files is responsible for uploading a file to Microsoft Dynamics CRM. This particular JavaScript file makes use of RequireJS to reference another JavaScript file. The referenced JavaScript file, in turn, was compiled from multiple Typ ...

javascripttypescriptmodulerequirejs

Tips for restricting User access and displaying specific sections of the menu

I have a component that utilizes map to display all menu parts. Is there a way to make certain parts of the menu hidden if the user's access rights are equal to 0? const Aside: React.FunctionComponent = () => { const[hasRight, setHasRight] = us ...

javascriptreactjstypescriptfrontend

Creating a Social Media Platform with JavaScript, Bootstrap, JQuery, PHP, and Mysqil

I am currently in the process of developing a social networking platform that will have similar features as Instagram. Users will be able to log in, create posts, leave comments, like content, share posts, and send data to a server for storage or display p ...

javascriptphpjquerymysqlisocial-networking