Vote count: 0
I got a problem with my iframe. On the top there is a bar. On the left I got a textarea for putting in HTML and i got also two textarea's for putting in CSS and JS but they had a display:none. Then i want on the left an iframe where i can see the result of everything i had put in. But the iframe is everythime beneath the textarea for HTML. I have tried to change the positioning of my iframe but when i make my window bigger he is on a total other place. I gonna set my whole code because it's possible that i make a mistake in a other thing
<script>
var height=$(window).height()-40;
$(".codecontainer").height(height+"px");
</script>
<!doctype html>
<html>
<head>
<title>CodePlayer</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="http://ift.tt/1dLCJcb"></script>
<script src="http://ift.tt/1LrXp9A"></script>
<style>
* {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
margin:0;
padding:0;
}
body, html {
height:100%;
width:100%;
}
#container {
height:100%;
}
#titlebar {
width:100%;
background-color:#EEEEEE;
border-bottom:1px solid grey;
height:40px;
}
#title {
padding:10px 0 0 20px;
font-weight:bold;
float:left;
}
#menu {
margin:0 auto;
width:220px;
padding:5px;
}
#menu ul {
border:1px solid grey;
border-radius:5px;
height:30px;
}
#menu li {
float:left;
list-style:none;
border-right:1px solid grey;
height:20px;
padding:5px 10px;
}
#menu li:hover {
background-color:grey;
}
#result{
position: relative;
top: -30px;
left: 153px;
border-right: 1px solid white;
}
#runButton{
float: right;
position: relative;
}
#run{
padding: 10px 15px 10px 15px;
border:none;
border-radius: 10px;
}
#run:hover{
background-color:grey;
}
.break {
clear:both;
}
.codecontainer{
width:49%;
float:left;
position:relative;
top: -24px;
height: 100%;
}
.codecontainer textarea{
width: 100%;
height: 100%;
border:none;
border-right: 1px solid grey;
font-family: monotype;
font-size: 120%;
padding:4px;
}
.codeLabel{
border:1px grey solid;
width: 50px;
position: absolute;
top: 20px;
right: 10px;
padding: 5px 5px 5px 5px;
border-radius: 5px;
}
#cssContainer, #jsContainer{
display: none;
}
iframe{
height: 100%;
width: 100%;
margin: 0;
float: left;
}
</style>
</head>
<body>
<div id="container">
<div id="titlebar">
<div id="title">
CodePlayer
</div>
<div id="runButton">
<button id="run">Run</button>
</div>
<div id="menu">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li style="border:none" id="result">Result</li>
</ul>
</div>
</div>
<div class="break"></div>
<div class="codecontainer" id="htmlContainer">
<span class="codeLabel">HTML</span>
<textarea>Example code</textarea>
<div class="codecontainer" id="cssContainer">
<span class="codeLabel">CSS</span>
<textarea>Example code</textarea>
</div>
<div class="codecontainer" id="jsContainer">
<span class="codeLabel">JS</span>
<textarea>Example code</textarea>
</div>
<div class="codecontainer" id="resultContainer">
<span class="codeLabel">Result</span>
<iframe></iframe>
</div>
</div>
</body>
</html>
asked 1 min ago
This entry passed through the Full-Text RSS service - if this is your content and you're reading it on someone else's site, please read the FAQ at http://ift.tt/jcXqJW.
A weird place of my iframe in my codeplayer
Aucun commentaire:
Enregistrer un commentaire