Skip to content

Instantly share code, notes, and snippets.

@bzdgn

bzdgn/CSS_Play_Demo.html

Last active February 1, 2016 22:53
Show Gist options
  • Save bzdgn/69bf2ce297e7f1036cc9 to your computer and use it in GitHub Desktop.
Save bzdgn/69bf2ce297e7f1036cc9 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Play Demo from w3schools : bottom pixels
Raw
CSS_Play_Demo.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>CSS Play Demo</title>
<style>
body {
font-family: verdana;
font-size: 14px;
}
.container {
width: 100%;
max-width: 974px;
min-width: 0;
background-color: #F1F1F1;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
margin: auto;
left: 0;
right: 0;
height: auto;
bottom: auto;
}
.code-container {
width: 50%;
float: left;
}
.code-container .radio {
line-height: 2;
}
.result-container {
width: 48%;
float: left;
}
.play-it {
background-color: #FFFFFF;
padding: 15px;
margin: 15px;
margin-top: 0;
font-family: Consolas, 'Courier New', Courier, monospace;
font-size: 16px;
}
#enlarge-css-prop {
font-weight: bold;
color: #000000;
}
.demo-div {
margin-left: 10px;
margin-top: 3px;
margin-right: 15px;
background-color: #FFFFFF;
border: 1px solid #C3C3C3;
height: 280px;
}
div#myBox {
background-color: yellow;
width: 100px;
position: relative;
bottom: 0px;
}
#style-div {
font-family: consolas, Courier new;
font-size: 14px;
margin-left: 10px;
margin-right: 15px;
background-color: #FFFFFF;
padding: 10px;
color: #222222;
text-align: left;
}
div.demo-header {
font-size: 24px;
margin-top: 15px;
margin-left: 15px;
margin-bottom: 15px;
color: #555555;
}
div.play-it-footer {
font-size: 14px;
color: #555555;
padding: 15px;
}
#p-footer {
margin: 15px;
}
@media screen and (max-width: 728px) {
.code-container {
width: 100%;
text-align: center;
}
.result-container {
width: 100%;
text-align: center;
}
.play-it-footer {
display: none;
}
.container {
top: 60px;
}
}
</style>
<script>
"use strict";
function playit_onload() {
var preVal = "";
preVal = document.getElementById("preselected-value").value;
if (preVal != "") {
changePosition(preVal);
var x = document.getElementByTagName("input");
var len = x.length;
var i;
for( i = 0; i < len; i++) {
if (x[i].value == preVal) {
x[i].checked = true;
}
}
document.getElementById("container").style.display = "block";
}
}
function clickPosition(obj) {
changePosition(obj.value);
}
function changePosition(val) {
var s = " myBox "; // trim check
s = s.trim();
document.getElementById(s).style.bottom = val;
var x = "bottom:<span id='enlarge-css-prop'>" + val + "</span>";
var y = "div#myBox {<br> background-color: yellow;<br> width:100px;<br> position:relative;<br> ###CSSPROP###;<br>}<br>";
var z = y.replace("###CSSPROP###", x);
document.getElementById("style-div").innerHTML = z;
}
if(!String.prototype.trim) {
String.prototype.trim = function() {return this.replace(/^\s+|\s+$/g,'');};
}
</script>
</head>
<body>
<div id="container" class="container">
<div class="code-container">
<div class="demo-header">CSS Property:
<form class="play-it" action="javascript:return false;">
bottom:
<br><br>
<input id="preselected-value" type="hidden" value="" />
<div class="radio"><input autocomplete="off" type="radio" name="radio_position" onclick="clickPosition(this)" id="value_1" value="auto" checked="checked" /><label for="value_1" > auto </label></div>
<div class="radio"><input autocomplete="off" type="radio" name="radio_position" onclick="clickPosition(this)" id="value_2" value="10px" /><label for="value_2" > 10px </label></div>
<div class="radio"><input autocomplete="off" type="radio" name="radio_position" onclick="clickPosition(this)" id="value_3" value="25px" /><label for="value_3" > 25px </label></div>
<div class="radio"><input autocomplete="off" type="radio" name="radio_position" onclick="clickPosition(this)" id="value_4" value="50px" /><label for="value_4" > 50px </label></div>
<div class="radio"><input autocomplete="off" type="radio" name="radio_position" onclick="clickPosition(this)" id="value_5" value="100px" /><label for="value_5" > 100px </label></div>
<div class="radio"><input autocomplete="off" type="radio" name="radio_position" onclick="clickPosition(this)" id="value_6" value="-10px" /><label for="value_6" >-10px </label></div>
<div class="radio"><input autocomplete="off" type="radio" name="radio_position" onclick="clickPosition(this)" id="value_7" value="-25px" /><label for="value_7" >-25px </label></div>
<div class="radio"><input autocomplete="off" type="radio" name="radio_position" onclick="clickPosition(this)" id="value_8" value="-50px" /><label for="value_8" >-50px </label></div>
<div class="radio"><input autocomplete="off" type="radio" name="radio_position" onclick="clickPosition(this)" id="value_9" value="-100px" /><label for="value_9" >-100px </label></div>
<div class="radio"><input autocomplete="off" type="radio" name="radio_position" onclick="clickPosition(this)" id="value_10" value="initial" /><label for="value_10">initial</label></div>
</form>
<div id="p-footer"></div>
</div>
</div>
<div class="result-container">
<div class="demo-header">Result: </div>
<div class="demo-parent">
<div id="demo-parent">
<div id="demo-div">
<div id="myBox">Play with different bottom values for this yellow DIV element.</div>
</div>
</div>
</div>
<div class="demo-header">CSS Code:</div>
<pre id="style-div">div#myBox {<br> background-color:yellow;<br> width:100px;<br> position:relative;<br> bottom:<span id="enlarge-css-prop">0px</span>;<br>}<br></pre>
</div>
<div style="clear:both;"</div>
<div class="play-it-footer" style="float:left;">Click the property values above to see the result</div>
<div class="play-it-footer" style="text-align: right;">
Check this out: <a style="color: #555555" href="http://www.leventdivilioglu.com/demos/">CSS Positioning Demo</a>
</div>
<div style="clear:both;"</div>
<script>playit_onload()</script>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment