| View previous topic :: View next topic |
| Author |
Message |
loloyd
-
Joined: 03 Mar 2006
Posts: 435
Location: Philippines
|
 Posted: Sun May 07, 2006 8:29 pm Post subject: Sharing my Directory Listing Template |
 |
|
My directory listing template is an implementation of such a directory listing with a random background image at the resulting page's center. Background image possibles are located in a directory being shared with the file named image_rotator.php in the directory /backgrounds/. The template also uses an arrow image file located in /images/dir_up.gif. A working example of this directory listing template can be seen at http://loloyd.homeip.net/webttachments/. Note: my background images are faded like watermarks so as to minimize readability interference when they overlap with textual data.
Type: From Template
MIME Type: text/html; charset=UTF-8
Header: | Code: | <HTML>
<HEAD>
<TITLE>LD TechnoLogics website directory listing of <!-- #echo var="URL" encoding="reverse-url" --></TITLE>
<style type="text/css">
body {
background-image: url('/backgrounds/image_rotator.php');
background-repeat: no-repeat;
background-position: center;
}
</style>
</HEAD><BODY><FONT FACE="MS SANS SERIF,Lucida Sans,Lucida Sans Unicode,ARIAL,TAHOMA,HELVETICA" SIZE=-1>
<!-- #config timefmt="%Y/%m/%d %H:%M:%S" --><H3>Directory listing of <!-- #echo var="URL" encoding="reverse-url" --></H3><H5>
<A HREF="../" TITLE="Parent directory"><IMG SRC="/images/dir_up.gif" TITLE="Parent directory" BORDER=0 ALT="Up to parent directory" /></A> <A HREF="../" TITLE="Parent directory">To parent directory or resource</A></H5><FONT FACE="MS SANS SERIF,ARIAL,HELVETICA,TAHOMA" SIZE=-2><FONT COLOR="#991111"><B>Warning:</B></FONT> Some contents may be of offensive and/or vulgar nature.
<BR><FONT COLOR="#991111"><B>Caution:</B></FONT> These resources have been determined to be free from viruses by LD TechnoLogics at the web-server side.
<BR>You are hereby advised to exercise extreme prejudice when downloading internet-borne resources.
<BR>Loloy D and LD TechnoLogics HOME will not be held responsible for any consequence and circumstance that may arise from your viewing, downloading and using the contents herein.</FONT>
<HR>
<TABLE BORDER=0 CELLSPACING=0>
<TR>
<TH ALIGN=LEFT><FONT FACE="MS SANS SERIF,Lucida Sans,ARIAL,TAHOMA,HELVETICA" SIZE=-2> </FONT></TH>
<TH ALIGN=RIGHT><FONT FACE="MS SANS SERIF,Lucida Sans,ARIAL,TAHOMA,HELVETICA" SIZE=-2> Size </FONT></TH>
<TH ALIGN=LEFT><FONT FACE="MS SANS SERIF,Lucida Sans,ARIAL,TAHOMA,HELVETICA" SIZE=-2> Modified </FONT></TH>
<TH ALIGN=RIGHT><FONT FACE="MS SANS SERIF,Lucida Sans,ARIAL,TAHOMA,HELVETICA" SIZE=-2> Index </FONT></TH>
<TH ALIGN=LEFT><FONT FACE="MS SANS SERIF,Lucida Sans,ARIAL,TAHOMA,HELVETICA" SIZE=-2> Name</FONT></TH>
</TR> |
Body Line: | Code: | <TR>
<TD VALIGN=TOP><FONT FACE="MS SANS SERIF,Lucida Sans,ARIAL,TAHOMA,HELVETICA" SIZE=-2> </TD>
<TD VALIGN=TOP ALIGN=RIGHT><FONT FACE="MS SANS SERIF,Lucida Sans,ARIAL,TAHOMA,HELVETICA" SIZE=-2><!-- #config sizefmt="bytes" --><!-- #echo var="DIRLIST_FILE_SIZE" --></FONT></TD>
<TD VALIGN=TOP><FONT FACE="MS SANS SERIF,Lucida Sans,ARIAL,TAHOMA,HELVETICA" SIZE=-2> <!-- #config timefmt="%Y/%m/%d %H:%M:%S" --><!-- #echo var="DIRLIST_FILE_DATE" --></FONT></TD>
<TD VALIGN=TOP ALIGN=RIGHT><FONT FACE="MS SANS SERIF,Lucida Sans,ARIAL,TAHOMA,HELVETICA" SIZE=-2><!-- #echo var="DIRLIST_FILE_INDEX" --></FONT></TD>
<TD VALIGN=TOP NOWRAP><FONT FACE="MS SANS SERIF,Lucida Sans,ARIAL,TAHOMA,HELVETICA" SIZE=-2> <A HREF="<!-- #echo var="DIRLIST_FILE_URL" -->"><!-- #echo var="DIRLIST_FILE_NAME" --></A></FONT></TD>
</TR> |
Footer: | Code: | </TABLE><HR />
<P /><FONT SIZE=-2>Website and web server powered by <A HREF="http://home.loloyd.com/">LD TechnoLogics HOME http://home.loloyd.com/</A>.
</FONT></FONT></BODY></HTML> |
/backgrounds/image_rotator.php: | Code: | <?php
/*
AUTOMATIC IMAGE ROTATOR
Version 2.2 - December 4, 2003
Copyright (c) 2002-2003 Dan P. Benjamin, Automatic, Ltd.
All Rights Reserved.
http://www.hiveware.com/imagerotator.php
http://www.automaticlabs.com/
DISCLAIMER
Automatic, Ltd. makes no representations or warranties about
the suitability of the software, either express or
implied, including but not limited to the implied
warranties of merchantability, fitness for a particular
purpose, or non-infringement. Dan P. Benjamin and Automatic, Ltd.
shall not be liable for any damages suffered by licensee
as a result of using, modifying or distributing this
software or its derivatives.
ABOUT
This PHP script will randomly select an image file from a
folder of images on your webserver. You can then link to it
as you would any standard image file and you'll see a random
image each time you reload.
When you want to add or remove images from the rotation-pool,
just add or remove them from the image rotation folder.
VERSION CHANGES
...snipped, get the source from above if you want this section...
INSTRUCTIONS
1. Modify the $folder setting in the configuration section below.
2. Add image types if needed (most users can ignore that part).
3. Upload this file (rotate.php) to your webserver. I recommend
uploading it to the same folder as your images.
4. Link to the file as you would any normal image file, like this:
<img src="http://example.com/rotate.php">
5. You can also specify the image to display like this:
<img src="http://example.com/rotate.php?img=gorilla.jpg">
This would specify that an image named "gorilla.jpg" located
in the image-rotation folder should be displayed.
That's it, you're done.
*/
/* ------------------------- CONFIGURATION -----------------------
Set $folder to the full path to the location of your images.
For example: $folder = '/user/me/example.com/images/';
If the rotate.php file will be in the same folder as your
images then you should leave it set to $folder = '.';
*/
$folder = '.';
/*
Most users can safely ignore this part. If you're a programmer,
keep reading, if not, you're done. Go get some coffee.
If you'd like to enable additional image types other than
gif, jpg, and png, add a duplicate line to the section below
for the new image type.
Add the new file-type, single-quoted, inside brackets.
Add the mime-type to be sent to the browser, also single-quoted,
after the equal sign.
For example:
PDF Files:
$extList['pdf'] = 'application/pdf';
CSS Files:
$extList['css'] = 'text/css';
You can even serve up random HTML files:
$extList['html'] = 'text/html';
$extList['htm'] = 'text/html';
Just be sure your mime-type definition is correct!
*/
$extList = array();
$extList['gif'] = 'image/gif';
$extList['jpg'] = 'image/jpeg';
$extList['jpeg'] = 'image/jpeg';
$extList['png'] = 'image/png';
// You don't need to edit anything after this point.
// --------------------- END CONFIGURATION -----------------------
$img = null;
if (substr($folder,-1) != '/') {
$folder = $folder.'/';
}
if (isset($_GET['img'])) {
$imageInfo = pathinfo($_GET['img']);
if (
isset( $extList[ strtolower( $imageInfo['extension'] ) ] ) &&
file_exists( $folder.$imageInfo['basename'] )
) {
$img = $folder.$imageInfo['basename'];
}
} else {
$fileList = array();
$handle = opendir($folder);
while ( false !== ( $file = readdir($handle) ) ) {
$file_info = pathinfo($file);
if (
isset( $extList[ strtolower( $file_info['extension'] ) ] )
) {
$fileList[] = $file;
}
}
closedir($handle);
if (count($fileList) > 0) {
$imageNumber = time() % count($fileList);
$img = $folder.$fileList[$imageNumber];
}
}
if ($img!=null) {
$imageInfo = pathinfo($img);
$contentType = 'Content-type: '.$extList[ $imageInfo['extension'] ];
header ($contentType);
readfile($img);
} else {
if ( function_exists('imagecreate') ) {
header ("Content-type: image/png");
$im = @imagecreate (100, 100)
or die ("Cannot initialize new GD image stream");
$background_color = imagecolorallocate ($im, 255, 255, 255);
$text_color = imagecolorallocate ($im, 0,0,0);
imagestring ($im, 2, 5, 5, "IMAGE ERROR", $text_color);
imagepng ($im);
imagedestroy($im);
}
}
?> |
_________________
 http://home.loloyd.com/ is online if the logo graphic at left is showing. |
