Problem with jquery script automatically embedded at the end of the <body>

Design help Custom code
1

Hello everyone!
I have a little problem with embedding some custom code. The problem is that Webflow automatically includes a script at the end of the body. This somehow clashes with a library that I’m trying to import. I verified this empirically by downloading my website and deleting that automatic line of code.

So, I’m trying to embed this javascript library in my webflow site. That is simply a library that allows the scrolling to snap to full screen sections.

This is the incriminated line at the end of the body:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" type="text/javascript"></script>

Is there a way to overcome this issue? Any help would be immensely useful, as I have no idea how to fix it.

Thanks!

2

Hi @Dario,

The script that automatically gets added as you mentioned here is Webflow including jquery which it uses for interactions etc, my guess why it crashes is that you are also trying to include jquery along with the fullPage.js script…

Try removing jquery if you’ve included it, and it should work fine.

PS: If you can share your preview link, we can have a better look at what’s going on exactly and help you faster.

Hope this helps!
Sid

3

Hi @SidneyOttelohe,

Thanks for your help first and foremost.

You are right, I’m also including jquery in the head:

<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>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/45109461/portfolio%20website%20javascript/jquery.fullPage.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
			$('#fullpage').fullpage({
				sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
				anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
				menu: '#menu',
				scrollingSpeed: 1000
			});
		});
</script>

I tried to remove the first two lines in a local version of the page but this doesn’t work. It only works when I delete the jquery line at the end of the body.
I guess it’s because the browser needs to load jquery before the body, not at the end of it.

Here is the preview link
https://preview.webflow.com/preview/dariostefanutto?preview=e12432d347381f48c4a87b4d4df18b70

4

Hi @Dario,

Aha - this makes things a bit more clear!

Try removing the custom jquery import and move all your scripts to the custom code field before the </body>, this is a better practice since this way your elements on the page will be loaded first before it needs to fetch any external resources which can slow down the loading times.

Best,
Sid

5

@SidneyOttelohe, thanks for the tip!
Unfortunately though, this doesn’t solve the problem.
The only way I managed to make this work is by removing the webflow imported jquery at the end of the body. I did this after exporting the code, and don’t think there is a way to do this directly in webflow.

6

@Dario I’m seeing you’re also using jqueryUI, my guess is that the problem lays there somewhere…

Looking at the console, the fullpage init function throws an error of not being a function when being invoked, which prolly is bcs the fullPage.js library doesn’t get loaded properly or doesn’t exist yet at the time the function is being invoked.

All the best,
Sid

7

I’ll look into that. Thanks!

8

To avoid jQuery conflicts, do not include a second jQuery library, and ALL custom code is to be placed in the Site or Page footer only.

9

I tried to remove the two jQuery libraries, (jQuery and jQueri-UI) but then the library stops working. :frowning:

Why does Webflow include jQuery at the end of the body anyway? Shouldn’t the libraries be linked at the beginning of the page?

10

Best practice is actually to put scripts at the bottom.

11

That’s interesting, I thought the browser would need to load the libraries before the body, like in a program. I’m new to programming.
I will see if I can fix the page but I’ve tried everything. At this point it might be better to just do everything by hand maybe.

12

I need to load JQuery before my additional scripts… Also restricting me to use 2.2.0 seems silly
There should be an option in the designer to simply let us choose whether we want it in the footer or whether we want to add our own version, through a cdn url or whatever

13

You didn’t explain why. It is almost always possible to put them in the footer if you use the ready function.