x

How to run a JavaScript program on a Weebly website?

I have an HTML file that calls a number of JavaScript files to interact with an online user.
I have not been able to get it to run properly on my Weebly website.
At present I have it on another server, where it works fine,
but I'd like to rescue it from there and integrate it into my Weebly site.
In setting up my site, I've come to conclude that "Pages" are all HTML files, while "Assets" (under "Theme") include (everything else?), such as .exe, .jpg, .pdf, .png, and .zip. Am I right about this?
I have tried locating my .js files on the list of Pages, as well in the list of Assets, but neither one seems to work. Suggestions?

2,624 Views
Message 1 of 5
Report
1 Best Answer

Best Answer

Okay, thanks!

View Best Answer >

2,567 Views
Message 6 of 5
Report
4 REPLIES 4

There are a number of areas that will allow you to place html, css, and javascript in your site. Those areas can have different scope: site-wide, affecting only a page "header type", or affecting just a single site page.

You've discovered the "Assets" folder in the Code Editor. Above that item, you'll also find the "Styles" section (where your site's css resides) and the "Header Types" (where the structural html is found for each page type in your site's theme and this normally includes the following page types: header.html, no-header.html, landing.html, and splash.html).

Site-Wide Scope

In the Code Editor, modification of the css is a site-wide change. For example, if you modify an existing class or id, that change will appear wherever the class or id is referenced in an html tag anywhere on the site. If you add a new css class or id, you can reference it in any page's html across the site.

If you create a new file or upload a file to the Assets folder, that file can be referenced anywhere in the site. The relative path of the file is "/files/theme/". So, for example, if you uploaded the image file "my-image.jpg" to the Assets folder, you could reference it in an html image tag with the source, "/files/theme/my-image.jpg". Similarly, if you upload a javascript file to the Assets folder, you'd reference it using the same relative path. For example, if you have a javascript file named "my-javascript.js", you'd reference it like this: "/files/theme/my-javascript.js". Note that, if you'd like to keep your Assets organized, you could create sub-folders within the Assets folder (you'll already see an "images" sub-folder). So, if you decided to create a "js" sub-folder under the Assets folder and place all your uploaded javascript files there, you'd reference them using the relative path "/files/theme/js/".

To implement a javascript file across the entire site, you'd reference it from the site footer zone. To get there, in the Site Editor, click on "Settings" in the top navigation menu bar then click SEO then enter your script reference in the "Footer Code" input box (and hit the green Save button in the lower right corner of the page when you're done). The script reference for the file "my-javascript.js" that was uploaded to the Assets folder would be added to the Footer Code and that reference would look like this:

<script type="text/javascript" src="/files/theme/my-javascript.js"></script>

Header Type Scope

The layout of each page in your site is determined by its "header type." In the Site Editor, if you click on "Pages" in the top navigation menu bar and then click on a particular page, among other things, you'll see the header type for that page. Usually, the header type will be "Header" or "No-Header" (but it could also be "Landing" or "Splash"). In the Code Editor, you can access the structural html for each page header type and modify it as needed. You could also create custom header types (with your own custom page layouts) and apply them to individual pages (by changing the page Header attribute in the Site Editor).

Let's say that you'd like to reference the javascript file "my-javascript.js" that you uploaded to the Assets folder. You'd like this reference to affect only the "Header" page header type. In the Code Editor, you'd click the "header.html" header type, scroll down to just before the closing body tag and insert your script tag:

<script type="text/javascript" src="/files/theme/my-javascript.js"></script>

Page Scope

To affect individual pages, in the Site Editor, you'll click on "Pages" in the top navigation menu bar and then click your desired page then click "SEO Settings". Scroll down to see the "Header Code" and the "Footer Code" input boxes. The Header Code box is where you place code to appear between the page's opening and closing head tag. The Footer Code is where you place code intended for just before the page's closing body tag (and that's where you'll add your javascript reference for script that will only run on that particular page).

2,600 Views
Message 6 of 5
Report

Thanks for that detailed response.  It will take me some time to absorb it, as it contains many terms that I don't know.

Meanwhile, in case it's useful to others, I"ve found that part of my solution is for the HTML file to call the .js files using their full path—that is, "https://xxx.weebly.com/files/theme/xxx.js", rather than just "xxx.js" alone.

2,587 Views
Message 6 of 5
Report

Actually, you only need the relative path: "/files/theme/xxx.js"

2,577 Views
Message 6 of 5
Report

Best Answer

Okay, thanks!

2,568 Views
Message 6 of 5
Report
This thread has been archived and locked. Please start a new thread if you would like to continue the conversation.