JSFiddle to HTML

Question

I'm a novice in javascript and jquery. I have a code for bars to slide and which works fine on jsfiddle; however, when I try to run the as an HTML file, it does not work. I do not know what I'm missing out here or what needs to be done to make this code work. Kindly let me know what library files I will have to include in the code for the bars to slide in HTML.

The link for my code on jsfiddle is: http://jsfiddle.net/sgx9L8sx/

Any help will be appreciated.

Thanks in advance.

`.box {
width:40px;
height:10px;
background:blue;
}
.box1 {
width:25px;
height:10px;
position:relative;
top:40px;
left:40px;
background:black;
}
.result{
position:fixed;
top:20px;  
}
.result1{
position:fixed;
top:70px;
}

<script>    
$(".box").draggable({
axis: "x",
drag: function(event, ui) {
    var y2 = ui.position.top;
    var x2 = ui.position.left;


    if (reverting){
        event.preventDefault();
        event.stopImmediatePropagation();
    } else if (x2 > 100) {
        reverting = true;
        revertDrag($('.box'));
    }
    else if (x2<0) {

    }
    }
 });

 function revertDrag(element){
 element.draggable('disable');
 element.animate({
    top: 0,
  }, {
    duration: 500,

    complete: function() {
        reverting = true;
        element.draggable('enable');


    }
})

}
$(".box1").draggable({
axis: "x",
drag: function(event, ui) {
    var y3 = ui.position.top;
    var x3 = ui.position.left;




    if (reverting1){
        event.preventDefault();
        event.stopImmediatePropagation();
    } else if (x3 > 200) {
        reverting1 = true;
        revertDrag1($('.box1'));
        alert("this is incorrect");
    }
    else if (x3<40) {
    alert("Wrong submission");
        revertDrag2($('.box1'));
       }
 }
 });

function revertDrag1(element){
element.draggable('disable');
element.animate({
    top:40,
}, {
    duration: 500,

    complete: function() {
        reverting1 = false;
        element.draggable('enable');


    }
})

}
    function revertDrag2(element){
element.draggable('disable');
element.animate({
    top:40,
    left:70,
}, {
    duration: 500,

    complete: function() {
        reverting1 = true;
        element.draggable('enable');


    }
})

}
</script>

<body>
<div class="box">
</div>
<div class="result">
</div>
<div class="box1">

<div class="result1">
</div>
</div>
</body>

Are you using a stylesheet for the HTML page or are using in-page styling? Read this question incorrectly :/ my bad — Katler, Sep 16 '14 at 12:27
The code you pasted above is the code you put in a HTML file ? If so, there's a lot of errors... Missing , — enguerranws, Sep 16 '14 at 12:31
To debug that kind of errors, go to the inspector of your browser, and check the Console tab, it will give you some help of what is not going well. — enguerranws, Sep 16 '14 at 12:33
This is just a rough draft. I havent added the head and style tags here. But in the main html file they are added. — phunk rhocks, Sep 16 '14 at 12:57

score 3 · Accepted Answer · answered Sep 16 '14 at 12:27

3

You need to add jquery refence in your code

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

answered Sep 16 '14 at 12:27

Manjar

3,159
32
44

Thanks Balder :) I figured out the prob. – phunk rhocks Sep 16 '14 at 13:36

score 0 · Answer 2 · answered Sep 16 '14 at 12:27

If you look at Framework and Extensions in your fiddle you will see that your base library is jQuery 1.10.1 Then you have included jQueryUI 1.10.3 thereafter which is one JS and one CSS file.

The CSS can be included at anytime but ideally before your JS. The JS order is important that jQuery is included before jQueryUI.

So something like this in your HTML:

<script type='text/javascript' src='//code.jquery.com/jquery-1.10.1.js'></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>

score 0 · Answer 3 · answered Sep 16 '14 at 12:39

You can find your demo page at the following url (press CTRL+U to see the source code):

http://fiddle.jshell.net/sgx9L8sx/show/

In example, this is what is set on the header:

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title> - jsFiddle demo</title>
    <script type='text/javascript' src='//code.jquery.com/jquery-1.10.1.js'></script>
    <link rel="stylesheet" type="text/css" href="/css/result-light.css">
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
    <style type='text/css'>
        .box {
        width:20px;
        height:10px;
        background:blue;
        }
        .box1 {
        width:20px;
        height:10px;
        position:relative;
        top:40px;
        background:black;
        }
        .result {
        position:fixed;
        top:20px;
        }
        .result1 {
        position:fixed;
        top:70px;
        }
    </style>
    <script type='text/javascript'>//<![CDATA[ 
        $(window).load(function(){
        });//]]>
    </script>
</head>

I know this but if i use it in my code it doesnt work. I have to download the entire library and only then it works. And moreova i never understood the reference to the result-light file. Whats the significance of that? — phunk rhocks, Sep 16 '14 at 12:59

Love and peace - Joe Codeswell · Answer 4 · 2021-08-24T19:55:35.547

Here is my method for converting fiddle to HTML.

The resulting HTML page works when run in Live Server on Windows 10.

I believe the following HTML code will be self explanatory. Please read the comments.

The starting code came from 2 sources:

The vscode snippet for HTML 5. It is VERY SIMPLE: html, head, body.
The source for my fiddle
- [The source FIDDLE for my fork] (http://jsfiddle.net/KPCh4/4/)
  - The source FIDDLE is from Gabriele Petrioli's answer to the S.O. question "How to iterate over array of objects in Handlebars?"

Here is my HTML.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Construct HTML from FIDDLE</title>
    <!-- N.B. 
    see [my SO answer at](https://stackoverflow.com/questions/25868691/jsfiddle-to-html/68913137#68913137) 
    1. There are 4 sections total added to a vscode HTML 5 blank page. 
      - Each has BEGIN, END 
    2. The Source jsfiddle for my fork url is https://jsfiddle.net/JoeCodeswell/7mwuepL
      - the source for my fork url is         http://jsfiddle.net/KPCh4/4/
        - from [Gabriele Petrioli answer](https://stackoverflow.com/a/22697152/601770)
  -->
    <!-- 1.BEGIN FIDDLE STYLE BEGIN -->
    <style>
      .row {
        border: 1px solid red;
      }
    </style>
    <!-- 1.END FIDDLE STYLE END -->

    <!-- 2.BEGIN ADD FIDDLE RESOURCES >> BEGIN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <!-- 2.END ADD FIDDLE RESOURCES >> END -->
  </head>
  <body>
    <!-- 3.BEGIN https://jsfiddle.net/JoeCodeswell/7mwuepLs/2/  >> HTML >> BEGIN -->
    <div id="DocumentResults"></div>
    <script id="document-template" type="text/x-handlebars-template">
      <div>
        {{#each this}}
          <div class="row">
            <div class="col-md-12">
              <h2>{{Category}}</h2>
              {{#DocumentList}}
                <p>{{DocumentName}} at {{DocumentLocation}}</p>
              {{/DocumentList}}
            </div>
          </div>
        {{/each}}

        <p>There are no documents available at this time</p>

      </div>
    </script>
    <!-- 3.END https://jsfiddle.net/JoeCodeswell/7mwuepLs/2/  >> HTML >> END -->

    <!-- 4.BEGIN https://jsfiddle.net/JoeCodeswell/7mwuepLs/2/  >> JavaScript + jQuery 2.0.2 >> BEGIN -->

    <script>
      $(function () {
        var source = $("#document-template").html();
        var template = Handlebars.compile(source);
        var html = template(data);
        $("#DocumentResults").html(html);
      });

      var data = [
        {
          Category: "General",
          DocumentList: [
            {
              DocumentName: "Document Name 1 - Joe",
              DocumentLocation: "Document Location 1 - Joe Bla",
            },
            {
              DocumentName: "Document Name 2 - General",
              DocumentLocation: "Document Location 2 - General",
            },
          ],
        },
        {
          Category: "Unit Documents",
          DocumentList: [
            {
              DocumentName: "Document Name 1 - Unit Documents",
              DocumentList: "Document Location 1 - Unit Documents",
            },
          ],
        },
        {
          Category: "Minutes",
        },
      ];
    </script>
    <!-- 4.END https://jsfiddle.net/JoeCodeswell/7mwuepLs/2/  >> JavaScript + jQuery 2.0.2 >> END -->
  </body>
</html>

JSFiddle to HTML

4 Answers4