miskellaneousness miskellaneousness - 2 years ago 78
Javascript Question

How can I get the jQuery I worked on in jsfiddle to my website?

I'm working on a website mostly just for fun and am using HTML and CSS. I have some limited knowledge of these languages, but have never used jQuery before. But for only one page of the website, I wanted to have "linked sliders," which I found could be created using jQuery. I found a jsdiddle with some sliders and modified them to fit my project.

Here's the jsdiddle with the end product that I'd like to be embedded on one page of my site: http://jsfiddle.net/7e8xwjer/8/

I looked up how to add jQuery to a page, and took the following steps:

1) Downloaded jquery-1.12.3.js and renamed it jquery.js.

2) Added the following line of code in the head of the page:

<script type="text/javascript" src="jquery.js"></script>

3) Created a new .js file called js1.js with all the jQuery code from the jsdiddle.

4) Added the following line of code in the head of the page (in addition to the first):

<script type="text/javascript" src="js1.js"></script>

5) Added the CSS styling and HTML table from the diddle as needed.

The CSS and HTML table work fine, but none of the jQuery works. I'm sure I've made a simple error here, but I can't figure it out! Please let me know what other steps I need to take to get the jQuery script functioning on the site.

Thanks in advance for the patience and help.

Answer Source

JSFiddle, usually, (depends on the settings you choose [see image, point 1]) encloses all JS code into a document ready event so your js1.js should look something like:

 $(document).ready( function(){
    // your code from JSFiddle here

EDIT: looking at your Fiddle, you are using JqueryUI [see image, point 2] so have to include it as others said in comments.

EDIT 2 your fiddle is set "onLoad" [see image, point 3] so to reproduce exactly the same condition you would have to replace $(document).ready with $(window).load; however I'm not sure that in your case you need to wait until all resources are loaded... So don't change it unless needed.

enter image description here

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download