Prefixing Icons to Hyperlinks

August 25th, 2009

link_icons

As shown in the image above icons can easily be prefixed to hyperlinks using the technique described below. The best part is that you do not have to muddle you HTML markup with extra image tags.  The steps involved to implement this are simple:

  1. Identify which links you want to prepend an icon to.  Use the attribute value selector to match the end of the attribute value with a file extension.
  2. Use a small gif, jpeg, or png image as the background-image for the particular link.
  3. Set the background-repeat to no-repeat.
  4. Set the padding left to the width of the icon.

This CSS was used to create the example shown above.

[href$='doc']{
      background-image: url(doc-type-doc.png);
      background-repeat: no-repeat;
      padding-left: 18px;
 }
 
 [href$='xls']{
      background-image: url(doc-type-xls.png);
      background-repeat: no-repeat;
      padding-left: 18px;
 }
 
 [href$='jpg']{
      background-image: url(doc-type-jpg.png);
      background-repeat: no-repeat;
      padding-left: 18px;
 }
 
 [href$='ppt']{
      background-image: url(doc-type-ppt.png);
      background-repeat: no-repeat;
      padding-left: 18px;
 }

Now any hyperlinks whose names end in doc, xls, jpg, or ppt will show the appropriate icon. The link below would display the doc icon in front of it.

<a href="files/report.doc">Annual Report</a>

Identifying External Links

The same technique can be used to identify links that lead to external sites.

[href^='http://']{
      background-image: url(external-site.png);
      background-repeat: no-repeat;
      padding-left: 18px;
}
<a href="http://www.google.com">Google</a>

Now any link beginning with http:// will have a special icon that informs the user that by clicking the link they will be take off of your site.

Posted in html/css, web | No Comments »

PHP5 Singleton Design Pattern

August 12th, 2009

The singleton design pattern allows you to insure that only one instance of an object exist at one time.  It is useful tool to prevent multiple connections to a database.  The skelton looks like this:

class MyClass{
     static private $instance = false;
 
     #This prevents the user of the class from creating an
     #instance of the object
     private function __construct(){}
     #This prevents the user from making a copy of the
     #instance
     private function __clone(){}
 
     #This is how the user gets an a single instance
     #of the class
     public function getInstance(){
           #if the static instance attribute is false
           #then create the first and only instance of
           #the class
           if(!MyClass::$instance){
                MyClass::$instance = new MyClass();
           }
           return MyClass::$instance;
     }
 
     #Here you can put all of your members and attributes
     #that your class needs.

}

To get the instance of the the class you will need to invoke the getInstance method using the double-colon notation.

$myVar = MyClass::getInstance();

Posted in php, programming | No Comments »