jQuery Plugin For Editable and Runnable JS Code Blocks - Codeblock.js

File Size: 8.58KB
Views Total: 1168
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Editable and Runnable JS Code Blocks - Codeblock.js

Codeblock.js is a jQuery plugin that allow to turn javascript code into an editable and runnable code block that your visitor can poke at and play with to better understand your API. 

How to use it:

1. Include jQuery Codeblock CSS to your web page

<link href="codeblock.css" rel="stylesheet" type="text/css">

2. Create a container for the editable and runnable code block

<div class="codeblock" id="sandstorm_demo">
//Try playing with the parameters
var R=0, s=5; x1=.1; y1=.05, x2=.25, y2=.24, x3=1.6,
    y3=.24, x4=300, y4=200, x5=300, y5=200;
//Try various tags here (p, a, code, etc.)
//var elems=document.getElementsByTagName("h3");
var elems=document.querySelectorAll("#sandstorm_demo span");
var l=elems.length;
var i, c;
var A = function (){
    for(i=0; i-l; i++){
        c=elems[i].style; c.position='absolute';
        c.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+"px";
        c.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+"px";
    }
    R++;
};
//Loop
setInterval(function(){A()},s);
console.log("Sandstorm!");
</div>

3. Include necessary javascript libraries on your web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://rawgithub.com/ajaxorg/ace-builds/master/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="codeblock.js"></script>

4. Call the plugin

<script>
$(function(){
    $(".codeblock").codeblock();
});
</script>

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.