Sharing my Directory Listing Template

 
Post new topic   Reply to topic    Aprelium Forum Index -> Tutorials
View previous topic :: View next topic  
Author Message
loloyd
-


Joined: 03 Mar 2006
Posts: 435
Location: Philippines

PostPosted: Sun May 07, 2006 8:29 pm    Post subject: Sharing my Directory Listing Template Reply with quote

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>&nbsp;</FONT></TH>
    <TH ALIGN=RIGHT><FONT FACE="MS SANS SERIF,Lucida Sans,ARIAL,TAHOMA,HELVETICA" SIZE=-2>&nbsp;&nbsp;Size&nbsp;&nbsp;</FONT></TH>
    <TH ALIGN=LEFT><FONT FACE="MS SANS SERIF,Lucida Sans,ARIAL,TAHOMA,HELVETICA" SIZE=-2>&nbsp;&nbsp;Modified&nbsp;&nbsp;</FONT></TH>
    <TH ALIGN=RIGHT><FONT FACE="MS SANS SERIF,Lucida Sans,ARIAL,TAHOMA,HELVETICA" SIZE=-2>&nbsp;Index&nbsp;</FONT></TH>
    <TH ALIGN=LEFT><FONT FACE="MS SANS SERIF,Lucida Sans,ARIAL,TAHOMA,HELVETICA" SIZE=-2>&nbsp;&nbsp;Name</FONT></TH>
</TR>

Body Line:
Code:
<TR>
    <TD VALIGN=TOP><FONT FACE="MS SANS SERIF,Lucida Sans,ARIAL,TAHOMA,HELVETICA" SIZE=-2>&nbsp;</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>&nbsp;&nbsp;<!-- #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>&nbsp;&nbsp;<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 View user's profile Send private message Visit poster's website
AbyssUnderground
-


Joined: 31 Dec 2004
Posts: 3855

PostPosted: Sun May 07, 2006 8:47 pm    Post subject: Reply with quote

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 View user's profile Send private message Visit poster's website
TRUSTAbyss
-


Joined: 29 Oct 2003
Posts: 3720
Location: USA, GA

PostPosted: Mon May 08, 2006 2:18 am    Post subject: Reply with quote

We'll add this to the new TRUSTAbyss.com website when it's ready. Including
the original Copyright where it came from. :-)
_________________
Computer Programmer & Networking Specialist

Back to top View user's profile Send private message Visit poster's website MSN Messenger
techker
-


Joined: 22 May 2006
Posts: 8

PostPosted: Tue May 23, 2006 11:50 am    Post subject: Reply with quote

nice but i get this

http://letitring.itsfun.be/view3.php
Back to top View user's profile Send private message
AbyssUnderground
-


Joined: 31 Dec 2004
Posts: 3855

PostPosted: Tue May 23, 2006 1:05 pm    Post subject: Reply with quote

techker wrote:
nice but i get this

http://letitring.itsfun.be/view3.php


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 View user's profile Send private message Visit poster's website
loloyd
-


Joined: 03 Mar 2006
Posts: 435
Location: Philippines

PostPosted: Tue May 23, 2006 5:45 pm    Post subject: Reply with quote

techker wrote:
nice but i get this

http://letitring.itsfun.be/view3.php


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 View user's profile Send private message Visit poster's website
techker
-


Joined: 22 May 2006
Posts: 8

PostPosted: Tue May 23, 2006 6:54 pm    Post subject: Reply with quote

thx i will look in to it.
Back to top View user's profile Send private message
loloyd
-


Joined: 03 Mar 2006
Posts: 435
Location: Philippines

PostPosted: Wed May 24, 2006 4:09 pm    Post subject: Update! Reply with quote

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:
Code:
From Template

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>&nbsp;</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>&nbsp;</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>&nbsp;&nbsp;<!-- #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>&nbsp;&nbsp;<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 View user's profile Send private message Visit poster's website
pkSML
-


Joined: 29 May 2006
Posts: 919
Location: Michigan, USA

PostPosted: Sun Jun 04, 2006 2:44 am    Post subject: New and Improved? Reply with quote

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:
Code:
From Template


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">&nbsp;</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>&nbsp;</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 View user's profile Send private message Visit poster's website
Display posts from previous:   
Post new topic   Reply to topic    Aprelium Forum Index -> Tutorials All times are GMT + 1 Hour
Page 1 of 1

 
Jump to:  
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


Powered by phpBB phpBB Group