CODEWITHSUNDEEP
javascriptjqueryhtmlcss
phunk rhocks
phunk rhocks

Reputation: 13

JSFiddle to HTML

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>

Upvotes: 0

Views: 3581

Answers (4)

Love and peace - Joe Codeswell
Love and peace - Joe Codeswell

Reputation: 2972

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:

  1. The vscode snippet for HTML 5. It is VERY SIMPLE: html, head, body.
  2. The source for my fiddle

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>

Upvotes: 0

lpg
lpg

Reputation: 4937

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>

Upvotes: 0

Rob Schmuecker
Rob Schmuecker

Reputation: 8954

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>

Upvotes: 0

Manjar
Manjar

Reputation: 3268

You need to add jquery refence in your code

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

Upvotes: 3

Related Questions