Skip to content

Instantly share code, notes, and snippets.

@fuhoi

fuhoi/html-ascii-chart-scrollbarTable-0.1.js

Created November 10, 2011 03:46
Show Gist options
  • Save fuhoi/1354053 to your computer and use it in GitHub Desktop.
Save fuhoi/1354053 to your computer and use it in GitHub Desktop.
Download ZIP
html-ascii-chart
Raw
html-ascii-chart-scrollbarTable-0.1.js
/*
* jQuery scrollbarTable - v0.1 - 5/6/2011
* Derek Bredensteiner
* Licensed under the MIT license http://www.opensource.org/licenses/mit-license.php
*/
(function($){
$.fn.scrollbarTable = function(i){
var o = {};
if(typeof(i)=='number')o.height=i;
else if(typeof(o)=='object') o = i;
else if(typeof(o)=='undefined') o =
{
height: 300
}
return this.each(function(){
var $t = $(this);
/* Make room for the scrollbar */
var w = $t.width();
$t.width(w-
/*
* http://benalman.com/projects/jquery-misc-plugins/scrollbarwidth
* Modifications made, must have a height on the child to fix IE7 with no doctype issues.
*/
function(width) {
var parent,
child;
if ( width === undefined ) {
parent = $('<div style="width:50px;height:50px;overflow:auto"><div style="height:50px;"></div></div>').appendTo('body');
child = parent.children();
width = child.innerWidth() - child.height( 99 ).innerWidth();
parent.remove();
}
return width;
}()
);
/* Calculate the column widths for future use */
var cols = [];
$t.find('tr:first th,tr:first td').each(function(){
cols.push($(this).width());
});
/* Remove the header and put it before the rest of the table as a new table*/
var $firstRow = $t.clone();
$firstRow.find('tr:not(:first)').remove();
$t.find('tr:first').remove();
$t.before($firstRow);
/* Make the header, and the scrolling table, column widths the same as the original */
$firstRow.find('tr:first th,tr:first td').each(function(i){
$(this).attr('width',cols[i]);
});
$t.find('tr:first th,tr:first td').each(function(i){
$(this).attr('width',cols[i]);
});
/* Wrap the rest of the table in a scroller */
var $wrap = $('<div>');
$wrap.css({
width:w,
height:o.height,
overflow: 'auto'
});
$t.wrap($wrap);
})
};
}(jQuery));
Raw
html-ascii-chart.html
<html>
<head>
<title>ASCII Table</title>
<style type="text/css">
table.scrollable { width: 100%; }
</style>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="html-ascii-chart-scrollbarTable-0.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('table.scrollable').scrollbarTable(300); /* Any table with a class of "scrollable" will be turned into a 300 pixel height scrolling table */
});
</script>
</head>
<body>
<h1>Ascii Table</h1>
<table class="scrollable">
<tr>
<th>Dec</th>
<th>Hex</th>
<th>Oct</th>
<th>Char</th>
<th>Description</th>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td>000</td>
<td>&nbsp;</td>
<td>null</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>001</td>
<td>&nbsp;</td>
<td>start of heading</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>002</td>
<td>&nbsp;</td>
<td>start of text</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>003</td>
<td>&nbsp;</td>
<td>end of text</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>004</td>
<td>&nbsp;</td>
<td>end of transmission</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td>005</td>
<td>&nbsp;</td>
<td>enquiry</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
<td>006</td>
<td>&nbsp;</td>
<td>acknowledge</td>
</tr>
<tr>
<td>7</td>
<td>7</td>
<td>007</td>
<td>&nbsp;</td>
<td>bell</td>
</tr>
<tr>
<td>8</td>
<td>8</td>
<td>010</td>
<td>&nbsp;</td>
<td>backspace</td>
</tr>
<tr>
<td>9</td>
<td>9</td>
<td>011</td>
<td>&nbsp;</td>
<td>horizontal tab</td>
</tr>
<tr>
<td>10</td>
<td>A</td>
<td>012</td>
<td>&nbsp;</td>
<td>new line</td>
</tr>
<tr>
<td>11</td>
<td>B</td>
<td>013</td>
<td>&nbsp;</td>
<td>vertical tab</td>
</tr>
<tr>
<td>12</td>
<td>C</td>
<td>014</td>
<td>&nbsp;</td>
<td>new page</td>
</tr>
<tr>
<td>13</td>
<td>D</td>
<td>015</td>
<td>&nbsp;</td>
<td>carriage return</td>
</tr>
<tr>
<td>14</td>
<td>E</td>
<td>016</td>
<td>&nbsp;</td>
<td>shift out</td>
</tr>
<tr>
<td>15</td>
<td>F</td>
<td>017</td>
<td>&nbsp;</td>
<td>shift in</td>
</tr>
<tr>
<td>16</td>
<td>10</td>
<td>020</td>
<td>&nbsp;</td>
<td>data link escape</td>
</tr>
<tr>
<td>17</td>
<td>11</td>
<td>021</td>
<td>&nbsp;</td>
<td>device control 1</td>
</tr>
<tr>
<td>18</td>
<td>12</td>
<td>022</td>
<td>&nbsp;</td>
<td>device control 2</td>
</tr>
<tr>
<td>19</td>
<td>13</td>
<td>023</td>
<td>&nbsp;</td>
<td>device control 3</td>
</tr>
<tr>
<td>20</td>
<td>14</td>
<td>024</td>
<td>&nbsp;</td>
<td>device control 4</td>
</tr>
<tr>
<td>21</td>
<td>15</td>
<td>025</td>
<td>&nbsp;</td>
<td>negative acknowledge</td>
</tr>
<tr>
<td>22</td>
<td>16</td>
<td>026</td>
<td>&nbsp;</td>
<td>synchronous idle</td>
</tr>
<tr>
<td>23</td>
<td>17</td>
<td>027</td>
<td>&nbsp;</td>
<td>end of trans. block</td>
</tr>
<tr>
<td>24</td>
<td>18</td>
<td>030</td>
<td>&nbsp;</td>
<td>cancel</td>
</tr>
<tr>
<td>25</td>
<td>19</td>
<td>031</td>
<td>&nbsp;</td>
<td>end of medium</td>
</tr>
<tr>
<td>26</td>
<td>1A</td>
<td>032</td>
<td>&nbsp;</td>
<td>substitute</td>
</tr>
<tr>
<td>27</td>
<td>1B</td>
<td>033</td>
<td>&nbsp;</td>
<td>escape</td>
</tr>
<tr>
<td>28</td>
<td>1C</td>
<td>034</td>
<td>&nbsp;</td>
<td>file separator</td>
</tr>
<tr>
<td>29</td>
<td>1D</td>
<td>035</td>
<td>&nbsp;</td>
<td>group separator</td>
</tr>
<tr>
<td>30</td>
<td>1E</td>
<td>036</td>
<td>&nbsp;</td>
<td>record separator</td>
</tr>
<tr>
<td>31</td>
<td>1F</td>
<td>037</td>
<td>&nbsp;</td>
<td>unit separator</td>
</tr>
<tr>
<td>32</td>
<td>20</td>
<td>040</td>
<td>&nbsp;</td>
<td>space</td>
</tr>
<tr>
<td>33</td>
<td>21</td>
<td>041</td>
<td>!</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>34</td>
<td>22</td>
<td>042</td>
<td>&quot;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>35</td>
<td>23</td>
<td>043</td>
<td>#</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>36</td>
<td>24</td>
<td>044</td>
<td>$</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>37</td>
<td>25</td>
<td>045</td>
<td>%</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>38</td>
<td>26</td>
<td>046</td>
<td>&amp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>39</td>
<td>27</td>
<td>047</td>
<td>'</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>40</td>
<td>28</td>
<td>050</td>
<td>(</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>41</td>
<td>29</td>
<td>051</td>
<td>)</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>42</td>
<td>2A</td>
<td>052</td>
<td>*</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>43</td>
<td>2B</td>
<td>053</td>
<td>+</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>44</td>
<td>2C</td>
<td>054</td>
<td>,</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>45</td>
<td>2D</td>
<td>055</td>
<td>-</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>46</td>
<td>2E</td>
<td>056</td>
<td>.</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>47</td>
<td>2F</td>
<td>057</td>
<td>/</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>48</td>
<td>30</td>
<td>060</td>
<td>0</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>49</td>
<td>31</td>
<td>061</td>
<td>1</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>50</td>
<td>32</td>
<td>062</td>
<td>2</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>51</td>
<td>33</td>
<td>063</td>
<td>3</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>52</td>
<td>34</td>
<td>064</td>
<td>4</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>53</td>
<td>35</td>
<td>065</td>
<td>5</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>54</td>
<td>36</td>
<td>066</td>
<td>6</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>55</td>
<td>37</td>
<td>067</td>
<td>7</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>56</td>
<td>38</td>
<td>070</td>
<td>8</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>57</td>
<td>39</td>
<td>071</td>
<td>9</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>58</td>
<td>3A</td>
<td>072</td>
<td>:</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>59</td>
<td>3B</td>
<td>073</td>
<td>;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>60</td>
<td>3C</td>
<td>074</td>
<td>&lt;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>61</td>
<td>3D</td>
<td>075</td>
<td>=</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>62</td>
<td>3E</td>
<td>076</td>
<td>&gt;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>63</td>
<td>3F</td>
<td>077</td>
<td>?</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>64</td>
<td>40</td>
<td>100</td>
<td>@</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>65</td>
<td>41</td>
<td>101</td>
<td>A</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>66</td>
<td>42</td>
<td>102</td>
<td>B</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>67</td>
<td>43</td>
<td>103</td>
<td>C</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>68</td>
<td>44</td>
<td>104</td>
<td>D</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>69</td>
<td>45</td>
<td>105</td>
<td>E</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>70</td>
<td>46</td>
<td>106</td>
<td>F</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>71</td>
<td>47</td>
<td>107</td>
<td>G</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>72</td>
<td>48</td>
<td>110</td>
<td>H</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>73</td>
<td>49</td>
<td>111</td>
<td>I</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>74</td>
<td>4A</td>
<td>112</td>
<td>J</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>75</td>
<td>4B</td>
<td>113</td>
<td>K</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>76</td>
<td>4C</td>
<td>114</td>
<td>L</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>77</td>
<td>4D</td>
<td>115</td>
<td>M</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>78</td>
<td>4E</td>
<td>116</td>
<td>N</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>79</td>
<td>4F</td>
<td>117</td>
<td>O</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>80</td>
<td>50</td>
<td>120</td>
<td>P</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>81</td>
<td>51</td>
<td>121</td>
<td>Q</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>82</td>
<td>52</td>
<td>122</td>
<td>R</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>83</td>
<td>53</td>
<td>123</td>
<td>S</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>84</td>
<td>54</td>
<td>124</td>
<td>T</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>85</td>
<td>55</td>
<td>125</td>
<td>U</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>86</td>
<td>56</td>
<td>126</td>
<td>V</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>87</td>
<td>57</td>
<td>127</td>
<td>W</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>88</td>
<td>58</td>
<td>130</td>
<td>X</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>89</td>
<td>59</td>
<td>131</td>
<td>Y</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>90</td>
<td>5A</td>
<td>132</td>
<td>Z</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>91</td>
<td>5B</td>
<td>133</td>
<td>[</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>92</td>
<td>5C</td>
<td>134</td>
<td>\</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>93</td>
<td>5D</td>
<td>135</td>
<td>]</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>94</td>
<td>5E</td>
<td>136</td>
<td>^</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>95</td>
<td>5F</td>
<td>137</td>
<td>_</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>96</td>
<td>60</td>
<td>140</td>
<td>`</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>97</td>
<td>61</td>
<td>141</td>
<td>a</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>98</td>
<td>62</td>
<td>142</td>
<td>b</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>99</td>
<td>63</td>
<td>143</td>
<td>c</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>100</td>
<td>64</td>
<td>144</td>
<td>d</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>101</td>
<td>65</td>
<td>145</td>
<td>e</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>102</td>
<td>66</td>
<td>146</td>
<td>f</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>103</td>
<td>67</td>
<td>147</td>
<td>g</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>104</td>
<td>68</td>
<td>150</td>
<td>h</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>105</td>
<td>69</td>
<td>151</td>
<td>i</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>106</td>
<td>6A</td>
<td>152</td>
<td>j</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>107</td>
<td>6B</td>
<td>153</td>
<td>k</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>108</td>
<td>6C</td>
<td>154</td>
<td>l</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>109</td>
<td>6D</td>
<td>155</td>
<td>m</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>110</td>
<td>6E</td>
<td>156</td>
<td>n</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>111</td>
<td>6F</td>
<td>157</td>
<td>o</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>112</td>
<td>70</td>
<td>160</td>
<td>p</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>113</td>
<td>71</td>
<td>161</td>
<td>q</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>114</td>
<td>72</td>
<td>162</td>
<td>r</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>115</td>
<td>73</td>
<td>163</td>
<td>s</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>116</td>
<td>74</td>
<td>164</td>
<td>t</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>117</td>
<td>75</td>
<td>165</td>
<td>u</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>118</td>
<td>76</td>
<td>166</td>
<td>v</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>119</td>
<td>77</td>
<td>167</td>
<td>w</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>120</td>
<td>78</td>
<td>170</td>
<td>x</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>121</td>
<td>79</td>
<td>171</td>
<td>y</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>122</td>
<td>7A</td>
<td>172</td>
<td>z</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>123</td>
<td>7B</td>
<td>173</td>
<td>{</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>124</td>
<td>7C</td>
<td>174</td>
<td>|</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>125</td>
<td>7D</td>
<td>175</td>
<td>}</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>126</td>
<td>7E</td>
<td>176</td>
<td>~</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>127</td>
<td>7F</td>
<td>177</td>
<td>DEL</td>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment