Skip to content

Instantly share code, notes, and snippets.

@jonraasch
Created September 2, 2010 22:37
Show Gist options
  • Save jonraasch/563093 to your computer and use it in GitHub Desktop.
Save jonraasch/563093 to your computer and use it in GitHub Desktop.
Comment count bars
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title>Comment Count Bars</title>
<style type="text/css">
#most-commented {
width: 400px;
}
#most-commented li {
list-style: none;
}
#most-commented a {
display: block;
}
#most-commented .comment-bar {
display: inline-block;
position: relative;
height: 30px;
width: 0;
margin: 5px 0;
padding-left: 20px;
background-color: #999;
}
#most-commented .comment-count {
display: inline-block;
position: absolute;
right: -20px;
top: -5px;
width: 34px;
height: 34px;
border-width: 3px;
border-style: solid;
border-color: #FFF;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
text-align: center;
line-height: 34px;
background-color: #6CAC1F;
font-size: 13px;
font-weight: bold;
color: #FFF;
}
</style>
</head>
<body>
<ul id="most-commented">
<li>
<a href="#" rel="bookmark" title="">Post Title #1</a>
<span class="comment-bar"><span class="comment-count">258</span></span>
</li>
<li>
<a href="#" rel="bookmark" title="">Post Title #2</a>
<span class="comment-bar"><span class="comment-count">206</span></span>
</li>
<li>
<a href="#" rel="bookmark" title="">Post Title #3</a>
<span class="comment-bar"><span class="comment-count">144</span></span>
</li>
<li>
<a href="#" rel="bookmark" title="">Post Title #4</a>
<span class="comment-bar"><span class="comment-count">53</span></span>
</li>
</ul>
<p>
*Note - this is a static example page. Use the included php snippet for WordPress implementations
</p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
"></script>
<script type="text/javascript">
$(function() {
// define global variables
var maxWidth, maxCount;
$('#most-commented li').each(function(i) {
var $this = $(this);
var thisCount = ~~$this.find('.comment-count').text();
// set up some variables if the first iteration
if ( i == 0 ) {
maxWidth = $this.width() - 40;
maxCount = thisCount;
}
// calculate the width based on the count ratio
var thisWidth = (thisCount / maxCount) * maxWidth;
// apply the width to the bar
$this.find('.comment-bar').animate({
width : thisWidth
}, 200, 'swing');
});
});
</script>
</body>
</html>
<ul id="most-commented">
<?php $most_commented = new WP_Query('orderby=comment_count&posts_per_page=5'); ?>
<?php while ($most_commented->have_posts()) : $most_commented->the_post(); ?>
<li>
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
<span class="comment-bar"><span class="comment-count"><?php comments_number('0','1','%'); ?></span></span>
</li>
<?php endwhile; ?>
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment