Wednesday, June 25, 2008

Link: IconsPedia

IconsPedia is a site with many icons free for download. Check the license first to see if you can use it for the purpose you want it for (some have conditions - not for commercial use, and/or must attribute (give credit to) the author). You can also upload any icons that you have produced (as long as they are free).

Thursday, June 19, 2008

Link: A list of .NET Cheat Sheets

.NET Cheat Sheets includes ".NET Format String Quick Reference", "ASP.NET 2.0 Page Life Cycle & Common Events", "Visual Studio 2005 Built-in Code Snippets (C#)" as well as links to several more.

Tuesday, June 17, 2008

Tabs without JavaScript

It is possible to implement a tabbing system without needing to use JavaScript. All you need is CSS and standard (X)HTML. The downside is that you won't get styling on the active tab to indicate that it is active.

CSS:

div.tabcontainer {
 width: 500px;
 background: #eee;
 border: 1px solid #000000;
}
ul.tabnav {
 list-style-type: none;
 margin: 0;
 padding: 0;
 width: 100%;
 overflow: hidden;
}

ul.tabnav a {
 display: block;
 width: 100%;
}

ul.tabnav a:hover {
 background: #ccc;
}

ul.tabnav li {
 float: left;
 width: 125px;
 margin: 0;
 padding: 0;
 text-align: center;
}

div.tabcontents {
 height: 290px;
 background: #ccc;
 overflow: hidden;
 border-top: 1px solid #011;
 padding: 3px;
 
}

div.tabcontents div.content {
 float: left;
 width: 100%;
 height: 102%;
 overflow-y: auto;
}

div.tabcontents div.content h2 {
 margin-top: 3px;
}

HTML:

<div class="tabcontainer">
 <ul class="tabnav">
  <li><a href="#tab1">Tab 1</a></li>
  <li><a href="#tab2">Tab 2</a></li>
  <li><a href="#tab3">Tab 3</a></li>
  <li><a href="#tab4">Tab 4</a></li>
 </ul>
 <div class="tabcontents">
  <div class="content" id="tab1">
   <h2>Tab 1</h2>
  </div>
  <div class="content" id="tab2">
   <h2>Tab 2</h2>
  </div>
  <div class="content" id="tab3">
   <h2>Tab 3</h2>
  </div>
  <div class="content" id="tab4">
   <h2>Tab 4</h2>
  </div> 
 </div>
</div>

Demo page

Friday, June 13, 2008

Recursive Directory Listing (PHP)

In PHP, it is possible to get a list of files and folders and save them into an array: PHP: List files in a directory. Building on this, I have added recursion to the dirList function detailed in the aforementioned link:

/**
* Return a list of all files within a directory
*
* @param string $directory The directory to search
* @param bool $recursive Go through child directories as well
* @return array
*/
function dirList($directory, $recursive = true) 
{
 // create an array to hold directory list
 $results = array();

 // create a handler for the directory
 $handler = opendir($directory);

 // keep going until all files in directory have been read
 while (false !== ($file = readdir($handler)))
 {
  // if $file isn't this directory or its parent, 
  // add it to the results array
  if ($file != '.' && $file != '..')
  {
   // if the file is a directory
   // add contents of that directory
   if(is_dir($directory.DIRECTORY_SEPARATOR.$file) && $recursive === true)
   {
    $results[] = array($file => dirList($directory.DIRECTORY_SEPARATOR.$file));
   }
   else
   {
    $results[] = $file;
   }
  }
 }

 // tidy up: close the handler
 closedir($handler);

 // done!
 return $results;

}

Now you can build a list of files/folders generated with dirList:

/**
 * Return an unordered html list of all files within a directory
 *
 * @param string $directory The directory to search
 * @param array $fileTypes Which fileTypes to show. To list all files use htmlDirList("mydir", array("*"))
 * @param bool $recursive Search through child directories as well
 * @param string $listClassName The class name to apply to the <ul>
 * @param function $displayName A function to call on the file to determine how it is displayed (e.g. change _ to space)
 * @return array
 */
function htmlDirList($directory, $fileTypes = null, $recursive = true, $listClassName = null, $displayName = null)
{
 // defaults (if null)
 // restrict by fileTypes
 $fileTypes = (is_null($fileTypes) ? array("doc","rtf","pdf") : $fileTypes);
 // the class name to apply to the <ul>
 $listClassName = (is_null($listClassName) ? "documents" : $listClassName);
 // set a default function for displayName
 $displayName = (is_null($displayName) ? create_function('$fileName,$extension', 'return str_replace("_", " ", $fileName);') : $displayName);
 
 // get list of files / folders
 $list = dirList($directory, $recursive);
 
 // use an array for building up the string
 $results = array();
 // create the list
 $results[] = "<ul class=\"$listClassName\">\n";
 foreach ( $list as $value )
 {
  // is a folder
  if(is_array($value))
  {
   $results[] = "<li class=\"directory\">".$displayName(key($value),"")."\n".htmlDirList($directory.DIRECTORY_SEPARATOR.key($value), $fileTypes, $recursive, $listClassName, $displayName)."</li>\n";
  }
  else
  {
   // the extension is after the last "."
   $extension = strtolower(array_pop(explode(".", $value)));
   // the file name is before the last "."
   $fileName = array_shift(explode(".", $value));
   // continue to next item if not one of the desired file types
   if(!in_array("*", $fileTypes) && !in_array($extension, $fileTypes)) continue;
   // add the list item
   $results[] = "<li class=\"file $extension\"><a href=\"".str_replace("\\", "/", $directory)."/$value\">".$displayName($fileName, $extension)."</a></li>\n";
  }
 }
 $results[] = "\n</ul>";
 
 // return the results as a string
 return implode("", $results);
}

So now you can get create documents within a folder and have a page listing all those documents, all linked to. In your PHP page:

<?php echo htmlDirList("documents") ?>

The generated code is not formatted, but doing so would add further complexity and be of no benefit (apart from readability).

<ul class="documents">
<li class="file doc"><a href="files/File1.doc">File1</a></li>
<li class="file pdf"><a href="files/File_2.pdf">File 2</a></li>
<li class="file rtf"><a href="files/File_3.rtf">File 3</a></li>
<li class="directory">more
<ul class="documents">
<li class="file doc"><a href="files/File4.doc">File4</a></li>
<li class="file pdf"><a href="files/File_5.pdf">File 5</a></li>
<li class="file rtf"><a href="files/File_6.rtf">File 6</a></li>
</ul></li>
</ul>

There are also more options available, e.g. you may want an image listing:

<?php echo htmlDirList("images", array("jpg","gif","png"), true, "images") ?>

Simple JavaScript/CSS gzipping

I'm sure some may already do this, but compressing textual content can save bandwidth but also make it easier to maintain (by just including a php file instead of a CSS or JavaScript one). For example, create a file jquery.php in the same directory as JavaScript files:

<?php
ob_start("ob_gzhandler");
header("Content-Type: text/javascript");
include("jquery-1.2.6.min.js")
?>

Then include it instead of the normal JavaScript file:

<script type="text/javascript" src="/js/jquery.php"></script>

It's simple to maintain and could be improved (for example, some kind of caching). CSS files can also be used:

<?php
ob_start("ob_gzhandler");
header("Content-Type: text/css");
include("styles.css")
?>

Friday, June 06, 2008

Delete all cached thumbnails (thumbs.db on Windows system)

Not web related, but possibly of interest.

thumbs.db is a file that caches the thumbnails of images stored within a folder. There are tools for deleting these files, but they are often through the use of an application to be downloaded or installed. There is an easy way to do this without resorting to that, just by using the command prompt.

del *thumbs.db /s /ah

This will delete all files (and folders) ending in thumbs.db (e.g. myappthumbs.db), so don't run this if you are unsure (or run it in a folder other than C:\). The /ah parameter searches hidden files and folders as well (so you may get access denied on C:\RECYCLER)

Disclaimer: Be very careful with this as a typo could prove disastrous. Do not run this if you are not completely sure and don't have a backup if a mistake is made.