Streaming live at 10am (PST)

Using external scripts


#1

i am trying to implement external scripts to a single page on my site (cable management).

the scripts:
css: http://werackyourworld.com/css/etalage.css
.js: http://werackyourworld.com/etalage/js/jquery.min.js
.js: http://werackyourworld.com/etalage/js/jquery.etalage.min.js

Read Only: https://preview.webflow.com/preview/glcac?preview=646d71e490397efbb06c7b09465b4b49

Thanks for your help!

Cheers


#2

Hi @Brian_M_Fromknecht

You can link to a CSS file with the link tag in your HEAD custom code:
http://www.w3schools.com/tags/tag_link.asp

You can also link to in the footer custom code:
<script src="http://werackyourworld.com/etalage/js/jquery.etalage.min.js"></script>

Hope this helps :slight_smile:


#3

Those two links are broken, so you will not be able to include them in your project until the externally hosted files have been uploaded correctly.


#4

These should work. When i click on the link it goes to a browser page with the hosted code files....

http://werackyourworld.com/js/jquery.etalage.js
http://werackyourworld.com/js/jquery.etalage.min.js
http://werackyourworld.com/css/etalage.css

Although, I am still having trouble with the placement of the scripts and or syntax of them. I know it is something simply I am overlooking....
@Waldo @PixelGeek @samliew

Cheers!


#5

Hey @Brian_M_Fromknecht you may find this resource helpful in referencing external stylesheets:
http://www.w3schools.com/css/css_howto.asp
And Scripts:
http://www.w3schools.com/tags/att_script_src.asp


#6

@Waldo @samliew Ok so I have tried everything! I read the W3C how to's and much more however, I know it's the placement of the code that is causing the errors. Here are some screen shots and gif for your viewing pleasure!
The custom code for the page "cable management":

The html embed on the page itself.

This is the effect I am looking to accomplish:


I have referenced all external JavaScript files and CSS files through FileZilla and I believe they are pointing in the correct direction. The Images are hosted by Webflow.

Read only link: https://preview.webflow.com/preview/glcac?preview=646d71e490397efbb06c7b09465b4b49

You can check out the code here:
http://www.werackyourworld.com/example_basic.html

This is driving bat sh*t crazy! Thanks for your help!

Cheers


#7

Hey @Brian_M_Fromknecht your image src files need to have the image links in them to work :wink: and please remember that the external scripts/custom code will not run within the Webflow designer but only on the published site.


#8

@Waldo Ok I replaced the image links with the src files and I'm still coming up blank?.....
The scripts I put in the custom code for that single page I can't get right.


#9

Hi @Brian_M_Fromknecht, could you please share the link to the published site url? Thanks!


#10

@cyberdave glcac.webflow.io


#11

Your page http://glcac.webflow.io/accessories-pages/cable-management, has JavaScript errors in the console.

If you read the error message, it's quite obvious what the next problem is. You can even click on the resource in the console.

Failed to load resource: net::ERR_INSECURE_RESPONSE
https://werackyourworld.com/js/jquery.etalage.min.js


#12

@samliew Ok I did see those. So it is how I have referenced those files from FileZilla. My path is wrong yet, I'm not sure how to find the correct path... so it loads the right resource.


#13

Try using those files in plain http instead of https, as your server doesn't support SSL.


#14