Scaling Chart
HTML
<div class="scaleable-wrapper" id="scaleable-wrapper">
<div class="very-specific-design" id="very-specific-design">
<div class="chart-container">
<div class="lrg-dashed-box">
<div class="lrg-subtext">Build</div>
</div>
<div class="med-dashed-box">
<div class="med-subtext">Hybrid</div>
</div>
<div class="sml-dashed-box">
<div class="sml-subtext">Buy</div>
</div>
<div class="arrow-angled"></div>
<div class="chart-up"></div>
<div class="arrow-up"></div>
<div class="arrow-right"></div>
<div class="mainbox">
<div class="y-axis-subtext">Revenue Generation from Payments</div>
<div class="x-axis-subtext">Risk &<br>Responsibility</div>
<div class="diag-subtext">Customize &<br>Ability to Control the<br>Customer Experience</div>
</div>
</div>
</div>
</div>
CSS
body {
background: #ccc;
padding: 20px;
}
/* Scaling Container's */
.very-specific-design {
width: 620px;
height: 520px;
padding: 50px 30px;
text-align: center;
background: white;
position: relative;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transform-origin: center center;
transform-origin: center center;
}
.scaleable-wrapper {
padding: 20px;
resize: both;
position: relative;
background: #666;
height: 700px;
}
.ui-resizable-se {
width: 10px;
height: 10px;
background: orange;
position: absolute;
bottom: 0;
right: 0;
}
/* Div Container's */
.chart-container {
width:500px;
height:500px;
position: relative;
background:white;
z-index: -3;
}
/* Chart Elements */
.mainbox {
margin-top: 20px;
margin-left:7px;
width:471px;
height:471px;
border-left: 2px solid #0a2330;
border-bottom: 2px solid #0a2330;
z-index: -1;
position: absolute;
}
.arrow-up {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 20px solid #0a2330;
position: absolute;
}
.arrow-right {
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 20px solid #0a2330;
position: absolute;
bottom: 0;
right: 0;
}
.arrow-angled {
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 20px solid #f08529;
position: absolute;
bottom: 320px;
left: 320px;
margin-left:7px;
margin-bottom:10px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.chart-up {
width: 460px;
position: absolute;
bottom: 0;
left: 0;
margin-left:7px;
margin-bottom:7px;
border-top: 2px dashed #f08529;
transform: rotate(-45deg);
transform-origin: top left;
}
.lrg-dashed-box {
position: absolute;
border: 2px dashed grey;
width: 300px;
height: 300px;
bottom: 0;
left: 0;
margin-left:7px;
margin-bottom:7px;
z-index: -2;
}
.med-dashed-box {
position: absolute;
border: 2px dashed grey;
width: 220px;
height: 220px;
bottom: 0;
left: 0;
margin-left:7px;
margin-bottom:7px;
z-index: -2;
}
.sml-dashed-box {
position: absolute;
border: 2px dashed grey;
width: 30px;
height: 30px;
bottom: 0;
left: 0;
margin-left:7px;
margin-bottom:7px;
z-index: -2;
}
/* Text Style */
.y-axis-subtext {
color: #0a2330;
position: absolute;
top: -52px;
padding: 6px 0px;
}
.x-axis-subtext {
color: #0a2330;
position: absolute;
right: -146px;
bottom: -25px;
padding: 6px 12px;
}
.diag-subtext {
text-align: right;
font-style: italic;
color: #0a2330;
position: absolute;
top: 60px;
right: 20px;
padding: 6px 12px;
}
.lrg-subtext {
border-radius: 6px;
color: white;
position: absolute;
right: -31px;
bottom: -41px;
padding: 6px 12px;
background-color: #0a2330;
}
.med-subtext {
border-radius: 6px;
color: white;
position:absolute;
right:-36px;
bottom:-41px;
padding: 6px 12px;
background-color: #0a2330;
}
.sml-subtext {
border-radius: 6px;
color: white;
position:absolute;
right:-27px;
bottom:-41px;
padding: 6px 12px;
background-color: #0a2330;
}
JAVASCRIPT
var $el = $("#very-specific-design");
var elHeight = $el.outerHeight();
var elWidth = $el.outerWidth();
var $wrapper = $("#scaleable-wrapper");
$wrapper.resizable({
resize: doResize
});
function doResize(event, ui) {
var scale, origin;
scale = Math.min(
ui.size.width / elWidth,
ui.size.height / elHeight
);
$el.css({
transform: "translate(-50%, -50%) " + "scale(" + scale + ")"
});
}
var starterData = {
size: {
width: $wrapper.width(),
height: $wrapper.height()
}
}
doResize(null, starterData);
