I've been working on pre-made web templates for almost a year now and I started off by making one of my own from scratch in PSD.
The Website can be located here:
http://gamelabs.webege.com/
My first time chopping a PSD to HTML/CSS as well. Nonetheless I got the thing to work on my laptop and I got it going until I viewed on multiple other browsers (Mac/iPad/Android) etc.
The whole thing got messed up and I have been searching for almost 3 days now still without a solution.
Have tried wrapping the website in margin: 0;, using other techniques like min/max-width, using positioning and still its aligned out, showing a bottom scroll on many browser screens but my own computer. Not going with overflow here because I can hide the scroll but the website is cut.
This is my first time going ahead with a website from scratch and I'm stuck at the ground level still.
I would also like to mention that I'm not planning to build a Responsive WD with grid.less or bootstrap, I just want the website to equally align on any browser window opened and be fluid in width.
An excerpt from my choppy CSS is as:
body {
margin: 0;
padding: 0;
background-color:#000;
}
#wrapper {
margin: 0 auto;
position:relative;
width: 100%;
}
#bottombar
{
left: 0px;
top: 750px;
position: absolute;
width: 100%;
height: 200px;
z-index:1;
background:url(images/foot.png) repeat-x;
}
#bottombarglow
{
left: 260px;
top: 733px;
position: absolute;
width: 800px;
height: 51px;
z-index:2;
background:url(images/bottombarglow.png);
}
#topbar
{
left: 0px;
top: 0px;
position: absolute;
width: 100%;
height: 82px;
z-index:3;
background:url(images/tb.png)repeat-x;
}
#blueline
{
left: 80px;
top: 648px;
position: absolute;
width: 1200px;
height: 2px;
z-index:4;
background:url(images/blueline.png);
}
#bullets
{
left: 100px;
top: 660px;
position: absolute;
width: 860px;
height: 87px;
z-index:5;
background:url(images/gallery_left.png);
}
#gallerybutton
{
left: 980px;
top: 670px;
position: absolute;
width: 257px;
height: 67px;
z-index:6;
background:url(images/gallery.png);
}
#menu
{
left: 840px;
top: 14px;
position: absolute;
width: 450px;
height: 54px;
z-index:7;
background:url(images/menu.png);
}
#footer
{
left: 156px;
top: 810px;
position: absolute;
z-index:8;
width: 400px;
height: 98px;
background:url(images/footer.png);
}
#logo
{
position: absolute;
width: 237px;
height: 156px;
z-index:9;
background:url(images/logo.png);
}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"/>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Title and CSS -->
<title>Game Art Labs | Play for Fun</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="bootstrap.min.css">
<!-- Fav and touch icons -->
<link rel="icon" href="http://appbuzzsolutions.com/gal/favicon.png" type="image/png">
</head>
<body>
<div id="wrapper">
<div id="logo"></div>
<div id="topbar"></div>
<div id="menu"></div>
<div id="bullets"></div>
<div id="gallerybutton"></div>
<div class="clearfix"></div>
<div id="blueline"></div>
<div id="bottombarglow"></div>
<div id="footer"></div>
<div id="bottombar"></div>
<!-- BG SLIDER -->
<!-- set the active class on whichever image you want to show up as the default
(otherwise this will be the last image) -->
<div id="slideshow">
<img src="images/bg1.png" alt="Slideshow Image 1"/>
<img src="images/bg2.png" alt="Slideshow Image 2" />
<img src="images/bg3.png" alt="Slideshow Image 3" />
<img src="images/bg4.png" alt="Slideshow Image 4" />
<img src="images/bg5.png" alt="Slideshow Image 5" />
<img src="images/bg6.png" alt="Slideshow Image 6" class="active" />
</div>
<!-- Java Starts -->
<script src="bootstrap.min.js"></script>
<script src="jquerry.js" type="text/javascript"></script>
<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
// uncomment the 3 lines below to pull the images in random order
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 4000 );
});
</script>
<!-- Java Ends -->
</div>
</body>
</html>
This is starting to eat my nerves a bit I would confess. The mistake here must be very basic but my knowledge is too. Hope someone can help me around with us. Will reply to any query.
Advance Thanks!
PS: I was inspired from Kabam.com while designing this.
If your trying to actually define the width of the whole webpage window, you need to do something like this:
body {
width: 1600px; //You can set it to any width
padding: 0px;
background-color:#000;
}
Something simpler might be to add px after your measurements, otherwise, it won't know the unit of measurement, so it is void. Think of it like this. The world is about 250,000 long. Centimeters, or light years?
If your trying to change the margin of the page, you should do this:
body {
width: 1000px; //You can set it to any width
margin: auto; //Auto will automatically center the whole page
padding: 0px; //Don't forget px!
background-color:#000;
}
Related
So my problem is that I have set my view to be width & height 100%; which works well but once some of the content within the view causes a scrollbar to appear it scrolls into whitespace. As if the view's overflow is hidden but the content is still making the page scroll.
I was unable to make a fiddle since I required multiple html files to load and render views so Ill post some code and images about the issue and hopefully someone can catch the problem. I suspect it is most likely a CSS issue with my positioning system but I have been unable to resolve it.
::HTML::
!!!this is the Index page
<!DOCTYPE html>
<html ng-app="appMain">
<head>
<title>MY APP</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" >
<!-- CSS imports -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!-- JS imports -->
<!-- Angular JS Primary Scripts -->
<script src="scripts/angular.js"></script>
<script src="scripts/angular-ui-router.js"></script>
<!-- Angular JS subScripts for controllers etc. -->
<script src="main.js" ></script>
</head>
<body>
<div class="makeBackground" ui-view></div>
</body>
</html>
!!!!this is the sign-in.html page:
<div class="loginBackground makeBackground"></div>
<div class="transparentContainer">
</div>
::JS - Module::
(function() {
var appMain = angular.module('appMain', ['ui.router']);
swiftMain.config(function($stateProvider, $urlRouterProvider) {
// if url not defined redirect to login
$urlRouterProvider.when('', "/sign-in");
// if nonexistant url defined redirect to sign-in
$urlRouterProvider.otherwise("/sign-in");
// Now set up the states
$stateProvider
.state('sign-in', {
url: "/sign-in",
templateUrl: "templates/views/sign-in.html"
});
});
}());
::CSS::
.makeBackground {
position: relative; top: 0;
width: 100%; height: 100%;
}
.geminiBlue {
background-color: #074d77;
}
/* fancy 'e' bg on login background and courselist */
.loginBackground {
background-image: url(../images/login_back.png), url(../images/geminiBlue.png);
background-position: center top, left top;
background-repeat: no-repeat, repeat;
}
.transparentContainer {
border-radius: 20px;
background-color: rgba( 255,255,255,0.4 );
width: 500px;
height: 600px;
position:absolute;
z-index:15;
top:50%;
left:50%;
margin:-300px 0 0 -250px;
}
the CSS above shows that the transparentContainer class has a fixed width and height that will create a scroll at lower resolutions; but the view allows the scroll and hides the content as can be seen below here:
How to get the view to expand with the content within it?
position: absolute; is your friend.
.makeBackground {
position: absolute;
top: 0;
width: 100%; height: 100%;
}
.geminiBlue {
background-color: #074d77;
}
/* fancy 'e' bg on login background and courselist */
.loginBackground {
background-image: url(http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png);
background-color:#00D;
background-position: center top, left top;
background-repeat: no-repeat, repeat;
}
.transparentContainer {
border-radius: 20px;
background-color: rgba( 255,255,255,0.4 );
width: 70%;
height: 70%;
position:absolute;
z-index:15;
margin: 15%; /*-300px 0 0 -250px;*/
}
<div class="makeBackgrounnd" >
<div class="loginBackground makeBackground">
<div class="transparentContainer"> </div>
</div>
</div>
Resolved:
The Issue was the css. by setting the top level containers overflow property to hidden and using margins instead of position: relative; with pixel adjusts my content now fits within the page.
I am trying to put together a web page that will contain some charts, as well as some RangeSlider widgets to control the data ranges and granularity for the charts. I have created a few elements to hold various navigation items, and am at the point where I want to place my RangeSliders. Everything is working except that when I click on the shaded bar between the the handles, to move both handles left or right, the handles jump to the right-hand end of the slider bar, and stay there.
I am pretty sure it's due to an incompatibility between my div's absolute/relative positioning, and the slider components, but I'm going nuts trying to get it to work. If I just place the slider with none of my div styles, the slider works, but isn't where I want it.
The entire file is listed below. It's only about 80 lines, including my styling info. I attached it to the divs, rather than drawing it from an external .css file, for simplicity. To try it out, you will need to adjust the paths to the dojo components.
Someone with more expetise than I have can probably scope it out in a jiffy, but I can't seem to reconcile the dojo requirements with my own.
Thanks.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Errlog Chart for Single Host</title>
<style type="text/css">
#import "1.7.src/dojo/resources/dojo.css";
#import "1.7.src/dijit/themes/tundra/tundra.css";
#import "1.7.src/dijit/themes/dijit.css";
#import "1.7.src/dijit/tests/css/dijitTests.css";
#import "1.7.src/dojox/form/resources/RangeSlider.css";
</style>
<script type="text/javascript" src="1.7.src/dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojox.form.RangeSlider");
dojo.require("dijit.form.HorizontalRule");
dojo.require("dijit.form.HorizontalRuleLabels");
</script>
</head>
<body class="tundra">
<div id='header' style="width:100%;
background: #FC8;
position: absolute;
height: 30px;
top: 0;">header</div>
<div id='middle' style="width:100%;
background: #8FC;
position: absolute;
top: 30px;
bottom: 30px;">
<div id='left' style="background: #C8F;
position: absolute;
left: 0;
top: 0;
width: 25%;
height: 100%;">
</div>
<div id='right' style="background: #CF8;
position: absolute;
left: 25%;
top: 0;
width: 75%;
height: 100%;">
<div id='charts' style="background: #DF7;
position: absolute;
width: 100%;
top:0;
height:60%;">
CHARTS GO HERE
</div>
<div id='sliders' style="background: #BF9;
position: absolute;
width: 100%;
bottom:0;
height:40%;">
SLIDERS GO HERE
<div
id="hrSlider"
discreteValues="11"
onChange="dojo.byId('minValue').value=dojo.number.format(arguments[0][0]/100,{places:1,pattern:'#%'});dojo.byId('maxValue').value=dojo.number.format(arguments[0][1]/100,{places:1,pattern:'#%'});"
value="20,80"
intermediateChanges="true"
style="width:500px;"
dojoType="dojox.form.HorizontalRangeSlider">
<ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration" style="height:1.2em;font-size:75%;color:gray;" count="11" constraints="{pattern:'#.00%'}"></ol>
<div dojoType="dijit.form.HorizontalRule" container="topDecoration" count=11 style="height:10px;margin-bottom:-5px;"></div>
</div>
Horizontal Slider Min Value:<input readonly id="minValue" size="10" value="20.0%"/><br/>
Horizontal Slider Max Value:<input readonly id="maxValue" size="10" value="80.0%"/><br/>
</div>
</div>
</div>
<div id='footer' style="width:100%;
background: #8CF;
position: absolute;
height: 30px;
bottom: 0;">footer</div>
<script type="text/javascript">
</script>
</body>
</html>
If the difference between min and max is not evenly divisible by the discrete value, odd offsets appear. Since you don't set min max, they default to 0 and 100. That is 101 values, which is not evenly divisible by 11
I loaded Google Maps API v3 and print Google Map in div. But when set width & height to 100% and auto I can't see the Map.
Here is HTML code snippet.
<!-- Maps Container -->
<div id="map_canvas" style="height:100%;width:100px;margin:0 auto;"></div>
Is there a way to fix this issue?
You have to set all parent containers to a 100% width if you want to cover the whole page with it. You have to set an absolute value at width and height for the #content div at the very least.
body, html {
height: 100%;
width: 100%;
}
div#content {
width: 100%; height: 100%;
}
Setting Map Container to position to relative do the trick. Here is HTML.
<body>
<!-- Map container -->
<div id="map_canvas"></div>
</body>
And Simple CSS.
<style>
html, body, #map_canvas {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
position: relative;
}
</style>
Tested on all browsers. Here is the Screenshot.
Very few people realize the power of css positioning. To set the map to occupy 100% height of it's parent container do following:
#map_canvas_container {position: relative;}
#map_canvas {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
If you have any non absolutely positioned elements inside #map_canvas_container they will set the height of it and the map will take the exact available space.
If you can't affect your parents elements (like in a nested components situation) you can use height: 100vh which will make it a full window (=view) height;
This Work for me.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#cont{
position: relative;
width: 300px;
height: 300px;
}
#map_canvas{
overflow: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=APIKEY"></script>
<script type="text/javascript">
function initialize() {
console.log("Initializing...");
var latlng = new google.maps.LatLng(LAT, LNG);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="cont">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</div>
</body>
</html>
You can set height to -webkit-fill-available
<!-- Maps Container -->
<div id="map_canvas" style="height:-webkit-fill-available;width:100px;"></div>
Gmap writes inline style position to relative to the div. Overwrite that with :
google.maps.event.addListener(map, 'tilesloaded', function(){
document.getElementById('maps').style.position = 'static';
document.getElementById('maps').style.background = 'none';
});
Hope it helps.
Better late than never! I made mine a class:
.map
{
position:absolute;
top:64px;
width:1100px;
height:735px;
overflow:hidden;
border:1px solid rgb(211,211,211);
border-radius:3px;
}
and then
<div id="map" class="map"></div>
If that div is the only thing on your page, set:
body, html {
height: 100%;
width: 100%;
}
I struggled a lot to find the answer.
You don't really need to do anything with body size. All you need to remove the inline style from the map code:
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=new+york&aq=&sll=53.546224,-2.106543&sspn=0.02453,0.084543&ie=UTF8&hq=&hnear=New+York,+United+States&t=m&z=10&iwloc=A&output=embed"></iframe><br /><small>View Larger Map</small>
remove all the inline style and add class or ID and then style it the way you like.
This worked for me.
map_canvas {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
I just added inline style .
<div id="map_canvas" style="width:750px;height:484px;"></div>
And it worked for me .
I am a motion media designer trying to incorporate some of my work for a client into a website for her Christmas gift. I am trying to resize a .swf to match the browser size, as the fixed size is really messing with my otherwise-resizing layout.
Every time I set the width/height of the .swf to "100%" or "auto", the movie gets cut off at the top and bottom under the div containers. When I change the size of the container to 100%, I get a long, thin movie. I've copied my code below, and I would really appreciate your help. Feel free to criticize anything else about my code, too--I'm a CSS virgin.
Thanks so much! :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
{
Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
</script>
<title>Eat, Drink, and Be Mary</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<style type="text/css" media="screen">
body {
background:url('images/home.jpg');
background-repeat:no-repeat;
background-size:cover;
position:absolute;
}
html, body {
height:100%;
width:auto;
min-width:700;
}
body { margin:0; padding:0; overflow:hidden; }
.swfcontainer {
margin-top:3%;
width:100%;
height:30%;
margin-bottom:1px;
}
.swfcontainersmall {
margin-left:10%;
height:300px;
margin-right:10%;
}
.flashfile {
width:100%;
height:100%;
text-align:center;
margin:2;
padding:0;
overflow:hidden;
}
.textcontainer {
margin-bottom:3px;
margin-top:0;
margin-left:0;
width:100%;
margin-right:0;
}
.textcontainersmall {
margin-top:1px;
margin-bottom:1px;
margin-left:25%;
margin-right:25%;
}
#flashContent {
width:100%;
height:100%;
}
#wrap { min-height: 100%;}
#main {overflow:auto;
padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative;
margin-top:-100px; /* negative value of footer height */
height:100px;
clear:both;
border-bottom:solid 4px #333;
}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<body>
<div id="wrap">
<div id="main">
<div class="swfcontainer">
<div class="swfcontainersmall">
<div class="flashfile">
<div id="flashContent">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/
pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="300" height="300" align= "middle">
<param name="SRC" value="EatDrinkAndBeMary.swf">
<param name="wmode" value="transparent" />
<param name="SCALE" value="noborder" />
<param name="BGCOLOR" value= />
<embed src="EatDrinkAndBeMary.swf" width="300" height="300" align="middle" scale="noborder" wmode="transparent" bgcolor="transparent"></embed>
</object>
</div>
</div>
</div>
</div>
<div class="textcontainer">
<div class="textcontainersmall">
<img src="Images/tasteful.png" alt="Eat, Drink, and Be Mary is a locally-owned catering favorite specializing in delicious appetizers and comforting American favorites for events big and small. We can provide your party with a full, friendly staff to complete your amazing experience." width="auto" height="auto" class="textcontainer" onload="MM_effectAppearFade(this, 3000, 0, 100, false)" />
</div>
</div>
</div>
<div id="footer">
<img src="Images/MenuBottom.gif" width="100%" height="100px" alt="MenuBottom" />
<div>
</body>
</html>
Thats simply a lot of code. to mutch for a stack overflow question i think.
If you want a reponsive flash object with css your should look here or for a shorter version here
CSS:
.embed-wrapper {
width: 100%;
max-width: YOURMAXWIDTHpx;
}
* html .arve-embed-container {
margin-bottom: 45px;
margin-bot\tom: 0;
}
.arve-embed-container {
position: relative;
padding-bottom: 56.25%; /* 16/9 ratio */
padding-top: 30px; /* IE6 workaround*/
height: 0;
overflow: hidden;
}
.arce-embed-container div,
.arve-embed-container iframe,
.arve-embed-container object,
.arve-embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
take that css and with this html
<div class="embed-wrapper">
<div class="arve-embed-container">
<object YOURSTUFF=HERE>
</object>
</div>
</div>
you sould get everything inside the embed-wrapper work resizeing automatically so 16:9 so u soudl get rid of most of your code and implement something like this
In the flash file
Set
Stage.scaleMode = "noScale";
html file
set object width 100%
Hope this can point you in the right direction. But as yunzen points an online example, where we can actually see the elements your are embedding would be great.
<html>
<head>
<style>
.menu li {
display: inline;
}
.menu {
float: left;
padding: 0;
border: solid;
}
img {
float: left;
width: 200px;
margin: 0 30px;
border: solid;
}
#header {
margin-left: 20%;
margin-right: 20%;
padding: 0 5%;
}
</style>
<title>
</title>
</head>
<body>
<div id="header">
<ul class="menu left">
<li>Elemento 1</li>
<li>Elemento 2</li>
</ul>
<img src="http://www.google.com/logos/2012/steno12-hp.jpg">
<ul class="menu right">
<li>Elemento 3</li>
<li>Elemento 4</li>
</ul>
</div>
</body>
</html>
You should take a look at http://fitvidsjs.com/. Sounds like it is what you need.
The box model ought to be simple enough, but I just don't grok it.
Here's a meaningless form
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Box model test</title>
<link type="text/css" rel="stylesheet" href="test.css">
</head>
<body style="position:relative; top=0px; left=0px">
<form action="for_submitted.php" method="post">
<fieldset style="top:0px; left: 0px; width: 128px; height: 64px;">
<legend> </legend>
<div class="label" style="top:24px; left: 16px; width: 81px; height: 14px;">Box 1</div>
</fieldset>
<fieldset style="top:0px; left: 128px; width: 128px; height: 64px;">
<legend> </legend>
<div class="label" style="top:24px; left: 64px; width: 22px; height: 14px;">Box 2</div>
</fieldset>
<div class="submit_button" style="top:64px; left:64px;"><input type="submit" name="submitButton"
value="Submit"></div>
</form>
</body>
</html>
and its CSS
body
{
background-color: white;
width: 100%;
position: relative;
}
.panel, .label, fieldset
{
position: absolute;
font: 8px Arial;
}
.submit_button
{
position: absolute;
}
and I expect it to show
.---------..---------.
| box 1 | box 2 |
.---------..---------.
but in MSIE8 (which I am compelled to use) and in FireFox, it shows
.--------..--------.
| box 1 || box 2 |
.--------..--------.
why do they overlap?
There are several problems here. First of all, you need a reset CSS to remove the margin and padding added by the browser's User Agent stylesheet. Something like Eric Meyer's will do.
Secondly, after adding in the reset CSS there still will be some overlapping. This is caused by the borders, the widths of which are not part of width. outline is not affected by this, so I'm using that in the demo below to show that the elements are not actually overlapping, but I won't recommend using that in place of border. Instead, you should take into account the width of the border when doing your calculations.
See: http://jsbin.com/ofusa3/edit