- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
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?
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
Okay, thanks!
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
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).
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
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.
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
Actually, you only need the relative path: "/files/theme/xxx.js"
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
Okay, thanks!
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report