Last Updated: February 25, 2016

css-scratch page using jQuery bind()

I usually want to do more exploration for a css code, but it makes me tired to repeatly hit reload button. Lucky for me, there in jQuery bind (), so I created a page to try a css code quickly.

Index.html

<!doctype html>
<html class="windows no-js" lang="en-US" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>CED</title>
<script type="text/javascript" src="/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="/reset.css"></link>
</head>
<body style="background: #ddd;" >
<div style="position: relative; width: 90%; margin: 0 auto;">
<iframe id="html-view" src="dummy.html" style="width:100%; margin-top: 1em;"></iframe>
</div>
<div style="position: relative; width: 90%; margin: 0 auto;">
<h2 style="margin: 1em 0 0 0; padding: 0; color: #009">body</h2>
<textarea class="body" style="background:#fff; font-family: courier; font-size: 11px; width: 100%; height: 80px;"></textarea>
</div>
<div style="position: relative; width: 90%; margin: 0 auto;">
<h2 style="margin: 1em 0 0 0; padding: 0; color: #009">css</h2>
<textarea class="style" style="background:#fff; font-family: courier; font-size: 11px; width: 100%; height: 80px;"></textarea>
</div>
<script type="text/javascript">
// Init
$('textarea.body').text($('#html-view').contents().find('body').html());
$('textarea.style').text( $('#html-view').contents().find('style').text() );
// Binding
$('textarea.body').bind('input propertychange', function() {  $('#html-view').contents().find('body').html($(this).val());  });
$('textarea.style').bind('input propertychange', function() { $('#html-view').contents().find('style').text($(this).val()); });
</script>
</body>
</html>

dummy.html

<html>
<head>
<style>
* { margin:0; padding: 0; background: #fff; }
</style>
</head>
<body>
<h1>Welcome to test</h1>
<p>Feeling something?</p>
</body>
</html>

#css

#html

#jquery