New Topic/Question
Reply
Posted 27 May 2012 - 06:44 PM
It can run html and I tested a little javascript but it doesn't seem to work with page level css. I don't really mind the css issue though, it was interesting. It's not up to my standard to share as a snippet, but I thought I'd share it with you guys. I'm still working on my web design skills (obviously), let me know what you think
I'd love some feedback.HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
function setHtml(){
$('#htmlInput').val()
$('#content').contents().find('html').html($('#htmlInput').val());
}
function clearInput(){
$('#content').contents().find('html').html("<html><head></head><body></body></html>")
}
</script>
</head>
<body>
<div id="header">
<h1>HTML Tester</h1>
</div>
<div id="top">
<form>
<textarea id="htmlInput">
<head></head>
<body>
</body>
</textarea>
</form>
</div>
<div id="middle"></div>
<div id="bottom">
<iframe id="content"></iframe>
</div>
<div id="footer">
<button value="Update" onclick="setHtml()" >Update</button><!--update -->
<button value="Clear" onclick="clearInput()">Clear</button><!--clear -->
</div>
</body>
</html>
CSS
body{
background:red;
}
textarea {
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
width:100%;
height:100%;
border-radius: 15px;
padding-top:1px;
padding-left:5px;
border-color:white;
resize: none;
font-size:100%;
}
#top, #bottom{
width:100%;
height:39%;
background:white;
border-radius: 15px;
}
#footer, #header{
width:100%;
height:8%;
vertical-align:center;
}
#middle{
width:100%;
height:6%;
}
#content{
width:98%;
height:90%;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 10px;
padding-right: 10px;
border: 0;
}
This post has been edited by atraub: 27 May 2012 - 08:02 PM
MultiQuote
| 