jQ/jS
Org Chart
Zebra Calendar
Flipper JQ
Animated Divs,etc
Uploader Application
Detects Screen width
Javascript Print Button
Mind Map ➽
Video Body BG ➽
Timed Refresh Page
Accordian 2 ➽
Slide Gallery ➽
Table Sorter ➽
Auto Complete
AJax Beginings ➽
Read More ➽
Display Random Text
Marquee
Count Down
Learn JQuery ➽
Links ➽
Snippets ➽
Expose
Slider
Drop and Drag
Rotate 360
Sticky Nav
Persistant Div
Up Loader App (zip)
Fix element/selector on scroll
Wizards
CSS
Media Screen Wizard ➽
CSS Circle Button
CSS Properties Explained
CSS Vocabulary
Bootstrap References ➽
Icon in LI
Floating Button Bar
CSS Accordian ➽
Custom Fluid Wizard
Multple Columns css
100% Height
Shadows/Radious
Table Styling
Listamatic
100% Background Img
W3 Css Validator
W3 Markup Validator
CSS Reset
Less Wizards ➽
CSS Table Styling
Responsive Menu ➽
Animation
Responsive
Media Screen Wizard ➽
Responsive Youtube
Responsive Images
DW Resposnive CSS ➽
QUICK Responsive Email Wizard
Responsive for DW
Responsive for PHP
Moose Loose Delux Theme ➽
Scroll Thing Theme ➽
responsive table
Misc
Contract Creator
Moose View ➽
HTML5 Fixes
Gradient Image
404
WebED
Forms
Database
SPA Complete
P.I.G.
Vids
Moose View
Create this as a PHP file. name it what you wish. Place it in a directory to get a complete listing of the files in that directory.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Directory Contents</title>
<style>
* {
padding:0;
margin:0;
}
body {
color: #333;
font: 14px Sans-Serif;
padding: 50px;
background: #eee;
}
h1 {
text-align: center;
padding: 20px 0 12px 0;
margin: 0;
}
h2 {
font-size: 16px;
text-align: center;
padding: 0 0 12px 0;
}
#container {
box-shadow: 0 5px 10px -5px rgba(0,0,0,0.5);
position: relative;
background: white;
}
table {
background-color: #F3F3F3;
border-collapse: collapse;
width: 100%;
margin: 15px 0;
}
th {
background-color: #336699;
color: #FFF;
cursor: pointer;
padding: 5px 10px;
}
th small {
font-size: 9px;
}
td, th {
text-align: left;
}
a {
text-decoration: none;
}
td a {
color: #663300;
display: block;
padding: 5px 10px;
}
th a {
padding-left: 0
}
td:first-of-type a {
background: url(http://mooseloose.com/icons/folder.gif) no-repeat 10px 50%;
padding-left: 35px;
}
th:first-of-type {
padding-left: 35px;
}
td:not(:first-of-type) a {
background-image: none !important;
}
tr:nth-of-type(odd) {
background-color: #E6E6E6;
}
tr:hover td {
background-color:#CACACA;
}
tr:hover td a {
color: #000;
}
table tr td:first-of-type a[href$=".jpg"],
table tr td:first-of-type a[href$=".png"],
table tr td:first-of-type a[href$=".gif"],
table tr td:first-of-type a[href$=".svg"],
table tr td:first-of-type a[href$=".jpeg"]
{background-image: url(http://mooseloose.com/icons/image.gif);}
table tr td:first-of-type a[href$=".zip"],
table tr td:first-of-type a[href$=".bak"]
{background-image: url(http://mooseloose.com/icons/page_lock.gif);}
table tr td:first-of-type a[href$=".css"]
{background-image: url(http://mooseloose.com/icons/list_images.gif);}
table tr td:first-of-type a[href$=".txt"],
table tr td:first-of-type a[href$=".doc"],
table tr td:first-of-type a[href$=".docx"],
table tr td:first-of-type a[href$=".ppt"],
table tr td:first-of-type a[href$=".pptx"],
table tr td:first-of-type a[href$=".pps"],
table tr td:first-of-type a[href$=".ppsx"],
table tr td:first-of-type a[href$=".xls"],
table tr td:first-of-type a[href$=".xlsx"]
{background-image: url(http://mooseloose.com/icons/page_edit.gif);}
table tr td:first-of-type a[href$=".pdf"]
{background-image: url(http://mooseloose.com/icons/file_acrobat.gif);}
table tr td:first-of-type a[href$=".ico"]
{background-image: url(http://mooseloose.com/icons/icon_component.gif);}
table tr td:first-of-type a[href$=".psd"],
table tr td:first-of-type a[href$=".ai"]
{background-image: url(http://mooseloose.com/icons/flag_red.gif);}
table tr td:first-of-type a[href$=".swf"],
table tr td:first-of-type a[href$=".avi"],
table tr td:first-of-type a[href$=".wmv"],
table tr td:first-of-type a[href$=".mp4"],
table tr td:first-of-type a[href$=".mov"],
table tr td:first-of-type a[href$=".m4a"]
{background-image: url(http://mooseloose.com/icons/page_video.gif);}
table tr td:first-of-type a[href$=".mp3"],
table tr td:first-of-type a[href$=".ogg"],
table tr td:first-of-type a[href$=".aac"],
table tr td:first-of-type a[href$=".wma"]
{background-image: url(http://mooseloose.com/icons/page_sound.gif);}
table tr td:first-of-type a[href$=".html"],
table tr td:first-of-type a[href$=".htm"],
table tr td:first-of-type a[href$=".xml"]
{background-image: url(http://mooseloose.com/icons/page_code.gif);}
table tr td:first-of-type a[href$=".php"]
{background-image: url(http://mooseloose.com/icons/page_php.gif);}
table tr td:first-of-type a[href$=".js"]
{background-image: url(http://mooseloose.com/icons/page_dynamic.gif);}
table tr.dir td:first-of-type a
{background-image: url(http://mooseloose.com/icons/folder.gif);}
</style>
<script src="http://mooseloose.com/moosedirectory.js"></script>
</head>
<body>
<div id="container">
<h1>Moose Loose Directory/File View </h1>
<table class="sortable">
<thead>
<tr>
<th>Filename</th>
<th>Type</th>
<th>Size <small>(bytes)</small></th>
<th>Date Modified</th>
</tr>
</thead>
<tbody>
<?php
$myDirectory=opendir(".");
while($entryName=readdir($myDirectory)) {
$dirArray[]=$entryName;
}
function findexts ($filename) {
$filename=strtolower($filename);
$exts=split("[/.]", $filename);
$n=count($exts)-1;
$exts=$exts[$n];
return $exts;
}
closedir($myDirectory);
$indexCount=count($dirArray);
sort($dirArray);
for($index=0; $index < $indexCount; $index++) {
if($_SERVER['QUERY_STRING']=="hidden")
{$hide="";
$ahref="./";
$atext="Hide";}
else
{$hide=".";
$ahref="./?hidden";
$atext="Show";}
if(substr("$dirArray[$index]", 0, 1) != $hide) {
$name=$dirArray[$index];
$namehref=$dirArray[$index];
$extn=findexts($dirArray[$index]);
$size=number_format(filesize($dirArray[$index]));
$modtime=date("M j Y g:i A", filemtime($dirArray[$index]));
$timekey=date("YmdHis", filemtime($dirArray[$index]));
switch ($extn){
case "png": $extn="PNG Image"; break;
case "jpg": $extn="JPEG Image"; break;
case "svg": $extn="SVG Image"; break;
case "gif": $extn="GIF Image"; break;
case "ico": $extn="Windows Icon"; break;
case "psd": $extn="Photoshop"; break;
case "ai": $extn="Illustrator"; break;
case "txt": $extn="Text File"; break;
case "log": $extn="Log File"; break;
case "htm": $extn="HTML File"; break;
case "php": $extn="PHP Script"; break;
case "js": $extn="Javascript"; break;
case "css": $extn="Stylesheet"; break;
case "pdf": $extn="PDF Document"; break;
case "zip": $extn="ZIP Archive"; break;
case "bak": $extn="Backup File"; break;
default: $extn=strtoupper($extn)." File"; break;
}
if(is_dir($dirArray[$index])) {
$extn="<Directory>";
$size="<Directory>";
$class="dir";
} else {
$class="file";
}
if($name=="."){$name=". (Current Directory)"; $extn="<System Dir>";}
if($name==".."){$name=".. (Parent Directory)"; $extn="<System Dir>";}
print("
<tr class='$class'>
<td><a href='./$namehref'>$name</a></td>
<td><a href='./$namehref'>$extn</a></td>
<td><a href='./$namehref'>$size</a></td>
<td sorttable_customkey='$timekey'><a href='./$namehref'>$modtime</a></td>
</tr>");
}
}
?>
</tbody>
</table>
</div>
</body>
</html>