I am attempting to add a JavaScript element to a Squarespace page. I am not a Squarespace dev so I'm pulling my hair out with all their menus and work arounds.
I have a page that I want to add a script to:
https://red-trout-aldy.squarespace.com/map/
The password to view the site is: CheckMeOut
The script isn't showing on the page and is giving me a 404 status when I view it the Inspector and the CSS I added to the Squarespace "CSS" page is showing as "canceled." I added the javascript as a Code Block and used the "HTML" option in the Code Block. I think that the problem lies somewhere in the "Script SRC" tag, but I'm not sure.
I have followed the instructions on this post:
Javascript in Squarespace isn't working?
But adding the snippet to my Header didn't help
Here is a copy of the code that I was given to add to the page:
<div id="image-map-pro-container"></div>
<script src="js/jquery.min.js"></script>
<script src="js/image-map-pro.min.js"></script>
<script type="text/javascript">
;(function ($, window, document, undefined) {
$(document).ready(function() {
$('#image-map-pro-container').imageMapPro({"id":1596,"editor":{"selected_shape":"rect-2290","tool":"rect","shapeCounter":{"rects":5}},"general":{"name":"Untitled"},"spots":[{"id":"rect-1110","title":"Area 1","type":"rect","x":12.125,"y":21.333,"width":25.5,"height":25.111,"x_image_background":12.125,"y_image_background":21.333,"width_image_background":25.5,"height_image_background":25.111,"actions":{"click":"follow-link","link":"Google.com"},"default_style":{"opacity":0.5299145299145299,"border_radius":10,"background_color":"Black","background_opacity":0.3999732905982906,"border_width":7},"mouseover_style":{"border_radius":10},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-403761","settings":{"elements":[{"settings":{"name":"Heading","iconClass":"fa fa-header"},"options":{"heading":{"text":"Rect 0"}}}]}}]}}},{"id":"rect-1185","title":"Area 2","type":"rect","x":51,"y":29.333,"width":36,"height":48.444,"x_image_background":51,"y_image_background":29.333,"width_image_background":36,"height_image_background":48.444,"actions":{"click":"follow-link","link":"yahoo.com"},"default_style":{"border_radius":10,"background_color":"Green","background_opacity":0.7504006410256411},"mouseover_style":{"border_radius":10},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-403761","settings":{"elements":[{"settings":{"name":"Heading","iconClass":"fa fa-header"},"options":{"heading":{"text":"Rect 3"}}}]}}]}}},{"id":"rect-2290","title":"Area 3","type":"rect","x":4.375,"y":48.889,"width":40.625,"height":42.667,"x_image_background":4.375,"y_image_background":48.889,"width_image_background":40.625,"height_image_background":42.667,"static":1,"actions":{"click":"follow-link","link":"msn.com"},"default_style":{"border_radius":2,"background_color":"#123456","background_opacity":0.9726228632478633,"border_width":13,"border_color":"#aaaa5f"},"mouseover_style":{"border_radius":10},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-60621","settings":{"elements":[{"settings":{"name":"Heading","iconClass":"fa fa-header"},"options":{"heading":{"text":"THIS IS A TOOL TIP"}}}]}}]}}}]});
});
})(jQuery, window, document);
</script>
As #ChamsddineBouzaine noted, the code that I was given by the application I am using was incorrect. I changed the line that said
<script src="js/jquery.min.js"></script>
<script src="js/image-map-pro.min.js"></script>
to
<script src="//code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="scripts/image-map-pro.min.js"></script>
I uploaded the "image-map-pro.min.js" file to a folder on the server called, "scripts"
I was also told by the app developers to add a line into the header of the site:
<link rel="stylesheet" href="css/image-map-pro.min.css">
Even after adding this file to the server, it wouldn't work. I kept getting an error saying:
Refused to apply style from
'https://red-trout-aldy.squarespace.com/css/image-map-pro.min.css'
because its MIME type ('text/html') is not a supported stylesheet MIME
type, and strict MIME checking is enabled.
So I had to open the CSS file in Dreamweaver and manually paste it into the "INSERT CSS" page on Squarespace and point the CSS to the Collection Number for the body of the /map page. I found the technique on this youtube video:
Page Specific CSS for Squarespace
I was trying to set up a page on Google Sites to show of my work with some HTML canvas games I made. However, Google Sites' "Insert HTML" option is severely limited, it only lets you enter HTML code that has no external dependencies to work. As you can imagine, the kind of things I want to upload have textures, audio and multiple js files scattered throughout the code. All js files are referenced on the main HTML file, but this isn't working, it isn't picking up the other files and it's just showing a white screen.
Here is all of the HTML code (as you can imagine, 99% of the work is JS):
<html>
<div id="canvas_div_no_cursor">
<canvas id="gameCanvas" width="800"
height="600"></canvas>
</div>
<script type="text/javascript">
document.getElementById('canvas_div_no_cursor').style.cursor = "none";
</script>
<script src="js/classes.js"></script>
<script src="js/HUD.js"></script>
<script src="js/movement.js"></script>
<script src="js/gameplay.js"></script>
<script src="js/graphics.js"></script>
<script src="js/input.js"></script>
<script src="js/audio.js"></script>
<script src="js/Main.js"></script>
</html>
That's about it, all the rest of the code in in those referenced js files. Yes, I uploaded the whole folder to Drive, and even tried importing the html through there, it won't even let me. I searched online to no avail, does anyone have a clue to how I can do this? The only viable option I see is to transfer all the code from the files to the single HTMl file, but I don't even know if it would accept other calls such as .mp3 files and .png files.
You can upload the needed files to Google Drive and get a directo download link to them with this site. Once you have that, simply change the src with the direct link and it should import it.
I am trying to use the CircleType library to curve some text on a html page. I am getting some strange behaviour.
It works OK if I link directly to the circletype.mins.js file on github.
<html>
<body>
<h2 id="demo1">This works OK</h2>
<script type="text/javascript" src="https://rawgit.com/peterhry/CircleType/master/dist/circletype.min.js"></script>
<script>
const circleType = new CircleType(document.getElementById('demo1'));
circleType.radius(150);
</script>
</body>
</html>
If I download the js file and link to it locally I get an invalid or unexpected token error on the script. I have tried downloading the zip, cloning the git repo and running dos2unix, but can't get anything to work.
To make things even weirder, if I change the h2 value to the "Here’s some curved text flowing clockwise.", which is the value used in the online demo, it works both locally and when linking to the external file.
Does anyone have ideas what might be causing this?
Make sure you have <meta charset="UTF-8"> inside <head> on your html file
I downloaded a template and open it directly, it gives me an error for the slider.
!! Error at loading Slider Revolution 5.0 Extrensions.
Local Filesystem Detected !
Put this to your header:
<script type="text/javascript" src="js/vendor/revslider/public/assets/js/extensions/revolution.extension.slideanims.min.js"></script>
<script type="text/javascript" src="js/vendor/revslider/public/assets/js/extensions/revolution.extension.layeranimation.min.js"></script>
<script type="text/javascript" src="js/vendor/revslider/public/assets/js/extensions/revolution.extension.kenburn.min.js"></script>
<script type="text/javascript" src="js/vendor/revslider/public/assets/js/extensions/revolution.extension.navigation.min.js"></script>
Again I uploaded to local server, there is no error but an empty slider.
I checked the inspect element, it shows the errors in the below image:
Looks like you're trying to get those files from a folder, js, in your source folder; that's not where they are located. With a quick Google search I found that those were located on another website, http://iccila.com.br.
The fixed <script> tags:
<script type="text/javascript"
src="http://www.iccila.com.br/js/plugins/revslider/public/assets/js/extensions/revolution.extension.slideanims.min.js">
</script>
<script type="text/javascript"
src="http://www.iccila.com.br/js/plugins/revslider/public/assets/js/extensions/revolution.extension.layeranimation.min.js">
</script>
<script type="text/javascript"
src="http://www.iccila.com.br/js/plugins/revslider/public/assets/js/extensions/revolution.extension.kenburn.min.js>
</script>
<script type="text/javascript"
src="http://www.iccila.com.br/js/plugins/revslider/public/assets/js/extensions/revolution.extension.navigation.min.js">
</script>
It is a cause of jQuery conflict. First I recommended upgrading your revolution slider.
Step to fix:
Go to bakend and click Slider Revolution
Click Global Setting.
Click on buttons
Insert JavaScript Into Footer:
Defer JavaScript Loading:
Make sure revolution.extension.slideanims.min.js and other js files you are adding are in the folder js/vendor/revslider/public/assets/js/extensions/ and also that the js folder is in the same folder as this page that you are trying to open.
=======
If it isn't then specify the exact location in place of js/vendor/revslider/public/assets/js/extensions/
I had similar issues with Magento Rev Slider.
The problem was the caching extension that I have used. Amasty Full Page Cache.
I disabled and tried and everything worked fine.
So, I recommend you to check if all files exist with proper permission.
Then check and see if the page is cached.
Try and fully disable cache.
Also disable Chrome or browser Cache
It worked for me.
You also need to add this to your page revolution.extension.slideanims.min.js to your files.
I had the same exact problem I solved it by downloading this revolution.extension.slideanims.min.js file and then adding it to the folder
Then the mentioned code should be added at the bottom of the page.
Basically just look at your folder and see if all the mentioned js files exist. If they don't download them and add it manually.
You need server Environment to run Rev slider in local pc.
Like put all files in local host or upload in web server.
It will work.
Thanks
SO my file hierarchy that is the same on my desktop as it is in my web-host file manager
1- This is my iframe from my code editing program (Adobe Edge Code) correctly working when I throw the page up in Google Chrome]
2- And this is my iframe not working when I have the page hosted in my web-hosts file manager.
1: https://pantherfile.uwm.edu/leyton/Screen%20Shot%202013-12-20%20at%203.51.37%20PM.png?uniq=-n0ztwi
2: http://leytonelizabeth.com/photography.html
I don't know anything about Javascript and definitely nothing about JQuery. All I know is that I have a code that correctly displays my website when I preview it on Google Chrome.
When I put all my files in the exact same hierarchical order in my web-hosting site's file manager, I navigate to it and it doesn't work.
Why does it point to the files and paths correctly when it's coming from my desktop and not when it's coming from Webhostinghub.com?? I transferred them over in exactly the same order. The paths are correct. So it must be something with jQuery. Can anyone give me some advice or things to try in order to get the iframe to display my photos?
Is it perhaps because there are several Core Scripts being referenced at the top of my photography.html page? do I need to update/download each version? Do viewers looking at my site need to go through all that too then just to potentially see the photos in my iframe? As you can see in the pic of the photo that properly works in the iframe, it points to the prettyPhoto jQuery and its respected gallery, not some other url..
I have NO IDEA what to do about this. Please help!!!
These are the scripts at the top of all my html5 documents/pages:
`<!-- Cufon Scripts -->
<script src="js/libs/cufon-yui.js" type="text/javascript"></script>
<script src="js/fonts/mank-sans.cufonfonts.js" type="text/javascript"></script>
<script src="js/fonts/Yanone_Kaffeesatz_Regular_400.font.js" type="text/javascript">
</script>
<script src="js/royale-cufon.js?v=1" type="text/javascript"></script>
<!-- Core Scripts -->
<script src="js/libs/modernizr-1.7.min.js" type="text/javascript"></script>
<script src="js/libs/mdetect.min.js" type="text/javascript"></script>
<script src="js/libs/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">jQuery.noConflict();</script>
<script src="js/libs/jquery.easing.1.3.min.js" type="text/javascript">
</script>
<script src="js/royale.js?v=1" type="text/javascript"></script>
<!-- Bg Image Script -->
<script src="js/royale-bg-image.js?v=1" type="text/javascript"></script>
<!-- Added for Lightbox Script -->
<script src="js/libs/jquery.pretty-photo.min.js?v=1" type="text/javascript"></script>
<!-- Setup Script -->
<script type="text/javascript">`
1 Lots of your 'thumb' folders are empty.
2 The "big-sized" picture of teacup (the only thumb picture i can see) is referred as "img/portfolio/theaccident/tea.jpg", but the real file path is "img/portfolio/theaccident/Tea.jpg" (the capital letter matters)
So the problem is not in the scripts, It's in your export settings or your host defaults.
UPD:
3 Some links from your 'thumbless' pictures are pointing to correct 'big-sized' pictures (their first letters are not capitalized).
You definetely did something wrong when moving everything from desktop to host.