|
| Back to top |
   |
 |
AbyssUnderground
-
Joined: 31 Dec 2004
Posts: 3855
|
| Posted: Sun May 07, 2006 8:47 pm Post subject: |
|
|
There is a lot of code going into a listing script that is so basic.
_________________
Andy (AbyssUnderground) (previously The Inquisitor)
www.abyssunderground.co.uk |
|
| Back to top |
|
|
TRUSTAbyss
-
Joined: 29 Oct 2003
Posts: 3752
Location: USA, GA
|
| Posted: Mon May 08, 2006 2:18 am Post subject: |
|
|
We'll add this to the new TRUSTAbyss.com website when it's ready. Including
the original Copyright where it came from. :-) |
|
| Back to top |
|
|
techker
-
Joined: 22 May 2006
Posts: 8
|
|
| Back to top |
|
|
AbyssUnderground
-
Joined: 31 Dec 2004
Posts: 3855
|
| Posted: Tue May 23, 2006 1:05 pm Post subject: |
|
|
You need to understand that it will not work by linking to it as a page! It needs to go inside the Abyss Web Server console on the directory listing section. The server needs to process it and it will not do so simply copying the code into a page.
_________________
Andy (AbyssUnderground) (previously The Inquisitor)
www.abyssunderground.co.uk |
|
| Back to top |
|
|
loloyd
-
Joined: 03 Mar 2006
Posts: 435
Location: Philippines
|
| Posted: Tue May 23, 2006 5:45 pm Post subject: |
|
|
Andy's right. It's intended to be injected in the Abyss Directory Listing feature of your website. Conventionally, this feature can be found in | Code: | | http://localhost:9999/hosts/host@0/edit/dirlist |
I guess what you're looking for is web file browser since it appears you're trying to get the directory listing of your root directory. Get it from | Code: | | http://www.webfilebrowser.org/ |
. Thanks to Aprelium for the resource.
Getting back to the Abyss Directory Listing, I'll be extending this very very soon to include sortability (I finally found it!), and odd-even row coloring to boot. Watch out, baby!
_________________
http://home.loloyd.com/ is online if the logo graphic at left is showing. |
|
| Back to top |
|
|
techker
-
Joined: 22 May 2006
Posts: 8
|
| Posted: Tue May 23, 2006 6:54 pm Post subject: |
|
|
| thx i will look in to it. |
|
| Back to top |
|
|
loloyd
-
Joined: 03 Mar 2006
Posts: 435
Location: Philippines
|
| Posted: Wed May 24, 2006 4:09 pm Post subject: Update! |
|
|
Here it finally is. A directory listing template that has row-coloring, random background image, and coolness factor -3. Hehehe.
Sample output
http://loloyd.homeip.net/webttachments/
Go ahead! Test the neat column-sorting feature! Cool eh? Possible uses include determining which files are newly added in that directory, which files are the biggest and the smallest, and grouping together files of the same type. I find this so useful, it's crazy!
Required file
By default, put this inside your webserver's virtual directory named "/static/".
http://loloyd.homeip.net/static/sortable.js
The content of this file can also be seen below.
Optional graphics files
Unzip this file to your webserver's virtual directory named "/static/".
http://loloyd.homeip.net/static/arrows.zip
Put the following image in your webserver's virtual directory named "/images/".
http://loloyd.homeip.net/images/dir_up.gif
Directory Listing template settings
Type:
MIME Type: | Code: | | text/html; charset=UTF-8 |
Header (modify wherever applicable to you): | Code: | <html>
<head>
<title>LD TechnoLogics website directory listing of <!-- #echo var="URL" encoding="reverse-url" --></title>
<script type="text/javascript" src="/static/sortable.js"></script>
<style type="text/css">
body {
background-image: url('/backgrounds/image_rotator.php');
background-repeat: no-repeat;
background-position: center;
font-family: MS Sans Serif, Lucida Sans, Arial, Tahoma, Helvetica;
font-size: 80%;
}
a { text-decoration: none; }
a img { border: 0; text-decoration: none; }
table.sortable {
border-spacing: 0;
border-collapse: collapse;
font-family: MS Sans Serif, Lucida Sans, Arial, Tahoma, Helvetica;
font-size: 80%;
}
table.sortable th, table.sortable td, table.sortable a {
padding: 2px 4px 2px 4px;
text-decoration: none;
}
table.sortable th {
border-width: 0px 1px 1px 1px;
background-color: #66ee66;
font-family: MS Sans Serif, Lucida Sans, Arial, Tahoma, Helvetica;
font-size: 80%;
}
table.sortable td {
border-width: 0px 1px 0px 1px;
font-family: MS Sans Serif, Lucida Sans, Arial, Tahoma, Helvetica;
font-size: 80%;
}
table.sortable tr.odd td { xbackground-color: #eeffee; }
table.sortable tr.even td { background-color: #ddffdd; }
table.sortable tr.sortbottom td {
background-color: #ccffcc;
font-weight: bold;
}
</style>
</head><body><font face="MS Sans Serif, Lucida Sans, Lucida Sans Unicode, Arial, Tahoma, Helvetica" size=-1>
<!-- #config timefmt="%Y/%m/%d %H:%M:%S" --><h3>Directory listing of <!-- #echo var="URL" encoding="reverse-url" --></h3><h5>
<a href="../" TITLE="Parent directory"><img src="/images/dir_up.gif" TITLE="Parent directory" BORDER=0 ALT="Up to parent directory" /></a> <a href="../" title="Parent directory">To parent directory or resource</a></h5><font face="Ms Sans Serif, Arial, Helvetica, Tahoma" size=-2><font color="#991111"><b>Warning:</b></font> Some contents may be of offensive and/or vulgar nature.
<br><font color="#991111"><b>Caution:</b></font> These resources have been determined to be free from viruses by LD TechnoLogics at the web-server side.
<br>You are hereby advised to exercise extreme prejudice when downloading internet-borne resources.
<br>Loloy D and LD TechnoLogics HOME will not be held responsible for any consequence and circumstance that may arise from your viewing, downloading and using the contents herein.</font>
<hr>
<table border=0 cellspacing=0 class="sortable" id="dirlist_table">
<tr>
<th align=left class="unsortable"><font face="MS Sans Serif, Lucida Sans, Arial, Tahoma, Helvetica" size=-2> </font></th>
<th align=right><font face="MS Sans Serif, Lucida Sans, Arial, Tahoma, Helvetica" size=-2>Size</font></th>
<th align=left><font face="MS Sans Serif, Lucida Sans, Arial, Tahoma, Helvetica" size=-2>Modified</font></th>
<th align=left><font face="MS Sans Serif, Lucida Sans, Arial, Tahoma, Helvetica" size=-2>MIME/File Type</font></th>
<th align=right><font face="MS Sans Serif, Lucida Sans, Arial, Tahoma, Helvetica" size=-2>Index</font></th>
<th align=left><font face="MS Sans Serif, Lucida Sans, Arial, Tahoma, Helvetica" size=-2>Name</font></th>
</tr> |
Body Line: | Code: | <tr>
<td valign=top><font face="MS Sans Serif,Lucida Sans,Arial,Tahoma,Helvetica" size=-2> </td>
<td valign=top align=right><font face="MS Sans Serif,Lucida Sans,Arial,Tahoma,Helvetica" size=-2><!-- #config sizefmt="bytes" --><!-- #echo var="DIRLIST_FILE_SIZE" --></font></td>
<td valign=top><font face="MS Sans Serif,Lucida Sans,Arial,Tahoma,Helvetica" size=-2> <!-- #config timefmt="%Y/%m/%d %H:%M:%S" --><!-- #echo var="DIRLIST_FILE_DATE" --></font></td>
<td valign=top align=left><font face="MS Sans Serif,Lucida Sans,Arial,Tahoma,Helvetica" size=-2><!-- #echo var="DIRLIST_FILE_MIME_MAIN_TYPE" -->/<!-- #echo var="DIRLIST_FILE_MIME_SUB_TYPE" --></font></td>
<td valign=top align=right><font face="MS Sans Serif,Lucida Sans,Arial,Tahoma,Helvetica" size=-2><!-- #echo var="DIRLIST_FILE_INDEX" --></font></td>
<td valign=top nowrap><font face="MS Sans Serif,Lucida Sans,Arial,Tahoma,Helvetica" size=-2> <a href="<!-- #echo var="DIRLIST_FILE_URL" -->"><!-- #echo var="DIRLIST_FILE_NAME" --></a></font></td>
</tr> |
Footer: | Code: | </table><hr />
<p /><font sizE=-2>Website and web server powered by <a href="http://home.loloyd.com/">LD TechnoLogics HOME http://home.loloyd.com/</a>.
</font></font></body></html> |
sortable.js
| Code: | /* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: Joost de Valk :: http://www.joostdevalk.nl/ */
/*
Table sorting script, taken from http://www.kryogenix.org/code/browser/sorttable/ .
Distributed under the MIT license: http://www.kryogenix.org/code/browser/licence.html .
Adaptation by Joost de Valk (http://www.joostdevalk.nl/) to add alternating row classes as well.
Copyright (c) 1997-2006 Stuart Langridge, Joost de Valk.
*/
/* Change these values */
var image_path = "/static/";
// var image_path = "/code/sortable_table/";
var image_up = "arrow-up.gif";
var image_down = "arrow-down.gif";
var image_none = "arrow-none.gif";
/* Don't change anything below this unless you know what you're doing */
addEvent(window, "load", sortables_init);
var SORT_COLUMN_INDEX;
function sortables_init() {
// Find all tables with class sortable and make them sortable
if (!document.getElementsByTagName) return;
tbls = document.getElementsByTagName("table");
for (ti=0;ti<tbls.length;ti++) {
thisTbl = tbls[ti];
if (((' '+thisTbl.className+' ').indexOf("sortable") != -1) && (thisTbl.id)) {
ts_makeSortable(thisTbl);
}
}
}
function ts_makeSortable(table) {
if (table.rows && table.rows.length > 0) {
var firstRow = table.rows[0];
}
if (!firstRow) return;
// We have a first row: assume it's the header, and make its contents clickable links
for (var i=0;i<firstRow.cells.length;i++) {
var cell = firstRow.cells[i];
var txt = ts_getInnerText(cell);
if (cell.className != "unsortable" && cell.className.indexOf("unsortable") == -1) {
cell.innerHTML = '<a href="#" class="sortheader" onclick="ts_resortTable(this);return false;">'+txt+'<span class="sortarrow"> <img src="'+ image_path + image_none + '" alt="?"/></span></a>';
}
}
alternate(table);
}
function ts_getInnerText(el) {
if (typeof el == "string") return el;
if (typeof el == "undefined") { return el };
if (el.innerText) return el.innerText; //Not needed but it is faster
var str = "";
var cs = el.childNodes;
var l = cs.length;
for (var i = 0; i < l; i++) {
switch (cs[i].nodeType) {
case 1: // element_node
str += ts_getInnerText(cs[i]);
break;
case 3: // text_node
str += cs[i].nodeValue;
break;
}
}
return str;
}
function ts_resortTable(lnk) {
// get the span
var span;
for (var ci=0;ci<lnk.childNodes.length;ci++) {
if (lnk.childNodes[ci].tagName && lnk.childNodes[ci].tagName.toLowerCase() == 'span') span = lnk.childNodes[ci];
}
var spantext = ts_getInnerText(span);
var td = lnk.parentNode;
var column = td.cellIndex;
var table = getParent(td,'TABLE');
// Work out a type for the column
if (table.rows.length <= 1) return;
var itm = ts_getInnerText(table.rows[1].cells[column]);
sortfn = ts_sort_caseinsensitive;
if (itm.match(/^\d\d[\/-]\d\d[\/-]\d\d\d\d$/)) sortfn = ts_sort_date;
if (itm.match(/^\d\d[\/-]\d\d[\/-]\d\d$/)) sortfn = ts_sort_date;
if (itm.match(/^[£$€]/)) sortfn = ts_sort_currency;
if (itm.match(/^[\d\.\-]+$/)) sortfn = ts_sort_numeric;
SORT_COLUMN_INDEX = column;
var firstRow = new Array();
var newRows = new Array();
for (i=0;i<table.rows[0].length;i++) {
firstRow[i] = table.rows[0][i];
}
for (j=1;j<table.rows.length;j++) {
newRows[j-1] = table.rows[j];
}
newRows.sort(sortfn);
if (span.getAttribute("sortdir") == 'down') {
ARROW = ' <img src="'+ image_path + image_up + '" alt="?"/>';
newRows.reverse();
span.setAttribute('sortdir','up');
} else {
ARROW = ' <img src="'+ image_path + image_down + '" alt="?"/>';
span.setAttribute('sortdir','down');
}
// We appendChild rows that already exist to the tbody, so it moves them rather than creating new ones
// don't do sortbottom rows
for (i=0; i<newRows.length; i++) {
if (!newRows[i].className || (newRows[i].className && (newRows[i].className.indexOf('sortbottom') == -1))) {
table.tBodies[0].appendChild(newRows[i]);
}
}
// do sortbottom rows only
for (i=0; i<newRows.length; i++) {
if (newRows[i].className && (newRows[i].className.indexOf('sortbottom') != -1))
table.tBodies[0].appendChild(newRows[i]);
}
// Delete any other arrows there may be showing
var allspans = document.getElementsByTagName("span");
for (var ci=0;ci<allspans.length;ci++) {
if (allspans[ci].className == 'sortarrow') {
if (getParent(allspans[ci],"table") == getParent(lnk,"table")) { // in the same table as us?
allspans[ci].innerHTML = ' <img src="'+ image_path + image_none + '" alt="?"/>';
}
}
}
span.innerHTML = ARROW;
alternate(table);
}
function getParent(el, pTagName) {
if (el == null) {
return null;
} else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase()) { // Gecko bug, supposed to be uppercase
return el;
} else {
return getParent(el.parentNode, pTagName);
}
}
function ts_sort_date(a,b) {
aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]);
bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]);
if (aa.length == 10) {
dt1 = aa.substr(6,4)+aa.substr(3,2)+aa.substr(0,2);
} else {
yr = aa.substr(6,2);
if (parseInt(yr) < 50) {
yr = '20'+yr;
} else {
yr = '19'+yr;
}
dt1 = yr+aa.substr(3,2)+aa.substr(0,2);
}
if (bb.length == 10) {
dt2 = bb.substr(6,4)+bb.substr(3,2)+bb.substr(0,2);
} else {
yr = bb.substr(6,2);
if (parseInt(yr) < 50) {
yr = '20'+yr;
} else {
yr = '19'+yr;
}
dt2 = yr+bb.substr(3,2)+bb.substr(0,2);
}
if (dt1==dt2) {
return 0;
}
if (dt1<dt2) {
return -1;
}
return 1;
}
function ts_sort_currency(a,b) {
aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).replace(/[^0-9.]/g,'');
bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).replace(/[^0-9.]/g,'');
return parseFloat(aa) - parseFloat(bb);
}
function ts_sort_numeric(a,b) {
aa = parseFloat(ts_getInnerText(a.cells[SORT_COLUMN_INDEX]));
if (isNaN(aa)) {
aa = 0;
}
bb = parseFloat(ts_getInnerText(b.cells[SORT_COLUMN_INDEX]));
if (isNaN(bb)) {
bb = 0;
}
return aa-bb;
}
function ts_sort_caseinsensitive(a,b) {
aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).toLowerCase();
bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).toLowerCase();
if (aa==bb) {
return 0;
}
if (aa<bb) {
return -1;
}
return 1;
}
function ts_sort_default(a,b) {
aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]);
bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]);
if (aa==bb) {
return 0;
}
if (aa<bb) {
return -1;
}
return 1;
}
function addEvent(elm, evType, fn, useCapture) {
// addEvent and removeEvent
// cross-browser event handling for IE5+, NS6 and Mozilla
// By Scott Andrew
if (elm.addEventListener){
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent){
var r = elm.attachEvent("on"+evType, fn);
return r;
} else {
alert("Handler could not be removed");
}
}
function replace(s, t, u) {
/*
** Replace a token in a string
** s string to be processed
** t token to be found and removed
** u token to be inserted
** returns new String
*/
i = s.indexOf(t);
r = "";
if (i == -1) return s;
r += s.substring(0,i) + u;
if ( i + t.length < s.length)
r += replace(s.substring(i + t.length, s.length), t, u);
return r;
}
function alternate(table) {
// Take object table and get all it's tbodies.
var tableBodies = table.getElementsByTagName("tbody");
// Loop through these tbodies
for (var i = 0; i < tableBodies.length; i++) {
// Take the tbody, and get all it's rows
var tableRows = tableBodies[i].getElementsByTagName("tr");
// Loop through these rows
// Start at 1 because we want to leave the heading row untouched
for (var j = 1; j < tableRows.length; j++) {
// Check if j is even, and apply classes for both possible results
if ( (j % 2) == 0 ) {
if (tableRows[j].className == 'odd' || !(tableRows[j].className.indexOf('odd') == -1) ) {
tableRows[j].className = replace(tableRows[j].className, 'odd', 'even');
} else {
tableRows[j].className += " even";
}
} else {
if (tableRows[j].className == 'even' || !(tableRows[j].className.indexOf('even') == -1) ) {
tableRows[j].className = replace(tableRows[j].className, 'even', 'odd');
}
tableRows[j].className += " odd";
}
}
}
} |
Other notes
If you're interested in random background images, implement the PHP file as stated at the top of this topic. Remember to put this file in your webserver's virtual location as "/backgrounds/image_rotator.php". Don't forget to put your collection of random images also in that location "/backgrounds/".
Enjoy!
Additional references
http://nl.internet.com/c.html?rtr=on&s=1,2gnt,1,3if5,lku,6kqh,3t3h
http://javascript.internet.com/miscellaneous/sortable-table-with-alternating-row-colors.html
_________________
http://home.loloyd.com/ is online if the logo graphic at left is showing. |
|
| Back to top |
|
|
pkSML
-
Joined: 29 May 2006
Posts: 951
Location: Michigan, USA
|
| Posted: Sun Jun 04, 2006 2:44 am Post subject: New and Improved? |
|
|
Bravo on a wonderful directory script, loloyd! You certainly put a lot of time and effort in getting this to work.
I thought I might add an update for you. I used CSS to reduce a little bit of redundancy, bandwidth, and browser display time.
Notice the CSS for "th" and "td".
Of course, still needed is...
1. http://loloyd.homeip.net/static/sortable.js - unzipped inside the "/static" directory
2. http://loloyd.homeip.net/static/arrows.zip - inside the "/static" directory
3. http://loloyd.homeip.net/images/dir_up.gif - inside the "/images" directory
The Template
Type:
MIME: | Code: | | text/html; charset=UTF-8 |
Header:
| Code: |
<html>
<head>
<title>Directory Listing of <!-- #echo var="URL" encoding="reverse-url" --></title>
<script type="text/javascript" src="/static/sortable.js"></script>
<style type="text/css">
body {
background-image: url('/backgrounds/image_rotator.php');
background-repeat: no-repeat;
background-position: center;
font-family: MS Sans Serif, Lucida Sans, Arial, Tahoma, Helvetica;
font-size: 80%;
}
a { text-decoration: none; }
a img { border: 0; text-decoration: none; }
table.sortable {
border-spacing: 0;
border-collapse: collapse;
font-family: MS Sans Serif, Lucida Sans, Arial, Tahoma, Helvetica;
font-size: 80%;
}
table.sortable th, table.sortable td, table.sortable a {
padding: 2px 4px 2px 4px;
text-decoration: none;
}
table.sortable th {
border-width: 0px 1px 1px 1px;
background-color: #66ee66;
font-family: MS Sans Serif, Lucida Sans, Arial, Tahoma, Helvetica;
font-size: 80%;
}
table.sortable td {
border-width: 0px 1px 0px 1px;
font-family: MS Sans Serif, Lucida Sans, Arial, Tahoma, Helvetica;
font-size: 80%;
}
table.sortable tr.odd td { xbackground-color: #eeffee; }
table.sortable tr.even td { background-color: #ddffdd; }
table.sortable tr.sortbottom td {
background-color: #ccffcc;
font-weight: bold;
}
th, td {
font-family: MS Sans Serif, Lucida Sans, Tahoma;
font-size: x-small;
vertical-align: top;
}
</style>
</head>
<body>
<!-- #config timefmt="%Y/%m/%d %H:%M:%S" -->
<font face="MS Sans Serif, Lucida Sans, Lucida Sans Unicode, Arial, Tahoma, Helvetica" size=-1>
<h3>Directory listing of <!-- #echo var="URL" encoding="reverse-url" --></h3>
<h5>
<a href="../"><img src="/images/dir_up.gif" TITLE="Parent directory" BORDER=0 ALT="Up to parent directory" /> To parent directory or resource</a>
</h5>
<font face="Ms Sans Serif, Arial, Helvetica, Tahoma" size=-2><font color="#991111"><b>Warning:</b></font> Some contents may be of offensive and/or vulgar nature.<br>
<font color="#991111"><b>Caution:</b></font> These resources have been determined to be free from viruses by LD TechnoLogics at the web-server side.<br>
You are hereby advised to exercise extreme prejudice when downloading internet-borne resources.<br>
Loloy D and LD TechnoLogics HOME will not be held responsible for any consequence and circumstance that may arise from your viewing, downloading and using the contents herein.</font>
<hr>
<table border=0 cellspacing=0 class="sortable" id="dirlist_table">
<tr>
<th align=left class="unsortable"> </th>
<th align=right>Size</th>
<th align=left>Modified</th>
<th align=left>MIME/File Type</th>
<th align=right>Index</th>
<th align=left>Name</th>
</tr>
|
Body Line:
| Code: |
<tr>
<td> </td>
<td align=right><!-- #config sizefmt="bytes" --><!-- #echo var="DIRLIST_FILE_SIZE" --></td>
<td align=left><!-- #config timefmt="%Y/%m/%d %H:%M:%S" --><!-- #echo var="DIRLIST_FILE_DATE" --></td>
<td align=left><!-- #echo var="DIRLIST_FILE_MIME_MAIN_TYPE" -->/<!-- #echo var="DIRLIST_FILE_MIME_SUB_TYPE" --></td>
<td align=right><!-- #echo var="DIRLIST_FILE_INDEX" --></td>
<td align=left nowrap><a href="<!-- #echo var="DIRLIST_FILE_URL" -->"><!-- #echo var="DIRLIST_FILE_NAME" --></a></td>
</tr>
|
Footer:
| Code: |
</table><hr>
<font size=-2>Website and web server powered by <a href="http://home.loloyd.com/">LD TechnoLogics HOME http://home.loloyd.com/</a>.
</font>
</font>
</body>
</html>
|
_________________
Stephen
Need a LitlURL?
http://CodeBin.yi.org |
|
| Back to top |
|
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
@abyssws