<div class="chart-container">
<div class="chart-title">
<h2>MONKEY BUSINESS</h2>
<p>What could we do to make more regular dudes act like monkeys? We asked a million people and here are the results:</p>
<h3><span class="quetionsCounter">1/10 </span><span class="chart-question">More bananas</span></h3>
<h3><span id="prev">PREV</span><span id="next">NEXT</span></h3>
<br />
</p>
</div>
<div class="chart-content">
<div class="chart-y-axis">
<p class="axis-value" style="bottom:300px">100%</p>
<p class="axis-value" style="bottom:240px">80%</p>
<p class="axis-value" style="bottom:180px">60%</p>
<p class="axis-value" style="bottom:120px">40%</p>
<p class="axis-value" style="bottom:60px">20%</p>
<p class="axis-value" style="bottom:0px">0%</p>
</div>
<div class="chart-area">
<div class="chart-bar"></div>
<div class="chart-bar"></div>
<div class="chart-bar"></div>
<div class="chart-bar"></div>
<div class="chart-bar"></div>
</div>
<div class="chart-x-axis"></div>
</div>
</div>
<div id="surveyResults">
<h2>MONKEY BUSINESS</h2>
<p>What could we do to make more regular dudes act like monkeys? We asked a million people and here are the results:</p>
<dl id="questions">
<dt class="question">Give you bananas</dt>
<dd><ul class="results">
<li class="pos">Very important</li>
<li class="percent">4.2%</li>
<li class="pos">Quite important</li>
<li class="percent">38.1%</li>
<li class="pos">Not very important</li>
<li class="percent">16.2%</li>
<li class="pos">Not at all important</li>
<li class="percent">3.2%</li>
<li class="pos">I don't know</li>
<li class="percent">0.3%</li>
</ul>
</dd>
<dt class="question">Pay you hard cash</dt>
<dd><ul class="results">
<li class="pos">Very important</li>
<li class="percent">30.9%</li>
<li class="pos">Quite important</li>
<li class="percent">46.3%</li>
<li class="pos">Not very important</li>
<li class="percent">20.6%</li>
<li class="pos">Not at all important</li>
<li class="percent">2.2%</li>
<li class="pos">I don't know</li>
<li class="percent">0.1%</li>
</ul>
</dd>
<dt class="question">More respect for monkeys</dt>
<dd><ul class="results">
<li class="pos">Very important</li>
<li class="percent">50.8%</li>
<li class="pos">Quite important</li>
<li class="percent">37.6%</li>
<li class="pos">Not very important</li>
<li class="percent">10.2%</li>
<li class="pos">Not at all important</li>
<li class="percent">1.2%</li>
<li class="pos">I don't know</li>
<li class="percent">0.2%</li>
</ul>
</dd>
<dt class="question">Complement you on your body hair</dt>
<dd><ul class="results">
<li class="pos">Very important</li>
<li class="percent">16.3%</li>
<li class="pos">Quite important</li>
<li class="percent">39.8%</li>
<li class="pos">Not very important</li>
<li class="percent">34.2%</li>
<li class="pos">Not at all important</li>
<li class="percent">9.1%</li>
<li class="pos">I don't know</li>
<li class="percent">0.6%</li>
</ul>
</dd>
<dt class="question">Pick lots of insects from your head</dt>
<dd><ul class="results">
<li class="pos">Very important</li>
<li class="percent">44.7%</li>
<li class="pos">Quite important</li>
<li class="percent">39.0%</li>
<li class="pos">Not very important</li>
<li class="percent">11.6%</li>
<li class="pos">Not at all important</li>
<li class="percent">3.0%</li>
<li class="pos">I don't know</li>
<li class="percent">1.7%</li>
</ul>
</dd>
<dt class="question">Ask to see your big pink bum</dt>
<dd><ul class="results">
<li class="neg">A very significant barrier</li>
<li class="percent">77.1%</li>
<li class="neg">A somewhat significant barrier</li>
<li class="percent">16.3%</li>
<li class="neg">Not a significant barrier</li>
<li class="percent">4.7%</li>
<li class="neg">Not a barrier at all</li>
<li class="percent">1.2%</li>
<li class="neg">I don't know</li>
<li class="percent">0.7%</li>
</ul>
</dd>
<dt class="question">Take away your clothes</dt>
<dd><ul class="results">
<li class="neg">A very significant barrier</li>
<li class="percent">7.9%</li>
<li class="neg">A somewhat significant barrier</li>
<li class="percent">35.5%</li>
<li class="neg">Not a significant barrier</li>
<li class="percent">40.2%</li>
<li class="neg">Not a barrier at all</li>
<li class="percent">15.9%</li>
<li class="neg">I don't know</li>
<li class="percent">0.5%</li>
</ul>
</dd>
<dt class="question">Get a bunch of scientists to squirt shampoo into your eyes</dt>
<dd><ul class="results">
<li class="neg">A very significant barrier</li>
<li class="percent">20.7%</li>
<li class="neg">A somewhat significant barrier</li>
<li class="percent">39.2%</li>
<li class="neg">Not a significant barrier</li>
<li class="percent">33.7%</li>
<li class="neg">Not a barrier at all</li>
<li class="percent">6.0%</li>
<li class="neg">I don't know</li>
<li class="percent">0.4%</li>
</ul>
</dd>
<dt class="question">Lock you in a room with Michael Jackson</dt>
<dd><ul class="results">
<li class="neg">A very significant barrier</li>
<li class="percent">21.1%</li>
<li class="neg">A somewhat significant barrier</li>
<li class="percent">39.7%</li>
<li class="neg">Not a significant barrier</li>
<li class="percent">29.6%</li>
<li class="neg">Not a barrier at all</li>
<li class="percent">8.1%</li>
<li class="neg">I don't know</li>
<li class="percent">1.5%</li>
</ul>
</dd>
<dt class="question">How about Tarzan?</dt>
<dd><ul class="results">
<li class="neg">A very significant barrier</li>
<li class="percent">8.2%</li>
<li class="neg">A somewhat significant barrier</li>
<li class="percent">29.6%</li>
<li class="neg">Not a significant barrier</li>
<li class="percent">40.3%</li>
<li class="neg">Not a barrier at all</li>
<li class="percent">21.6%</li>
<li class="neg">I don't know</li>
<li class="percent">0.2%</li>
</ul>
</dd>
</dl>
</div>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
}
.chart-container {
width: 610px;
border: 1px none #888;
background-color: #EFEFE1;
}
.chart-container ul, .chart-container li {
padding: 0; margin: 0;
list-style: none;
}
.chart-container li {
padding-left: 20px;
padding-top: 4px;
}
.chart-title { padding: 5px 5px 10px 15px; margin: 0px; }
.chart-title h2 {
margin: 0px;
color: #000;
font-family: Arial, Helvetica, sans-serif;
}
.chart-title p { margin: 0px; color: #222; }
.chart-question {
text-align: left;
}
.chart-content { height: 380px; position: relative; overflow: hidden; margin: 5px 0px 0px 0px; }
.chart-y-axis { width: 50px; height: 315px; position: absolute; top: 0px; left: 0px; }
.chart-y-axis p { margin: 0px 0px 0px 10px; padding: 0px 0px 0px 5px; width: 35px; position: absolute; border-bottom: 1px solid #ccc; }
.chart-x-axis { height: 50px; position: absolute; top: 310px; left: 50px; }
.chart-x-axis p {
position: absolute;
top: 0px;
width: 70px;
color: #000;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
.chart-area {
width: 540px;
height: 315px;
position: absolute;
left: 50px;
background-color: #FFF;
background-image: none;
background-repeat: no-repeat;
background-position: 0px 0px;
}
.chart-area .chart-bar {
position: absolute;
bottom: 0px;
width: 75px;
height: 0px;
background-repeat: no-repeat;
background-position: 50% bottom;
background-color:#1e3d76;
}
.chart-area .chart-bar p {
margin: 5px 0px 0px 0px;
text-align: center;
color: #fff;
display: none;
}
.chart-area .chart-bar p .over {
margin: -20px 0px 0px 0px;
color: #000;
display: none;
}
p.axis-value {
}
#next, #prev {
cursor: pointer;
border: 2px solid #AAA;
background: white;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 6px;
margin: 0 10px 0 0;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
.chart-area .chart-bar span {
display: none;
}
.percent{
list-style: none;
}
.chart-container {
display: none;
}
// Fancy annonomous function to check for jquery
;(function() {
var init = function($)
{
// Set up all the variables I'll need later
var barSpacing = 30,
barWidth,
highestYlabel,
firstLabelHeight,
chartHeight,
chartHeightArea,
chartScale,
maxValue,
valueMultiplier,
questionCounter = 0,
//Grab some info from the html and CSS to use to put the chart together
chartHeight = $('.chart-area').height(),
barWidth = $('.chart-area .chart-bar').width(),
highestYlabel = parseInt($('.chart-y-axis p').first().html()),
firstLableHeight = $('p.axis-value').first().height(),
chartHeightArea = chartHeight - firstLableHeight,
chartScale = chartHeightArea / highestYlabel,
// a bunch of arrays to hold the info pinched from the html list
driverQuestions = [],
barAnswers = [answer1 = [],
answer2 = [],
answer3 = [],
answer4 = [],
answer5 = [],
answer6 = [],
answer7 = [],
answer8 = [],
answer9 = [],
answer10 = []
];
$('.question').each(function(index){
driverQuestions.push($(this).html());
});
// Ugly way to loop though the html list and pump the info into arrays
for ( var i = 0; i < $('.percent').length ; i++){
if (i >= 0 && i <= 4){
answer1.push(parseFloat($('.percent').slice(i).html()));
}
else if (i >= 5 && i <= 9){
answer2.push(parseFloat($('.percent').slice(i).html()));
}
else if (i >= 10 && i <= 14){
answer3.push(parseFloat($('.percent').slice(i).html()));
}
else if (i >= 15 && i <= 19){
answer4.push(parseFloat($('.percent').slice(i).html()));
}
else if (i >= 20 && i <= 24){
answer5.push(parseFloat($('.percent').slice(i).html()));
}
else if (i >= 25 && i <= 29){
answer6.push(parseFloat($('.percent').slice(i).html()));
}
else if (i >= 30 && i <= 34){
answer7.push(parseFloat($('.percent').slice(i).html()));
}
else if (i >= 35 && i <= 39){
answer8.push(parseFloat($('.percent').slice(i).html()));
}
else if (i >= 40 && i <= 44){
answer9.push(parseFloat($('.percent').slice(i).html()));
}
else if (i >= 45 && i <= 49){
answer10.push(parseFloat($('.percent').slice(i).html()));
}
}
// First position all the elements of the chart and then call animateChart() to bring it to life
function positionBars(){
$('.chart-area .chart-bar').each(function(index){
var barPosition = (barWidth * index) + (index * barSpacing) + barSpacing;
$(this).css('left',barPosition + 'px');
$(this).html('<p>' + barAnswers[questionCounter][index] + '%</p>');
if ( questionCounter >= 0 && questionCounter <= 4) {
$('.chart-x-axis').append('<p style="left:'+ barPosition +'px;">' + $('.pos').slice(index).html() + '</p>');
} else {
$('.chart-x-axis').append('<p style="left:'+ barPosition +'px;">' + $('.neg').slice(index).html() + '</p>');
}
if (barAnswers[questionCounter][index] < 10 ){
$(this).find('p').css({'margin-top':'-20px','color':'#000'});
} else {
$(this).find('p').css({'margin-top':'5px','color':'#fff'});
}
});
animateChart();
};
function animateChart() {
$('.chart-area .chart-bar').each(function(index){
var revisedValue = barAnswers[questionCounter][index] * chartScale;
$(this).animate({height:revisedValue},1000, function(){
$(this).children('p').delay(500).fadeIn(250);
});
});
}
//Cause the bars to drop away in between states
function resetBars() {
$('.chart-question').html(driverQuestions[questionCounter]);
$('.chart-area .chart-bar').each(function(){
$(this).animate({height:0},1000, function(){
$(this).children('p').fadeOut(250);
});
});
$('.chart-x-axis').html('');
$('.quetionsCounter').html((questionCounter + 1) + '/10 ');
}
//Add click events to next and prev buttons
$('#next').bind('click', function() {
if(!$('.chart-area .chart-bar').is(':animated')){
if (questionCounter === 9){
questionCounter = 0;
} else {
questionCounter ++;
}
resetBars();
positionBars();
}
});
$('#prev').bind('click', function() {
if(!$('.chart-area .chart-bar').is(':animated')){
if (questionCounter === 0){
questionCounter = 9
} else {
questionCounter --;
}
resetBars();
positionBars();
}
});
$('#next, #prev').hover(
function () {
$(this).css({'background':'#AAA','border':'2px solid #878787'});
},
function () {
$(this).css({'background':'white','border':'2px solid #AAA'});
}
);
positionBars();
// Hide the list and show the chart
$('#surveyResults').hide();
$('.chart-container').fadeIn(300);
};
setTimeout(function()
{
if (typeof jQuery !== 'undefined')
{
init(jQuery);
} else
{
setTimeout(arguments.callee, 60);
}
}, 60);
})();
This Pen doesn't use any external CSS resources.