Zackio
9/17/2014 - 12:11 PM

fiddle.css

index.php
content_copyfile_download
<html>

<?php include 'fiddle.js' ?>
<?php include 'fiddle.css' ?>

<head>



</head>
<body>
<?php include 'fiddle.html' ?>
</body>
</html>
fiddle.response.html
content_copyfile_download
<p>This <span>content</span> is loaded from Gist via XHR request (<span>Ajax</span>)</p>
<p>It has also some <span>JavaScript</span> code which is setting the background for spans</p>
<script type='text/javascript'>
	$$('#demo span').each(function(el) {
		el.setStyle('backgroundColor', '#ffb');
	});
</script>
fiddle.manifest
content_copyfile_download
name: Request.HTML - jsFiddle/Gist integration demo
description: jsFiddle demo hosted on Gist using HTML Request to get Ajax data
authors:
  - Piotr Zalewa
resources:
  - /js/empty.js
  - /css/normalize.css
normalize_css: no
lang_css: SCSS
fiddle.js
content_copyfile_download
window.addEvent('domready', function() {
	new Request.HTML({
		url: '/gh/gist/response.html/606699/',
		data: {'delay': 1},
		method: 'post',
		update: 'demo',
		onSuccess: function(response) {
			$('demo').highlight();
		}
	}).send();
})
fiddle.html
content_copyfile_download
<p>Result will appear below with 1 sec delay</p>
<div id="demo"><p>This text will be replaced</p></div>

<p><a href='http://doc.jsfiddle.net/use/gist_read.html' target='_new'>Documentation</a></p>
<p><a href='http://gist.github.com/606699/' target='_new'>Gist Demo</a></p>
fiddle.css
content_copyfile_download
$fullred: #ff0000;
body {
	font-family: Helvetica, Verdana
}
p {
	padding: 7px 10px;
}
#demo { 
	border: 1px solid $fullred;
}