how to include reference in JSFIDDLE - javascript

Bit of a beginner at using JSFiddle...trying to recreate an issue in my code. Unsure how to include the correct reference though. For My code I am using:
<link href="/jquery-ui-1.10.3.custom/css/start/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" type="text/css" />
<script src="/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
So my Q being how do I include these files in JSFiddle. Cant seem to find them from the drop down?
Thanks again

Use the external resource part. JSFiddle automatically identifies it as JS or CSS based on the extension:
Note: This will only work if the files are publicly available online. If they're only on your local machine, this feature won't work for you.
If you wanna upload your local file, you can use Gists and put your code in it. Then you can use RawGit to get the working URL and add it there, as usual.

Related

How to reference JS in an html file

I have been trying to reference my JS in my html file for a while now. I have tried many different methods that people have told me and none of them have worked. Here is what I have at the moment. <script src="script.js"></script> Yes, both files are in the same folder along with my style.css file. The reference I have for the style.css file works. I used <link rel="stylesheet" href="style.css" />
Can someone please help me fix my JS reference?
If its doesn't work check console for any problem Or check directory of script src!
someways javascript is disable on your web browser . check it and enable .
You should try:
<script src="/script.js"></script>
Some web servers might want that leading slash, while others don't need it.

How to address error "Did not load script at 'script name' because non script MIME types are not allowed when 'X-Content-Type: nosniff' is given

I have a fairly simple Angular 1.x app that was working fine until i upgraded to Safari 11. Now, it doesn't work because almost all of the js files are blocked.
The same was true for CSS files, but removing the "rel" attribute and adding type="text/css" fixed the CSS issues.
For the JS files, I've made sure to add type="text/javascript" to the script tags. I also just tried adding ./ to the beginning of the src's for giggles and they still won't load.
Does anyone know how to fix this?
Thanks,
Wayne
I want to just delete the question but I hope maybe this answer will still be helpful to someone.
So, my problem was actually that I had a bad clone of my project and it was missing files!
However, for anyone having the same issue:
ensuring that type="text/css" for stylesheets and type="text/javascript" did fix the issue. (for the files that actually existed)
Please make sure that a response header with the name X-Content-Type or X-Content-Type-Optionas has the text/javascript value instead of nosniff.
It is simple to make a workaround locally using Charles Proxy Rewrite tool

getOrgChart undefined error

My need is to display OrgChart vertically and found getOrgChart is the one to try. I downloaded the js file from here and followed the instructions but I am getting getOrgChart is not defined. I did alert(jQuery) to check whether the jquery is loaded and everything working fine. I tried the sample demo ones which came with the free download package and those are also getting same issues $(...).getOrgChart is not a function. Please let me know what could be the issue? Do I need to purchase the full version to get it worked? I wanted to test the free version first and then buy the license one.
Are you sure to include the javascript source in your HTML?
<script src="../getorgchart/getorgchart.js"></script>
<link href="../getorgchart/getorgchart.css" rel="stylesheet" />
Before calling any javascript function it needs the related javascript library files should be declared before. So please check it before the calling that library files are added.

YUI not recognized

I have this page that has a JS error about the YUI JavaScript library not being recognized:
http://www.comehike.com/outdoors/hike_widget.php?hike_id=164
But that seems strange to me because if you view source, you will see the line declaring the use of YUI. Any idea why this might be happening and how I can fix it?
Thanks!!
You must include the javascript YUI too. Not only the css
You will need YUI 3 for your route.js try add this :
<!-- JS -->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?3.3.0/build/yui/yui-min.js&3.3.0/build/json/json-min.js&3.3.0/build/oop/oop-min.js&3.3.0/build/dom/dom-base-min.js&3.3.0/build/dom/selector-native-min.js&3.3.0/build/dom/selector-css2-min.js&3.3.0/build/event-custom/event-custom-base-min.js&3.3.0/build/event-custom/event-custom-complex-min.js&3.3.0/build/event/event-min.js&3.3.0/build/pluginhost/pluginhost-min.js&3.3.0/build/dom/dom-style-min.js&3.3.0/build/dom/dom-style-ie-min.js&3.3.0/build/dom/dom-screen-min.js&3.3.0/build/node/node-min.js&3.3.0/build/event/event-base-ie-min.js&3.3.0/build/querystring/querystring-stringify-simple-min.js&3.3.0/build/queue-promote/queue-promote-min.js&3.3.0/build/datatype/datatype-xml-min.js&3.3.0/build/io/io-min.js"></script>
or just:
<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>
The only thing I see is this:
http://yui.yahooapis.com/combo?2.8.2r1/build/reset-fonts-grids/reset-fonts-grids.css&2.8.2r1/build/base/base-min.css
Which is a CSS file.
EDIT:
Which YUI Javascript files you include depends on what functionality you need. It is a pretty extensive API, and there are a couple of versions.
For documentation on the APIs, see: http://developer.yahoo.com/yui/.
As per answer by alexl, here are the core functions of the most recent version (3.3.0):
http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js
If you want to be able to read the JavasScript, see:
http://yui.yahooapis.com/3.3.0/build/yui/yui.js
The YUI file you are including right now (http://yui.yahooapis.com/combo?2.8.2r1/build/reset-fonts-grids/reset-fonts-grids.css&2.8.2r1/build/base/base-min.css) returns a CSS (stylesheet) only--it is for resetting CSS properties to be consistent across browsers. It is not the YUI JavaScript library which you are trying to use later in the code.
Download and add a reference to yahoo-dom-event.js via something like this:
<!-- YAHOO Global Object source file -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2/build/yahoo/yahoo-min.js"></script>
You may also need to include other YUI .js files too depending on what you're doing. YUI can be modularized. See http://developer.yahoo.com/yui/2/ for exact details if you need to do that.

CDN / and or Hosting js and css files on a server

so id like to link a refernce to a couple js files if possible, but im not sure i could go about doing this so i can use it
<script type=text/javascript src=http://mylinkedjs></script>
and call i from my jquery.
Anyone know how this is possible?
Let me try to rephrase your question.
I want to include some JavaScript files from another server on my page, and call functions from those files in my own jQuery code. Is this possible?
That’s certainly possible. Once you’ve included a JavaScript file on your web page (like you did in the question), the global variables it creates are accessible to any other JavaScript running on that page, regardless of which server the JavaScript file was loaded from.
This is often how jQuery itself is included on pages: by linking to a copy of jQuery on a big CDN, e.g.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
See http://docs.jquery.com/Downloading_jQuery#CDN_Hosted_jQuery
<script type="text/javascript" src="http://wherever.com/linked.js">

Categories

Resources