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
Related
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
Let me re-explain the whole question.
I want to add this in my website http://www.w3schools.com/howto/howto_js_slideshow.asp
So for this, i have to make a external java file (internal may work, but i want external).
So when i paste the java code in my html file in body tag, the script works fine. So that means, nothing wrong with the script. But when i put the same thing in a different external file, the script is not working.
So the problem must be in the head tag, where i write the external file location. This is my head tag
<head>
<title>FFH</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<link rel="shortcut icon" type="image/x-icon" href="images/ffh.ico" />`
<script type="text/javascript" src="myscript.js"></script>
Yes, the "myscript.js" is in the same folder and i am 100% sure about it.
put your html file and javascript file under the same folder.
Following can be a reason for your issue
Invalid src path in the script tag
Javascript might be disabled in your browser.
You have a script error/exception that stopped entire page's script execution.
Maybe you have an Ajax request that won't work if your open it as a local file protocol. e.g., file://
What can you do?
It is right time for you to know about and use your developer tools available in your favorite browser.
See if it shows 404 or some other error. Then update your SO question with the exact error message that you see. We would be happy to help.
Revised answer based on provided w3c link:
Now we know the exact problem.
You can not add that script tag to the head of the HTML. Because the elements that you refer in the script are not available at that time of execution. Move the script tag just before the end of body tag (all your carousal tags/elements should be present before the script tag) . Then It would work as expected.
If you still want that script tag to be in the head section, then you have to initialize your carousal/slider in DOM ready event or window.Onload event.
Still my earlier comment is relevant, because you can use developer tools in your browser to find out the exact error statement.
As stated in other answers, script-tag may not work if it is located in <head> tag. Try adding it right before </body>.
+don't call it java, they have nothing else in common except name :)
I want to know how these analytics and advertisers are called from 'online.wsj.com' HTML source. Upto the following point, HTML code in Firebug is consistent with the one in I accessed via 'view source page'.
Firefox view source page:
<'!--[if IE 8]><'link rel="stylesheet" href="http://sc.wsj.net/djstyle/1/ie8/ASIA_WSJ/0_0_WAH_0001_public-20140522122816.css" type="text/css" /><![endif]-->
<'script type="text/javascript" language="javascript" charset="utf-8"><!--
var userName = '(none)';
Firebug:
<'!-- [if IE 8]><link rel="stylesheet" href="http://sc.w… -->
<'script type="text/javascript" src="http://beacon.krxd.net/optout_check?callback=Krux.ns._default.kxjsonp_optOutCheck"><'/script>
<'script async="" src="//cdn.krxd.net/ctjs/controltag.js.36fec01aa23444783514e74efb6b7d64"><'/script>
<'script type="text/javascript" async="" src="http://cdn.cxense.com/cx.js"><'/script>
Is it 'jsexec' calling these third-party domains?
PS: I am newbie to web-programming and I would highly appreciate you kind input.
Thanks.
The View Page Source option in Firefox shows you the raw HTML source as it came from the server.
The HTML panel inside Firebug on the other side provides a live view on the HTML source. That means it is updated on changes done to the HTML structure through JavaScript.
These changes can also be expanded and highlighted within the panel checking the options Highlight Changes and Expand Changes within the HTML panel options menu:
To answer your question: Yes, the third-party scripts are added dynamically via JavaScript.
The following external CSS files were
included after an external JavaScript
file in the document head. To ensure
CSS files are downloaded in parallel,
always include external CSS before
external JavaScript. 1 inline script
block was found in the head between an
external CSS file and another
resource. To allow parallel
downloading, move the inline script
before the external CSS file, or after
the next resource.
My HTML is:
<head>
<link rel="Stylesheet" href="gStyle.css" />
<script type="text/javascript" src="gMain.js"></script>
<script type="text/javascript" language="javascript">
// Your chart object(s)
var myChart;
// Function to hold all chart creation
function initCharts() {
myChart = new ganttChart("chart1");
myChart.gAddBar("Dynamic!", "22/3/2010", "3/4/2010");
myChart.gLoadData("Going to the shop*4/3/2010*19/3/2010*Watching TV*9/3/2010*23/3/2010*Watching TV*1/3/2010*23/3/2010*Watching TV*18/3/2010*28/3/2010*END INPUT*1/3/2010*9/3/2010");
myChart.gDraw();
myChart.gChangeBarColour(1, "#dd2200");
myChart.gChangeBarColour(2, "#9900ee");
myChart.gChangeBarColour(3, "#00dd00");
myChart.gChangeBarColour(4, "#ffbb00");
myChart.gChangeBarColour(5, "#00aa99");
}
</script>
</head>
<body onload="initCharts()">
<div id="chart1" class="gContainer">
</div>
<div id="db"></div>
</body>
Is it getting confused between the body inline script?
Inspect the page elements. Probably your Chrome extensions are dynamically adding scripts to the page in HEAD.
I think that when javascript is downloaded the browser must wait to get it all and then run it - this stops it going to the next line directly and getting it. I guess styles all get downloaded and then computed down to inheritance position and importance etc...so they can download in parallel.
This kind of thing is hard to regulate in a CMS with components that load their own style and js.
For me, Google Analytics library inserted scripts before the rest of mine.
I used a image gallery engine called prettyPhoto.js in a WordPress site that I was creating. However, for some strange reason the image gallery seems to have completely stopped working and I can't for the life of me find out how to rectify this problem (without explicitly going through the entire site and stripping out the rel="prettyphoto" tags embedded in all the image anchor links.
I am wondering if the javascript or the CSS is not being output to the browser properly, but taking a look at the "Net" panel in firebug, it seems to be loading these files without a problem. I tried having a look at the <a> link referencing the images to be opened, and they all had the required "prettyPhoto" attribute.
The page in question is
http://instant-wine-cellar.co.uk/products/microcellar and try clicking on any of the microcellar pictures.
Another is the "Watch Microcellar Video" link on the front page.
For those who do not know. This image gallery script, same with a lot of others, works by:
1. putting the prettyPhoto javascript file in your server.
2. putting the prettyPhoto css file in your server.
3. referencing the path to the above files into the head (or footer) of your html file.
4. triggering the process by putting some bespoke script into your HTML file to find the <a> tags in your file with a certain rel attribute and opening the link it references, into the prettyPhoto modal box.
At first include jquery.js then plugin.
Find:
<script src="http://instant-wine-cellar.co.uk/wp-content/themes/Wineconcepts/js/jquery.prettyPhoto.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
Replace:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://instant-wine-cellar.co.uk/wp-content/themes/Wineconcepts/js/jquery.prettyPhoto.js" type="text/javascript"></script>