Skip to content

Instantly share code, notes, and snippets.

@philhawksworth

philhawksworth/gist:294801

Created February 4, 2010 16:08
Show Gist options
  • Save philhawksworth/294801 to your computer and use it in GitHub Desktop.
Save philhawksworth/294801 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.htm
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>index</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="Phil Hawksworth">
<!-- Date: 2010-02-04 -->
<style type="text/css" media="screen">
#star-chart {
height:300px;
width:300px;
position:relative;
background: #fff url(star-chart-bg.png) no-repeat top left;
}
#star-chart dt {
display:none;
}
#star-chart dd {
height:300px;
width:300px;
border:solid 1px #999;
position:absolute;
top:0;
left:0;
text-indent:-9999px;
overflow:hidden;
}
#star-chart dd.x-axis-greater {
background: transparent url(x-axis-greater.png) no-repeat top left;
}
#star-chart dd.x-axis-lesser {
background: transparent url(x-axis-lesser.png) no-repeat top left;
}
#star-chart dd.x-axis-equal {
background: transparent url(x-axis-equal.png) no-repeat top left;
}
#star-chart dd.y-axis-greater {
background: transparent url(y-axis-greater.png) no-repeat top left;
}
#star-chart dd.y-axis-lesser {
background: transparent url(y-axis-lesser.png) no-repeat top left;
}
#star-chart dd.y-axis-equal {
background: transparent url(y-axis-equal.png) no-repeat top left;
}
#star-chart dd.z-axis-greater {
background: transparent url(z-axis-greater.png) no-repeat top left;
}
#star-chart dd.z-axis-lesser {
background: transparent url(z-axis-lesser.png) no-repeat top left;
}
#star-chart dd.z-axis-equal {
background: transparent url(z-axis-equal.png) no-repeat top left;
}
</style>
</head>
<body>
<dl id='star-chart'>
<dt>A - B</dt><dd class='x-axis-greater'>More A than B</dd>
<dt>C - D</dt><dd class='y-axis-lesser'>More D than C</dd>
<dt>E - F</dt><dd class='z-axis-equal'>About equal measures of E and F</dd>
</dl>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
var results = ['greater', 'lesser', 'equal'];
$(document).ready(function(){
$('#star-chart').click(function(ev){
$('dd').each(function(ev){
var words = $(this).attr('class').split('-');
var c = words[0] + '-' + words[1] + '-' + results[getRandomInt(0, 2)];
$(this).attr('class', c);
});
});
});
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment