kennydude/README.markdown

## README.markdown

      
    Raw
  

              README.markdown
            
          
    Simple,
Place the php file under the glyphicons directory (not the halflings) and then add that to a webserver (I just symlink the glyphicons directory under /var/www)
And tada! :D

  
## index.php
<html>
	<head>
		<title>Glyphicons</title>
		<style type="text/css">
			body{font-family: "Lucida Grande", "Lucida Sans", "Ubuntu", sans-serif;}
			.about_to_filter{display: none;}
		</style>
	</head>
	<body>
		<h1>Glyphicons Index</h1>
<input type="search" id="filter" placeholder="Filter" /><span class="about_to_filter">About to filter...</span>
<table>
		<?php
foreach (glob("png/*@2x.png") as $filename) {
	echo '<tr><td><img src="';
	echo $filename;
	echo '" />';
	echo '</td><td class="tag">'. substr($filename, strlen("png/glyphicons_000_"), -7) .'</td><td><a href="'.$filename.'">2X</a></td>';
	$filename = substr($filename, 0, -7) . ".png";
	echo '<td><a href="'.$filename.'">1X</a></td>';
	echo '</tr>';
}
		?>
</table>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
	function real_filter(){
		console.log("filter...");
		$(".about_to_filter").hide();
		if($("#filter").val() == ""){ $("tr").show(); return; }
		$("tr").show().each(function(){
			if($(".tag", this).text().indexOf($("#filter").val()) == -1 && $(".tag", this).text() != $("#filter").val()){
				$(this).hide();
			}
		});
	}

	function filter(){
		if(typeof window.filter_timeout == "number") {
			console.log("Clearing filter timeout");
			clearTimeout(window.filter_timeout);
			delete window.filter_timeout;
		}
		$(".about_to_filter").show();
		window.filter_timeout = setTimeout("real_filter();", 100);
	}

	$(document).ready(function(){
		$("#filter").keyup(filter);
	});
</script>
	</body>
</html>
	<html>
	<head>
	<title>Glyphicons</title>
	<style type="text/css">
	body{font-family: "Lucida Grande", "Lucida Sans", "Ubuntu", sans-serif;}
	.about_to_filter{display: none;}
	</style>
	</head>
	<body>
	<h1>Glyphicons Index</h1>
	<input type="search" id="filter" placeholder="Filter" /><span class="about_to_filter">About to filter...</span>
	<table>
	<?php
	foreach (glob("png/*@2x.png") as $filename) {
	echo '<tr><td><img src="';
	echo $filename;
	echo '" />';
	echo '</td><td class="tag">'. substr($filename, strlen("png/glyphicons_000_"), -7) .'</td><td><a href="'.$filename.'">2X</a></td>';
	$filename = substr($filename, 0, -7) . ".png";
	echo '<td><a href="'.$filename.'">1X</a></td>';
	echo '</tr>';
	}
	?>
	</table>
	<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
	<script type="text/javascript">
	function real_filter(){
	console.log("filter...");
	$(".about_to_filter").hide();
	if($("#filter").val() == ""){ $("tr").show(); return; }
	$("tr").show().each(function(){
	if($(".tag", this).text().indexOf($("#filter").val()) == -1 && $(".tag", this).text() != $("#filter").val()){
	$(this).hide();
	}
	});
	}

	function filter(){
	if(typeof window.filter_timeout == "number") {
	console.log("Clearing filter timeout");
	clearTimeout(window.filter_timeout);
	delete window.filter_timeout;
	}
	$(".about_to_filter").show();
	window.filter_timeout = setTimeout("real_filter();", 100);
	}

	$(document).ready(function(){
	$("#filter").keyup(filter);
	});
	</script>
	</body>
	</html>