/************************************************************************************ AJAX FILE BROWSER This is a demonstration of a useful AJAX capability. It is a simple file browser. The nice thing about this, as opposed to file browser interfaces on the Web server, is that it is completely customizable, and is very "snappy." The entire file browser is contained in a JavaScript file. This relies on my AJAX Queue Class. You need to have that class included into the of your page for this to work. All client-side HTML is generated dynamically, using JavaScript DHTML techniques. This is a 100% JavaScript solution. This file is the CSS file for the demo. Version 1.0 Copyright: Go ahead and use this as you wish. You can remove this copyright, and you don't have to give me credit, but don't be takin' credit yourself, or mis-assign the credit. ©2006, Chris Marshall http://www.cmarshall.net/ */ /* Basic link behavior. */ a { color: #00c; text-decoration: underline; } /* Turn red and lose the underline. */ a:hover, a:active { color: #c00; text-decoration: none; } /* This is the all-encompassing div. */ div.div_class_ajax_file_browser { text-align: center; border:1px solid #555; margin-left:64px; margin-right:64px; padding: 8px; background: none; } /* This encloses a given directory hierarchy. We use a definition list to display the tree. */ dl.dl_class_dir_tree { text-align: left; padding: 0; margin: 0; margin-left:auto; margin-right:auto; background: none; } /* This is the definition list element of a closed directory. */ dt.dt_class_dir_closed, /* This is the header for an "open" directory. */ dt.dt_class_dir_open, /* Enclosed within, a directory is either closed or empty. */ dd.dd_class_dir_closed, dd.dd_class_dir_empty { font-weight: bold; } /* If we are at a file, or "leaf," this class is used. */ dd.dd_class_file { font-weight: normal; } /* We align the empty one, so the text matches up. */ dd.dd_class_dir_empty, a.a_class_dir_link_closed, a.a_class_dir_link_open, a.a_class_file_link { padding-left: 13px; } /* We are going to add an icon to the left of our links. */ a.a_class_dir_link_closed, a.a_class_dir_link_open, a.a_class_file_link { background-position:left; background-repeat: no-repeat; } a.a_class_dir_link_closed { background-image: url(images/bluecross.gif); } a.a_class_dir_link_closed:hover, a.a_class_dir_link_closed:active { background-image: url(images/redcross.gif); } a.a_class_dir_link_open { background-image: url(images/blueminus.gif); } a.a_class_dir_link_open:hover, a.a_class_dir_link_open:active { background-image: url(images/redminus.gif); } a.a_class_file_link { background-image: url(images/bluedot.gif); } a.a_class_file_link:hover, a.a_class_file_link:active { background-image: url(images/reddot.gif); }