grodtron/pager.html

## pager.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8">

   <title>menu test</title>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
   $(document).ready(function(){
      // get all the various pager link objects as JQ objects
      var pNums = $("a.pager.number");
      var pEnds = $("a.pager.bookend");
      var ps = $("a.pager");

      // calculate the percent width of the bookends
      // give them their percent share of the width
      // but with a minimum of ten percent
      // so for example, if there's 2 pages, then there's
      // 4 links, so each end gets 25% of the width
      // however if there's 18 pages (20 links), then
      // each end get's 10%
      var endW = 100 / ps.length;
      endW = endW < 10 ? 10 : endW;
      pEnds.css("width",String(endW) + "%");

      // the percentage of the width that is left over gets
      // divided evenly between the remaining links
      pNums.css("width",String((100 - (2*endW))/pNums.length) + "%");

      // the width of the entire thing is calculated based on the number of links
      // obviously if there's only 2 pages the link bar does not need to fill
      // the entire page.
      var pWidth = 10 + (pNums.length * 10);
      pWidth = pWidth > 100 ? 100 : pWidth;
      $("div#paginator").css("width", String(pWidth) + "%");
   });
</script>
<style type="text/css" media="screen">
div#wrap{ width:60%; height:100%; }
div#paginator{
   text-align:center;
   margin:auto;
}
a.pager{
   height:20px;

   float:left;

   font-family:sans-serif;
   font-size:10px;
   text-decoration:none;

   background-color:#DFB;
   color:#AC7;
   border-radius:5px;
   padding-top:5px;
   padding-bottom:5px;
}
a.pager:hover {
   color:#DFB;
   background-color:#AC7;
}

</style>
</head>
<body>
<div id="wrap">
<div id="paginator">
   <a href="#prev" class="pager bookend">prev</a>
   <a href="#6" class="pager number">6</a>
   <a href="#6" class="pager number">6</a>
   <a href="#6" class="pager number">6</a>
   <a href="#next" class="pager bookend">next</a>
</div>
</div>
</body>
</html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""
	"http://www.w3.org/TR/html4/strict.dtd">
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">

	<title>menu test</title>

	<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
	// get all the various pager link objects as JQ objects
	var pNums = $("a.pager.number");
	var pEnds = $("a.pager.bookend");
	var ps = $("a.pager");

	// calculate the percent width of the bookends
	// give them their percent share of the width
	// but with a minimum of ten percent
	// so for example, if there's 2 pages, then there's
	// 4 links, so each end gets 25% of the width
	// however if there's 18 pages (20 links), then
	// each end get's 10%
	var endW = 100 / ps.length;
	endW = endW < 10 ? 10 : endW;
	pEnds.css("width",String(endW) + "%");

	// the percentage of the width that is left over gets
	// divided evenly between the remaining links
	pNums.css("width",String((100 - (2*endW))/pNums.length) + "%");

	// the width of the entire thing is calculated based on the number of links
	// obviously if there's only 2 pages the link bar does not need to fill
	// the entire page.
	var pWidth = 10 + (pNums.length * 10);
	pWidth = pWidth > 100 ? 100 : pWidth;
	$("div#paginator").css("width", String(pWidth) + "%");
	});
	</script>
	<style type="text/css" media="screen">
	div#wrap{ width:60%; height:100%; }
	div#paginator{
	text-align:center;
	margin:auto;
	}
	a.pager{
	height:20px;

	float:left;

	font-family:sans-serif;
	font-size:10px;
	text-decoration:none;

	background-color:#DFB;
	color:#AC7;
	border-radius:5px;
	padding-top:5px;
	padding-bottom:5px;
	}
	a.pager:hover {
	color:#DFB;
	background-color:#AC7;
	}

	</style>
	</head>
	<body>
	<div id="wrap">
	<div id="paginator">
	<a href="#prev" class="pager bookend">prev</a>
	<a href="#6" class="pager number">6</a>
	<a href="#6" class="pager number">6</a>
	<a href="#6" class="pager number">6</a>
	<a href="#next" class="pager bookend">next</a>
	</div>
	</div>
	</body>
	</html>