WilDoane/shascroll.html

## shascroll.html
<!DOCTYPE html>
<html>
  <head>
    <title></title>
      <script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

      <script type="text/javascript" charset="utf-8">
        function scrollMe (newSha) {
            var newPosition = $("td[data-sha='" + newSha + "']").offset().left;

            $('html,body').animate({
                    scrollLeft: newPosition
                },
                1500
            );

        }
      </script>

      <style type="text/css" media="screen">
        #footer {
            position: fixed;
            bottom: 20px;
            left: 0px;
            width: 100%;
            height: 20px;
            background-color: #aaaaaa;
        }

        #commits {
            cellspacing: 5px;
            cellpadding: 5px;
            width: 400%;
        }

        #commits tr td {
            border: solid 1px;
            width: 500px;
        }

        td:nth-child(odd) {
            background-color:#eee;
        }

      </style>
  </head>
  <body>
    <div id="content">
        <table id="commits">
            <tr>
                <td data-sha="abc">abc</td>
                <td data-sha="def">def</td>
                <td data-sha="ghi">ghi</td>
                <td data-sha="jkl">jkl</td>
                <td data-sha="mno">mno</td>
                <td data-sha="pqr">pqr</td>
                <td data-sha="stu">stu</td>
                <td data-sha="vwx">vwx</td>
                <td data-sha="yz">yz</td>
            </tr>
        </table>
    </div>
    <div id="nav"></div>
    <div id="header"></div>
    <div id="footer">
        <select id="shalist">
            <option value="#">Scroll to SHA...</option>
            <option value="abc">abc</option>
            <option value="def">def</option>
            <option value="ghi">ghi</option>
            <option value="jkl">jkl</option>
            <option value="mno">mno</option>
            <option value="pqr">pqr</option>
            <option value="stu">stu</option>
            <option value="vwx">vwx</option>
            <option value="yz">yz</option>

        </select>
    </div>

    <script type="text/javascript" charset="utf-8">
        $("#shalist").bind('change', function () {
            scrollMe( $(this).val() );
            $(this).val("#"); // clear the selector popup and reset it to the prompt text
        });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

	<script type="text/javascript" charset="utf-8">
	function scrollMe (newSha) {
	var newPosition = $("td[data-sha='" + newSha + "']").offset().left;

	$('html,body').animate({
	scrollLeft: newPosition
	},
	1500
	);

	}
	</script>

	<style type="text/css" media="screen">
	#footer {
	position: fixed;
	bottom: 20px;
	left: 0px;
	width: 100%;
	height: 20px;
	background-color: #aaaaaa;
	}

	#commits {
	cellspacing: 5px;
	cellpadding: 5px;
	width: 400%;
	}

	#commits tr td {
	border: solid 1px;
	width: 500px;
	}

	td:nth-child(odd) {
	background-color:#eee;
	}

	</style>
	</head>
	<body>
	<div id="content">
	<table id="commits">
	<tr>
	<td data-sha="abc">abc</td>
	<td data-sha="def">def</td>
	<td data-sha="ghi">ghi</td>
	<td data-sha="jkl">jkl</td>
	<td data-sha="mno">mno</td>
	<td data-sha="pqr">pqr</td>
	<td data-sha="stu">stu</td>
	<td data-sha="vwx">vwx</td>
	<td data-sha="yz">yz</td>
	</tr>
	</table>
	</div>
	<div id="nav"></div>
	<div id="header"></div>
	<div id="footer">
	<select id="shalist">
	<option value="#">Scroll to SHA...</option>
	<option value="abc">abc</option>
	<option value="def">def</option>
	<option value="ghi">ghi</option>
	<option value="jkl">jkl</option>
	<option value="mno">mno</option>
	<option value="pqr">pqr</option>
	<option value="stu">stu</option>
	<option value="vwx">vwx</option>
	<option value="yz">yz</option>

	</select>
	</div>

	<script type="text/javascript" charset="utf-8">
	$("#shalist").bind('change', function () {
	scrollMe( $(this).val() );
	$(this).val("#"); // clear the selector popup and reset it to the prompt text
	});
	</script>
	</body>
	</html>