CODEWITHSUNDEEP
javascriptjqueryhtmljsfiddle
user3874356
user3874356

Reputation: 53

Can't leverage working jsfiddle to work

I am new to jsfiddle. I am trying to leverage the functionality from jsfiddle : http://jsfiddle.net/jhfrench/NQ97h/

The JS piece of it is like this:

$('#myTab a').click(function (e) {
  if($(this).parent('li').hasClass('active')){
    $( $(this).attr('href') ).hide();
  }
  else {
    e.preventDefault();
    $(this).tab('show');
  }
});

But, when I try to use this into a normal html folder, only my html stuff works. If someone can show how to convert the external resources, javascript between correct tags, and onload event being called in the jsfiddle into right places, IT WOULD BE REALLY HELPFUL!!

Thanks !!

Upvotes: 0

Views: 61

Answers (2)

matthias_h
matthias_h

Reputation: 11416

In addition to the adjustment given by user3558931 and as you mentioned in your comment that you want to know how to include the external resources of the fiddle - add the following to your html to include the js- and css-files that are included there: 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
<script type="text/javascript" src="http://appliedinter.net/Workstream/common_files/js/plugins.js"></script>  
<script type="text/javascript" src="http://appliedinter.net/Workstream/common_files/js/script.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css"/>

Just In case this is not clear - in case you include the adjusted js code in your html this also has to be wrapped in script-tags: 

<script type="text/javascript> 
  // add code from answer by user3558931 here
  // (which I just upvoted as OP hasn't enough rep to upvote) 
</script>

Update for the comment: Though it's possible to get the source like suggested in the mentioned youtube video, just want to add: the included external files are displayed clicking on "External Resources" in the left Fiddle menu. Right click on each file, select "copy link target", and include the files as js or css. Similar with the included jquery-version.

Upvotes: 0

PeterKA
PeterKA

Reputation: 24638

You're missing DOM ready. In jsfiddle it work because the code is in window.load event. Use DOM read as follows:

//Wait for DOM to load, then run the code enclosed.
$(function() { 
    $('#myTab a').click(function (e) {
        if($(this).parent('li').hasClass('active')){
            $( $(this).attr('href') ).hide();
        }
        else {
            e.preventDefault();
            $(this).tab('show');
        }
    });
});

Upvotes: 1

Related Questions