Embedding the fiddle

Embedding is provided to show the fiddle with running result on any other page.

URL: http://{url_of_the_fiddle}/embedded/[{tabs}/[{style}]]/

url_of_the_fiddle
full address to the fiddle without http://jsfiddle.net
tabs

which tabs and in which order should be displayed (default: js,resources,html,css,result)

js,html,css
tab with the appropriate code
result
result tab
resource
list of external resources, it will not be displayed if no resources were used
skin
which skin should be used (default: light)

Getting the code

../_images/share_embed.png

Basic funcitonality is provided in the Share ‣ Embed on your page menu for easy access. It contains the default URL for the fiddle wrapped in iframe code.

Tutorial

The fiddle http://jsfiddle.net/zalun/NmudS/ will provide following code:

<iframe
  style="width: 100%; height: 300px"
  src="http://jsfiddle.net/zalun/NmudS/embedded/">
</iframe>

There are 4 tabs as no external resource was used in the fiddle: js, html, css and result.

Changing Tabs

In example if to show the result as the first tab add result,js,html,css/ to the URL: src="http://jsfiddle.net/zalun/NmudS/embedded/result,js,html,css/"

If there is no need to show all the tabs, they might be removed: src="http://jsfiddle.net/zalun/NmudS/embedded/js,result/"

Changing skin

It is already technically possible to change the skin of the embedded fiddle. Following example is using a presentation skin. src="http://jsfiddle.net/zalun/NmudS/embedded/js,result/presentation/"

Table Of Contents

Previous topic

Languages

Next topic

Echo Javascript file and XHR requests

This Page