Skip to content

Instantly share code, notes, and snippets.

@bzdgn

bzdgn/CSS_Play_Demo2.html

Created February 1, 2016 22:53
Show Gist options
  • Save bzdgn/c57047a31b683e1700aa to your computer and use it in GitHub Desktop.
Save bzdgn/c57047a31b683e1700aa to your computer and use it in GitHub Desktop.
Download ZIP
CSS Play Demo from w3schools 2 : bottom percentage
Raw
CSS_Play_Demo2.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;
display: none;
}
.code-container {
width: 50%;
float: left;
}
.code-container .radio {
line-height: 2;
}
.result-container {
width: 48%;
float: right;
}
.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;
}
#myBox {
background-color: yellow;
width: 100px;
position: absolute;
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;
}
.demo-header {
font-size: 24px;
margin-top: 15px;
margin-left: 15px;
margin-bottom: 15px;
color: #555555;
}
.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 playItOnLoad() {
var preVal = "";
preVal = document.getElementById("preselected-value").value;
if(preVal != "") {
changePosition(preVal);
var x = document.getElementsByTagName("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:absolute;<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;</div>
<form class="play-it" action="javascript:return false;">
bottom:<br><br>
<input type="hidden" id="preselected-value" value="10%" />
<div class="radio"><input autocomplete="off" type="radio" name="radioPosition" onclick="clickPosition(this)" id="value_1" value="0%" /><label for="value_1"> 0% </label></div>
<div class="radio"><input autocomplete="off" type="radio" name="radioPosition" onclick="clickPosition(this)" id="value_2" value="10%" /><label for="value_2"> 10% </label></div>
<div class="radio"><input autocomplete="off" type="radio" name="radioPosition" onclick="clickPosition(this)" id="value_3" value="25%" /><label for="value_3"> 25% </label></div>
<div class="radio"><input autocomplete="off" type="radio" name="radioPosition" onclick="clickPosition(this)" id="value_4" value="50%" /><label for="value_4"> 50% </label></div>
<div class="radio"><input autocomplete="off" type="radio" name="radioPosition" onclick="clickPosition(this)" id="value_5" value="94%" /><label for="value_5"> 94% </label></div>
<div class="radio"><input autocomplete="off" type="radio" name="radioPosition" onclick="clickPosition(this)" id="value_6" value="-10%" /><label for="value_6">-10% </label></div>
<div class="radio"><input autocomplete="off" type="radio" name="radioPosition" onclick="clickPosition(this)" id="value_7" value="-25%" /><label for="value_7">-25% </label></div>
<div class="radio"><input autocomplete="off" type="radio" name="radioPosition" onclick="clickPosition(this)" id="value_8" value="-50%" /><label for="value_8">-50% </label></div>
<div class="radio"><input autocomplete="off" type="radio" name="radioPosition" onclick="clickPosition(this)" id="value_9" value="-75%" /><label for="value_7">-75% </label></div>
</form>
<div id="p-footer"></div>
</div>
<div class="result-container">
<div class="demo-header">Result:</div>
<div id="demo-parent">
<div id="demo-div">
<div id="myBox">Play with different bottom values for this yellow DIV element.</div>
<p><b>Note:</b> To "bottom" positioning elements using % (percent) values, use position:absolute.</p>
</div>
</div>
<div class="demo-header">CSS Code:</div>
<pre id="style-div">div#myBox {<br> background-color:yellow;<br> width:100px;<br> position:absolute;<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 POS DEMO</a>
</div>
<div style="clear:both;"></div>
<script>playItOnLoad()</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment