Introduction¶
jsFiddle is divided into few sections: menu, sidebar, and editing panels.
Entering code¶
One may switch between editing panels using the ctrl + up arrow and ctrl + down arrow.
HTML¶
Code entered in this panel will be rendered inside body of the document, that is between <body> and </body>.
Warning
Please do not enter doctype, body etc. into the HTML panel. These tags are placed automatically.
CSS¶
Code entered in this panel will be placed in the header’s style block, that is betweeen <style> and </style>.
Note
If there is a need to edit the header one can use a CSS panel hack
JavaScript¶
Code entered in this panel will be placed in header’s script block, that is between <script type="text/javascript"> and </script>.
Getting Result¶
Result panel¶
This panel is read only - it contains an iframe with the result of running the fiddle. One can show the result without saving the fiddle - it is enough to click on Run or hit ctrl + Enter key combination
Draft Page¶
Only for registered users. Current result is saved in a draft.
One may access it by loading the http://jsfiddle.net/draft/. The shortcut is ctrl + shift + Enter.
Note
Using Draft is the easiest and probably best way to test fiddle in “other browser”. Be it IE5, or anything running on other system, mobile or your watch if it happened to have a web browser. Keep editing on your favourite browser, test on anything else.
- Log in to jsFiddle on your favorite browser
- Open or create a fiddle
- Hit [Run] button
- Open the draft page http://jsfiddle.net/draft/ on the other browser/device. It will display the last executed fiddle
- Reload the draft page every time you’d like to test
Saving¶
Save the code for future usage or to share it to other people. Let me say it again: There is no need to save if you just want to test.
As a new Fiddle¶
Buttons Save or Fork are always present in the UI. First one appears if no fiddle was loaded, the latter is used to create a new fiddle from the existing one.
As a new Version¶
If a fiddle is loaded clicking on Update will create a new version of the fiddle and load it into the browser. Its URL will now contain a version number. This and former versions are still available.
Setting Base version¶
If no version is specified jsFiddle will load the base version. By default it’s the first created version. Owner of the fiddle - user who created the first version may change it by clicking on the button Set as Base.
It is considered a good practice to use base version for embedded fiddles. Author can fix the error and “update” the example on the page without accessing the article’s code.
Fiddle Settings (Sidebar)¶
Frameworks and Extensions¶
Contains 2 selectable lists.
First is the list of all supported frameworks. Choosing one will create <script> tag in the <head> section which will load the desired framework version. Choosing the No-Library one will not load any framework.
Below there is a list of additional libraries dependent on currently selected framework version. In example - choosing MooTools Core 1.2.4 will load a lit containing MooTools More, Clientcide, FormCheck, Upgrade Helper and ART. All these may be loaded with the fiddle if checkbox is checked.
Second drop-down is about the Code Wrap with default setting to “onLoad”. There are 4 options to choose:
- onLoad:
- wrap the code so it will run in onLoad window event
- onDomReady:
- wrap the code so it will run in onDomReady window event
- no wrap - in <head>:
- do not wrap the JavaScript code, place it in <head> section
- no wrap - in <body>:
- do not wrap the JavaScript code, place it in <body> section
Fiddle Options¶
- Title:
- will be used in the tittle bar of the jsFiddle. Only fiddles with the title will be displayed in your public fiddle list.
- Description:
- Please provide a description of the fiddle. It will be displayed in your public fiddle list.
- Normalized CSS:
- A checkbox, deselected by default. If selected, the fiddle will be rendered with normalize.css which is removing most of the browser styling of many HTML tags.
- Body Tag:
- One can change the body tag. It is usually done to change the styling as <body class="dark_ui">. Some frameworks (Dojo) are using it to style the widgets and load CSS
- DTD:
- A choice few useful DTDs is available - HTML5, XHTML (strict, transitional) , HTML4 (strict, transitional, frameset). We aim to not fire warning or errors on the syntax checks.
- Framework <script> attribute:
- An ability to add special attributes to the script tag loading the framework. That would result with <script type="text/javascript" src="/js/lib/someframework.js" {attributes}></script>
External Resources¶
CSS or JS (with appropriate extension) which should be loaded after the framework. It’s a perfect place to put libraries which are framework independent, like RaphaelJS
JSFiddle is recognizing the type of the resource by the extension. JavaScript will be chosen if type is unknown.
Note
If you want to use a dynamic resource please add a dummy GET variable i.e. http://example.com/dynamically.php?somevar=somevalue&dummy=.css. This will trick jsFiddle to recognize it as CSS resource.