Visual Directory Contents (ASP)

Posted August 9, 2005 - 9:18pm by Brandon

Visual Directory Contents (VDC) is an ASP script which indexes the contents of folders on your web space, and produces a clean visual listing of all files and sub folders, and their properties. Through CSS, the output that is generated is fully configurable, allowing you to match the output to the style and overall look of your website.

Note:
This will be the last version of VDC written in ASP. I'm developing a version for PHP which will include a lot of new features including file uploading, custom file type hiding and most importantly, directory browsing.

Features:

  • Easy installation, just upload files and drop the script into any directory for which you want a contents list generated. Script works "right out of the box" with no script editing needed. Or for advanced users, you can edit the options and visual styles of the script.
  • Easy configuration: fully commented source leads you through option such as changing the name of the script, hiding ASP/ASP.NET files or changing the location of images
  • Customizable: Through CSS you can change all visual aspects of the output. Seamlessly integrate the script's output into your overall site design
  • Recognizes many file types, and displays their corresponding file type icons:
    • Images: .bmp, .gif, .jpg/jpeg, .psd, .png
    • Audio: .mid/midi, .mp3, .wma,
    • Video: .avi, .mpg/mpeg, .wmv, .divx, .xvid
    • Internet Related: .asp, .aspx, .ascx, .css, .fla, .htm/html, .js, .swf
    • Misc: .doc, .mdb, .ppt, .rar, .tgz, .txt, .xls
  • XHTML 1.0 transitional and CSS 2.1 compliant
  • 100% Free!

Documentation:

Installation:

  1. Open default.asp in your favorite text editor (notepad will do).
  2. If you need to change the script name , edit the variable ScriptName (i.e. listing.asp)
  3. If you'd like the list to show asp/aspx files, then set ShowASP=1, otherwise, the default setting has ASP and ASP.NET files hidden (ShowASP=0)
  4. If you'd like to place the file type images in a location OTHER than yoursite.com/images, edit the virtual path in the variable ImageFileDir
  5. If you want to edit the visual style, scroll down until you see the <style> tag
    • Use the "body, td, th" statement to set the base font for the listing
    • Use the body statement to set the background color
    • a:link is the "normal" state of the link, a:hover is the look of a link when the user has their mouse over it, a:active is the state where the link is clicked, and a:visited is what a visited link will look like.
    • The h1 statement defines what all <h1> elements will look like
    • #LayoutTable class defines the properties of the listing table
    • #LayoutTable tr.Headers td determines the look of the table headers (the line which contains the "file name, size, type, last modified date"
    • The .RowStyle1 and .RowStyle2 classes determine the look of the alternating rows of the table. Hint: if you don't want the striped pattern, set the background color of .RowStyle2 to the SAME as that for .RowStyle1!
  6. Upload the image files to the folder you specified in ImageFileDir
  7. Upload the listing file (default.asp or whatever you changed it to) to EACH folder for which you want a listing generated
  8. Point your browser at the script (i.e. www.yoursite.com/yourdirectory)

For an excellent resource to help you with CSS, check here

FAQ:

Q: Why isn't the file type "xyz" supported?

A: The most commonly used file types have been included. It would be impossible to include every file type. If you've got a good suggestion for a common file type that should be added, contact me.

Q: For all the numbers, why is there a comma in place of a decimal point?

A: If your numbers look like 12,5 where you're use to seeing 12.5, the cause of this is your server's regional settings. Contact your host and ask them to check what country the regional settings are set to. You might want to send your host this page, which might help them solve your problem.

Q: I don't like the zebra-striped listing pattern, how can I get rid of it?

A: The striped pattern was put in place to make it easier to read the info for each file. However, if you don't like it, it's easily removed. Open up default.asp and browse down until you find the two CSS styles RowStyle1 and RowStyle2. The only difference between them is their background colors. If you set both background colors to the same value, the whole table will have a solid background color of whatever you choose.

Change Log:

v2.3
CSS design overhaul
CSS is now cleaner and 32% smaller
Overall script size reduced by 7%
Added .ascx, .xvid and .divx file type icons

v2.2
Added timer to determine page generation time
Removed <font> from footer, replaced with <div> + css class
Changed number format to match whatever is defined in IIS Regional Settings
Minor typo correction

v2.1
Complete re-write #2
Added directory stats

v2.0
Complete re-write #1
Added style control via CSS
Added .rtf, .js, .mdb, .ppt, .midi, .mid, .wma, .zip, .tgz, and .psd file type icons
Added automatic protection (hiding) of self
Added user options to show asp (on/off) and change the name of the script itself
Added user control of images folder
Better compatibility across different servers
Changed number formatting (1MB=1024kB, not 1000kB)
Added alternating line styles
Edited all file type icons to be on transparent backgrounds (they look better on different line styles now)

v1.5
Edited for XHTML 1.0 Transitional DTD compliance
Added .doc, .bmp, .swf, .fla, .wmv file type icons

v1.3
Minor cosmetic update
Better compatibility across different servers
Added FormatNumber() function

v1.0
Original Release

Screenshots:

Default visual style Modified style

Downloads:

vdc23.zip (released 08/09/05)

Share/Save