<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>demo</title>
<style>
div.imageblock {
width:500px;
height:400px;
background: url(/img/photo1.jpg);
}
</style>
</head>
<body>
<div class="imageblock">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eleifend lacus elit, tempus iaculis velit tincidunt in. Praesent at volutpat magna. Quisque tempus, elit id placerat adipiscing, leo arcu porttitor mauris, et auctor nulla metus sit amet orci. Nullam nulla odio, viverra non nulla sit amet, fermentum gravida nisi. Nam in facilisis nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed lectus blandit, scelerisque risus id, sodales est. Cras sit amet volutpat leo, in commodo nulla. Nunc venenatis euismod pharetra. Nam porttitor eu nulla at condimentum. Duis ut varius risus, eget malesuada quam. Mauris id aliquam quam, sit amet interdum velit. Praesent eget tristique diam. Nullam scelerisque tincidunt mattis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec at pulvinar leo, eu aliquet leo.
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://lokeshdhakar.com/projects/color-thief/js/color-thief.js"></script>
<script src="https://gist.githubusercontent.com/nrabinowitz/1104622/raw/1b25b36f055cb2a62ca12eca6d30ebd49874419b/quantize.js"></script>
<script type="text/javascript">
var image = new Image,
div = $('div.imageblock');
src = $(div).css('background-image').replace('url(','').replace(')','').replace(/\"/g,'');
image.src = src;
var colorThief = new ColorThief();
dominantColor = colorThief.getColor(image);
function isDark( color ) {
var match = color;
return ( match[1] & 255 )
+ ( match[2] & 255 )
+ ( match[3] & 255 )
< 3 * 256 / 2;
}
$('div').each(function() {
$(this).css("color", isDark(dominantColor) ? 'white' : 'black');
});
</script>
</body>
</html>#float-nav.affix {
top: 0;
background: #900;
}
#float-nav.affix-bottom {
position: absolute;
top:auto;
bottom: 1000px;
}$('table tr').click(function(){
var str=$(this).text();
alert(str);
});$('table tr').click(function(){
var str=$(this).find('td').text();
alert(str);
});