How to embedded ACE editor in html? - javascript

I recently need to embed Ace in my project, So I download the pre-build code from https://github.com/ajaxorg/ace-builds/ and I copied the code into my site from https://github.com/ajaxorg/ace-builds/blob/master/editor.html where it lists how to embed Ace into a web page.
I copied that the src-min folder into my project. I changed the
<script src="src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
into
<script src="js/src-min/ace.js" type="text/javascript" charset="utf-8"></script>
When I try to browse the web page in sandbox in codeanywhere.com (I also uploaded the src-min folder), I can only see the continent in and there is no area for me to enter something new. Also, the code is in black and white.
What could I be doing wrong and what can I do to get Ace working properly?

First thing in such cases is to look into browser console to see if something blocks loading the script.
As you commented, you have "frame is sandboxed and the 'allow-scripts' permission is not set."
That's likely a problem with codeanywhere, try running it locally or use another service.

Related

JavaScript imagemappro.js editor integration in Squarespace

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

How can I add an HTML file that references other JS files in Google Sites?

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.

CircleType javascript library not working locally

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

Error at loading Slider Revolution 5.0 Extrensions

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

Image cannot be loaded. Make sure the path is correct and image exist

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.

Categories

Resources