#my-element {
	background: #82c9ef; /* Old browsers */
	/* background gradient for cross-browser compatibility */
	background:  -moz-linear-gradient(top, #82c9ef 0%, #59ACD9 100%); /* FF3.6+ */
	background:  -webkit-gradient(linear, left top, left bottom, color-stop(0%, #82c9ef), color-stop(100%, #59ACD9)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #82c9ef 0%, #59ACD9 100%); /* Chrome10+,Safari5.1+ */
	background-image:  -ms-linear-gradient(top, #82c9ef 0%, #59ACD9 100%); /* IE10+ */
	background: -o-linear-gradient(top, #82c9ef 0%, #59ACD9 100%); /* Opera11.10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82c9ef', endColorstr='#59ACD9', GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #82c9ef 0%,#59ACD9 100%); /* W3C */
	/* border radius for cross-compatibility */
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}

Example (pure CSS3 and IE gradient filter)

So how do you fix it? SVG of course!

Interestingly enough, Microsoft has a website specifically designed for this problem. Using the their tool, you can specify your gradients and it will automatically generate the SVG source and CSS markup needed. In IE9, you can clear the filter, assuming you need a border-radius, and use the SVG CSS markup the site generates for you. This creates the exact same gradient you specify with pure CSS3 markup, but allows for a border-radius in IE9.

The beauty of this is that it is compatible with all modern browsers. The background gradient is fluid and there’s not a visible difference between the SVG markup and the CSS3 markup. You could, theoretically, use this as a workable solution for all desktop browsers. The only flaw I have found is noted below, under ‘Issues’.

/* you can remove all CSS code not needed since we're targeting IE */
#my-element {
	background: transparent none; /* reset the background, just in case */
	filter: ''; /* clear the filter since it's the reason for the border-radius missing */
	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc5ODEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiM4MkM5RUYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiM1OUFDRDkiIG9mZnNldD0iMSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c5ODEpIiAvPgo8L3N2Zz4=');
}

Example Fixed in IE9 (Removed cross-browser CSS3 and IE gradient filter)

Are there any issues with this method?

The only issue I have found so far is that the SVG markup kills performance in Chrome. I’m not sure if this because of the UI I have built specifically for tnyb.it’s new design or if it’s just a Chrome bug, but it brings Chrome to a hault. Until I can test more thoroughly, I’m only using the SVG markup in IE9 and sticking with CSS3 markup for all other browsers. I’m trying to move away from images as much as possible and only use them for logos/icons/etc. If it’s a background, there’s no reason you can’t use CSS these days.

For those without IE9, here’s a before and after

There is no CSS required for this plugin to work. The only CSS I recommend is setting the collapsible elements to ‘display: none’. This will keep the browser from rendering them initially causing that jittery appearance when the page first loads for the user.

You can view the code below, with an example following:

HTML:

<div id="content-container">
	<!-- subsection of content container accordion 1 and 2 -->
	<div class="sub-content">
		<!-- Clickable headers (the actual anchor tags) that trigger the accordion -->
		<div class="accordion-headers">
			<a href="#" class="clickable-header-accordion-1">Click Me</a>
			<a href="#" class="clickable-header-accordion-2">Click Me</a>
		</div>
		<!-- Accordion 1 header shows/hides this group -->
		<ul class="collapsible accordion1-collapsibles">
			<li>First Accordion :: Item 1</li>
			<li>First Accordion :: Item 2</li>
			<li>First Accordion :: Item 3</li>
			<li>First Accordion :: Item 4</li>
		</ul>
		<!-- Accordion 2 header shows/hides this group -->
		<ul class="collapsible accordion2-collapsibles">
			<li>Second Accordion :: Item 1</li>
			<li>Second Accordion :: Item 2</li>
			<li>Second Accordion :: Item 3</li>
			<li>Second Accordion :: Item 4</li>
		</ul>
	</div>
	<!-- // -->

	<!-- next subsection of content container accordion 1 and 2 -->
	<div class="sub-content">
		<!-- Clickable headers (the actual anchor tags) that trigger the accordion -->
		<div class="accordion-headers">
			<a href="#" class="clickable-header-accordion-1">Click Me</a>
			<a href="#" class="clickable-header-accordion-2">Click Me</a>
		</div>
		<!-- Accordion 1 header shows/hides this group -->
		<ul class="collapsible accordion1-collapsibles">
			<li>First Accordion :: Item 1</li>
			<li>First Accordion :: Item 2</li>
			<li>First Accordion :: Item 3</li>
			<li>First Accordion :: Item 4</li>
		</ul>
		<!-- Accordion 2 header shows/hides this group -->
		<ul class="collapsible accordion2-collapsibles">
			<li>Second Accordion :: Item 1</li>
			<li>Second Accordion :: Item 2</li>
			<li>Second Accordion :: Item 3</li>
			<li>Second Accordion :: Item 4</li>
		</ul>
	</div>
	<!-- // -->
</div>

Again, please note: The CSS that is recommended is setting the collapsible elements to ‘disaply: none;’. Aside from that, there is no additional CSS required other than what is needed for your design.

jQuery and Javascript:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.multi-accordion.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	var accordions = [
		{
			'parent'      : '.sub-content',                  // parent element containing the clickable header and collapsible
			'header'      : '.clickable-header-accordion-1', // clickable header
			'collapsible' : '.accordion1-collapsibles'        // collapsible element
		},
		{
			'parent'      : '.sub-content',                      // parent element containing the clickable header and collapsible
			'header'      : '.clickable-header-accordion-2',     // clickable header
			'collapsible' : '.accordion2-collapsibles',          // collapsible element
			'afterclose'  : function() { alert('after close'); },// callback that is fired onced the accordion is closed
			'afteropen'   : function() { alert('after open'); }  // callback that is fired after the accordion is opened
		}
	];
	$().accordion(accordions);
});
</script>

Working Example:

You can view a working example at http://jjis.me/jquery.multi-accordion.html

Download the jQuery Multi-Accordion plugin

XDA Forum Thread
Change Log on XDA

Downloads

0.1.4.10

• WretchedBlues Sweetened Theme [bottom status bar [all densities]]
  (Status bar mod credited to brianf21 over at XDA Developers)

0.1.3.27

• WretchedBlues Sweetened Theme [bottom status bar [all densities]]
  (Status bar mod credited to brianf21 over at XDA Developers)
• Revert from Sweetened to unModded WretchedBlues
• WretchedBlues unModded Theme [all densities]

0.1.2

• WretchedBlues Theme [no additional mods [all densities]]
• WretchedBlues Sweetened Theme [bottom status bar [all densities]]
  Status bar mod credited to brianf21 over at XDA Developers

0.1.1

• WretchedBlues Theme [no additional mods [all densities]]
• WretchedBlues Sweetened Theme [bottom status bar [all densities]]
  Status bar mod credited to brianf21 over at XDA Developers

0.1.1

• WretchedBlues Theme [no additional mods]
• WretchedBlues Theme 0.1.1 [no additional mods [all densities]]
• WretchedBlues Theme [Softkeys Mod]
• WretchedBlues Theme [Mapped Vol +- Keys]
• WretchedBlues Theme [Remove Softkeys Mod from theme]
• WretchedBlues Theme [Remove Key Mapping from theme]

Modders

Here are links to my most recent framework-res files

• WretchedBlues unModded
• WretchedBlues Sweetened

Screenies

MDPI Version (deprecated – no longer supported)

You will be redirect automatically in just a second.

Internet Explorer post standard jQuery fadeIn() method

In searching for a solution, I stumbled across a rather simple removeFilter() method someone created. This worked nice, but it meant you had to do chaining or a callback in order for the fadeIn() to work and then have the filter removed so the fonts would smooth. I’m lazy and I like to do everything in a single method if I can. So, let combine the fadeIn/fadeOut methods in to a single method and add the filter removal as well.

(function($) {
	 $.fn.removeFilter = function() {
		if ($.browser.msie) {
			x = this.get(0)
			x.style.removeAttribute("filter");
		 }
	 }
})(jQuery);

(function($){
	 $.fn.fadeToggle = function(options) {
		  options  = typeof(options) != 'undefined'?options:'';
		  speed    = typeof(options.speed)!='undefined'?options.speed:'';
		  easing   = typeof(options.easing)!='undefined'?options.easing:'';
		  callback = typeof(options.callback)!='undefined'?options.callback:'';
		  callback = function(callback) {
			   $(this).removeFilter();
			   callback;
		  }

		  this.animate(
			   {opacity: 'toggle'},
			   speed,
			   easing,
			   callback
		  );
	 }
})(jQuery);

Use:

// normal speed
$('#objectId').fadeToggle();

// set fade in/out speed
$('#objectId').fadeToggle({ speed: 'fast' });

Internet Explorer post fadeToggle() method

Using removeFilter() method as a standalone method

There may instances where you just need to remove the filter. In that case, the following works:

// as callback within fadeIn() method
$('#objectId').fadeIn('fast', function() {
        $(this).removeFilter();
});

// simply remove the filer on a specific object or objects
$('#objectId').removeFilter();

	/* ***********************************************************
	* START :::
	*	64bit encodes images for CSS embedding
        *      Alternatively, if you are not using PNGs, you can specify the Mime Type
        *      PNG is the default mime
	*********************************************************** */
	function data_url($file, $mime='') {  

		$mime = empty($mime) ? 'image/png' : $mime;

		$contents = file_get_contents($file);
		$base64   = base64_encode($contents);
		return ('data:' . $mime . ';base64,' . $base64);
	}
	/* ***********************************************************
	* END :::
	*********************************************************** */

In the CSS style sheet

You would need to either tell your server to process files with the .css extension or save your CSS files with the .php extension. It’s your call.

 body { background-image: url('<?php echo data_url('http://domain.com/images/file.png'); ?>') no-repeat; }

/* output code would be something like */
body { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAIAAACTCYeWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAI5JREFUeNrs2sENACEIRUF1LY0mqRbb2OQPHUwexIu7qlbq3JmJxZ8VPMorr7zy8NZeeXhrrzw8vJtXHh4eHh7eU6c8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8fMj4kAQPDw8P76lTHh7ezSsPb+2Vh7f2yiv/7/mS8dHlo2d3dyz+CTAAYEXI+4xG4igAAAAASUVORK5CYII=') no-repeat; }

Within HTML img tags

<img src="<?php echo data_url('http://domain.com/images/file.png'); ?>" border=0 />

<!-- output code would be something like --> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAIAAACTCYeWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAI5JREFUeNrs2sENACEIRUF1LY0mqRbb2OQPHUwexIu7qlbq3JmJxZ8VPMorr7zy8NZeeXhrrzw8vJtXHh4eHh7eU6c8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8fMj4kAQPDw8P76lTHh7ezSsPb+2Vh7f2yiv/7/mS8dHlo2d3dyz+CTAAYEXI+4xG4igAAAAASUVORK5CYII=" border=0 />

class System_Application {

	/* ***********************************************************
	* START :::
	*	Used for writing variables and arrays to screen
	*	for debugging. If array, it will place a line break
	*	after each value for easy on-screen viewing
	*
	*	$app->debug($var);
	*
	*	if var is empty, it will display "Hello World"
	*	$show defaults to true. setting this false will wrap the
	*	output in a div with a display:none so it won't show
	*	except if you view HTML source
	*********************************************************** */
	function debug($var=false,$show=true) {

		$display=(!$show)?' style="display: none;"':'';

		echo '<div class="light-font"'.$display.'>&nbsp;';
		if ( is_array($var) || is_object($var) ):
			foreach ($var as $key=>$val) :
				echo $key;
				if (is_array($val) || is_object($val)) :
					echo '<ul style="margin:0;padding:0 0 0 15px;list-style:none;">';
					foreach ($val as $key1=>$val1) :
						echo '<li>'.$key . '['.$key1.']' . ' = ';
							if (is_array($val1) || is_object($val1)) :
								$this->debug_array($val1);
							else :
								echo $val1.'</li>';
							endif;
					endforeach;
					echo '</ul>';
				else :
					echo ' = ' . $val.'<br />';
				endif;
			endforeach;
		else:
			echo $var;
		endif;

		if (empty($var)) :
			echo 'Hello World ';
		endif;

		echo '</div>';
	}

		function debug_array($var) {
			echo '<ul style="margin:0;padding:0 0 0 25px;list-style:none;">';
			foreach ($var as $key1=>$val1) :

				echo '<li>[' . $key1 . '] = ';

				if (is_array($val1) || is_object($val1)) :
					$this->debug_array($val1);
				else :
					echo $val1.'</li>';
				endif;

			endforeach;
			echo '</ul>';
		}

	/* ***********************************************************
	* END :::
	*********************************************************** */
}

$app = new System_Application;

Use:

/* an example of an icon array I have for twitter app icons */
	var $icon = array(
		'toolbar' => array(
			'logout'    => 'hi-res/Logout.png',
		     'compose'   => 'hi-res/Compose.png',
		     'reload'    => 'hi-res/Reload.png',
		     'scrolltop' => 'hi-res/Scroll-Top-Alt.png'
		),
		'tweet'     => array(
			'profile'   => 'hi-res/Profile.png',
			'reply'     => 'hi-res/Reply.png',
			'dm'        => 'hi-res/DM.png',
			'links'     => 'hi-res/Links.png',
			'favorite'  => 'hi-res/Favorite-Alt.png'
		)
	);

$app->debug($icon);

Results:

<p class="light-font">
        toolbar<ul style="margin:0;padding:0 0 0 15px;list-style:none;">
                        <li>toolbar[logout] = hi-res/Logout.png</li>
                        <li>toolbar[compose] = hi-res/Compose.png</li>
                        <li>toolbar[reload] = hi-res/Reload.png</li>
                        <li>toolbar[scrolltop] = hi-res/Scroll-Top-Alt.png</li>
                </ul>
        tweet<ul style="margin:0;padding:0 0 0 15px;list-style:none;">
                        <li>tweet[profile] = hi-res/Profile.png</li>
                        <li>tweet[reply] = hi-res/Reply.png</li>
                        <li>tweet[dm] = hi-res/DM.png</li>
                        <li>tweet[links] = hi-res/Links.png</li>
                        <li>tweet[favorite] = hi-res/Favorite-Alt.png</li>
                </ul>
</p>

Which translates to:

 
 
There ya go. That’s all there is too it.

When in debug mode, the error is displayed on screen in a fairly elegant manner. Barring CSS overrides and surrounding DOM elements, the error is output in a legible manner so that it can be easily read.

When errors are suppressed, the error is caught and handled elegantly and then emailed to the specified email address.

The one drawback: if there is a parse error in the file that includes the Error.Handling.Class.php file, it will not call this class. It will use PHP’s internal error handler and print the error to screen. If anyone knows a way around this, let me know and I will implement it.

Examples:

• Parse error in debug mode
• Exception errors in debug mode
• Both errors when suppressed

Code:

<?php
/*
	*	Script Name: Forms
	*	Author: JJ Jiles
	*	Website: http://jjis.me
	*	Version: 1
	*	Copyright (C) March 31 2010
	*
	*	Error Catching and Debugging
	*
*/

class Error_Debug {
	#
	# a couple of basic settings
	#
	# Display Errors?:
	#	True|False
	#	This is overridden should there be a $config->show_errors var
	#
	# Email To:
	#	email for the person who needs to receive the error
	#
	# Style Sheet:
	#	Set the link to the style sheet.
	#	Exclude from the server path ( http://domain.com )
	#
	# Suppressed Error Message
	#	This is the error message that will be displayed if error reporting is turned off
	#
	var $errors = array(
			'display'     => false,
			'email_to'    => 'email@domain.com',
			'email_from'  => 'email@domain.com',
			'style_sheet' => 'css/error-reports.css',
			'suppressed_error_message' => '<div align="center"><b style="font-size: 150%;">lnnl<b style="font-size: 200%;"> (-_-) </b>lnnl</b><br /><br />aw snap! something broke!</div>'
		);

	function Error_Debug() { return true; }

	/* ***********************************************************************
	* START :::
	*
	*	Initial error catching method
	*	This will determine if it's a parse error, or other
	*	types of errors.
	*
	*	PARSE:
	*		stops everything dead in its tracks. If display
	*		errors is allowed, then show the error message
	*		otherwise suppress the error and email it
	*
	*
	*	ALL OTHERS:
	*		Run the backtrace through the previous called
	*		functions and display the information for debugging
	*		If display errors is false, suppress the error
	*		and email the error
	*********************************************************************** */
	function catch_error($n='', $s='', $f='', $l='') {
		global $security, $config;	

		#
		# check to see if the $config object exists. if so, use it's setting
		$this->errors['display'] = (isset($config->show_errors) ) ? $config->show_errors : $this->errors['display'];

		#
		# if this is a parse error, we need to handle it differently
		# because it completely stops all PHP parsing, we catch it immediately
		# and display a simple output
		if( empty($n) && false === is_null($aError = error_get_last()) ) :

			#
			# suppress the error and show something entertaining
			if ( !$this->errors['display'] ) :
				echo $this->errors['suppressed_error_message'];

			#
			# for debugging, display the information about the error
			else :
				$err = error_get_last();
				$this->echo_css();
				echo "<div id=\"error-container\">"
					. "<div id=\"error-wrapper\">"
					. "<table id=\"primary-error\">\n"
					. "<tr><td class=\"left\"><strong>Error Type: </strong></td><td>" . $err['type'] . "</td></tr>\n"
					. "<tr><td class=\"left\"><strong>Message: </strong></td><td>" . $err['message'] . "</td></tr>\n"
					. "<tr><td class=\"left\"><strong>File: </strong></td><td>" . $err['file'] . "</td></tr>\n"
					. "<tr><td class=\"left\"><strong>On line: </strong></td><td>".$err['line']."</td></tr>\n</table>\n";

			endif;

		#
		# exception errors get sent to either backtracing or suppression
		else :

			#
			# backtrace the error and display the information for debugging
			if ( @$this->errors['display'] ) : $this->error_backtrace($n, $s, $f, $l);

			#
			# suppress the error and email it
			else : $this->error_thrown($n, $s, $f, $l); 

			endif;

			return true;

		endif;
		exit();
	}
	/* ***********************************************************************
	* END :::
	*********************************************************************** */

	/* ***********************************************************************
	* START :::
	*
	*	Backtraces through the errors and displays a nice
	*	It's pretty simple. Not a lot that needs explaining
	*
	*********************************************************************** */
	function error_backtrace($errno, $errstr, $error_file, $error_line) {
		global $css;

		$errorsThrown = debug_backtrace();

		#
		# we skip the first two errors
		# they are the initial calls from error catching
		# we can ignore them
		#
		if ( isset($errorsThrown[2]) ) :
			$errorThrown  = $errorsThrown[2];

			#
			# echo css
			$this->echo_css();

			#
			# this is the primary error that started it all
			echo "<div id=\"error-container\">"
				. "<div id=\"error-wrapper\">"
				. "<table id=\"primary-error\">\n"
				. "<tr><td class=\"left\"><strong>Error: </strong></td><td>" . $errstr . "</td></tr>\n"
				. "<tr><td class=\"left\"><strong>Line: </strong></td><td>" . $error_line . "</td></tr>\n"
				. "<tr><td class=\"left\"><strong>File: </strong></td><td>" . $error_file . "</td></tr>\n"
				. "<tr><td class=\"left\"><strong>Calling Function: </strong></td><td>" . $errorThrown['function'] . "</td></tr>\n"
				. "<tr><td class=\"left\"><strong>File Name: </strong></td><td>".$errorThrown['file']."</td></tr>\n"
				. "<tr><td class=\"left\"><strong>On line: </strong></td><td>".$errorThrown['line']."</td></tr>\n</table>\n";

			#
			# for additional debugging, loop through all previous function calls
			# this assists in debugging if you call a method multiple times
			# now we can figure out which instance caused the error
			#
			echo "<p>All previously executed functions: </p>\n";

			echo "<table id=\"previous-errors\" cellpadding=5 cellspacing=0 border=0 style=\"border: 1px solid #333;\">"
				. "<tr style=\"background: #d3d3d3;\">"
				. "<th>order</th>"
				. "<th>function name</th>"
				. "<th>file name</th>"
				. "<th>line</th>"
				. "</tr>";

			$count = 0;
			array_reverse($errorsThrown);

			#
			# loop thu the backtrace and output
			foreach ($errorsThrown as $error) :
				$is_db = (bool) strchr($error['file'], 'Database.php');
				if ($count > 1 && !$is_db) :
					echo '<tr>'
					. '<td>' . ($count-1) . '</td>'
					. '<td>' . $error['function'] . '()</td>'
					. '<td>' . $error['file'] . '</td>'
					. '<td>' . $error['line'] . '</td>'
					. '</tr>';
				endif;
				$count++;

			endforeach;

			#
			# close it all up
			echo '</table>'
				. '<p>&nbsp;</p>'
				. '</div></div>';
		exit();
		endif;
	}
	/* ***********************************************************************
	* END :::
	*********************************************************************** */

	/* ***********************************************************************
	* START :::
	*
	*	Backtraces through the errors and displays a nice
	*	It's pretty simple. Not a lot that needs explaining
	*
	*********************************************************************** */
	function error_thrown($errno, $errstr, $error_file, $error_line) {
		global $security;

		$errorThrown = debug_backtrace();
		$errorFunction = '';

		#
		# we skip the first two errors
		# they are the initial calls from error catching
		# we can ignore them
		#
		if (isset($errorThrown[2])) :
			$errorThrown = $errorThrown[2];
			$errorFunction = "\n".'Calling Function: '.$errorThrown['function'];

			$referer = (isset($_SERVER['HTTP_REFERER'])) ? $_SERVER['HTTP_REFERER'] : '';

			$server_r = '';
			$server_out = $_SERVER;
			foreach ($server_out as $key=>$val) {
				$server_r .= $key.' ::: '.$val."\n\r";
			}

			$message = '';
			$message .= "Error Thrown: [{$errno}] {$errstr}{$errorFunction}\n"
					. "File Name: {$error_file}\n"
					. "On line: {$error_line}\n"
					. "Server: " . $_SERVER['SERVER_NAME'] . "\n"
					. "URL: " . $_SERVER['REQUEST_URI'] . "\n"
					. "Referer: {$referer}"
					. "\n\n\n"
					. "Server Output: \n"
					. $server_r
					. "\n";

			if ( !error_log(
				$message, 1,
				$this->errors['email_to'],
				"From: " . $this->errors['email_from']
				)
			) :

				echo $this->errors['suppressed_error_message'];

			endif;
		endif;
	}
	/* ***********************************************************************
	* END :::
	*********************************************************************** */

	/* ***********************************************************************
	* START :::
	*
	*	echo the css style sheet so the error reporting is pretty
	*
	*********************************************************************** */
	function echo_css() {
		$css_url = 'http://' . $_SERVER['HTTP_HOST'] . '/' . $this->errors['style_sheet'];

		echo '<link rel="stylesheet" id="mainstyle" type="text/css" href="' . $css_url . '" />';
	}
	/* ***********************************************************************
	* END :::
	*********************************************************************** */

}

	# Upon All Errors, call the error handling function
	 	set_error_handler(array(new Error_Debug(),'catch_error'));

	# Register function to execute at the end of the script
		register_shutdown_function(array(new Error_Debug(),'catch_error'));

	# Hide error messages
		error_reporting(0);
?>

Some CSS styling for you:

#error-container { width: 100%; color: #333!important; position: relative; background-color: #f3f3f3; border-bottom: 1px dotted #333; }
#error-wrapper { font: 110%/0.8em arial!important; letter-spacing: 0.02em; width: 850px!important; background-color: #f3f3f3!important; padding: 10px!important; }
#error-wrapper a { color: #cc6600; }
#primary-error td { color: #333!important; padding: 4px!important; border: 1px solid #f3f3f3!important; }
#primary-error td.left { width: 120px; text-align: right; padding: 8px 4px 8px 8px!important; margin: 0 8px 1px 0!important; background-color: #d3d3d3!important; }
#error-wrapper p { text-align: left; padding: 18px; clear: both!important; }
#previous-errors th { color: #333!important; padding: 6px; }
#previous-errors td { color: #333!important; padding: 4px; border-top: 1px solid #666; border-right: 1px solid #666; }

Single List Mode: This is real simple. The user has a list of items to select from. When the select the item, the ‘selected’ class is added to that item. When they de-select the item, the ‘selected’ class is removed. This is tracked with a hidden input element with the id ‘ls_update_list_array’.

Dual List Mode: When the user views ‘Categories Selected’ (in this case, shown by default), they will see a list of categories currently selected. Under ‘All Available Categories’, they get a complete list of categories to selected from (in this case, minus those categories already selected). We want the user to be able to either add to the list of ‘Currently Selected’ by clicking on the ‘All Categories’ list, or remove items by clicking on them under ‘Currently Selected’. When they click on an item in either list, it is moved from list to the other. This is tracked with a hidden input element with the id ‘ls_update_list_array’.

ls_update_list_array: This is provided simply to allow for an easy form post action. Rather than having Javascript determine when the form is posted and then grabbing the list as an array and blah, blah, blah, you get the list automatically on post.

The HTML

<div id="tabs"><b class="active"><a href="#selected-categories">Currently Selected Categories</a></b><b class="inactive"><a href="#all-categories">All Available Categories</a></b></div>
<ul id="selected-categories" class="tab">
	<li id="item1" class="li-item selected">Item 1 text</li>
	<li id="item3" class="li-item selected">Item 3 text</li>
	<li id="item7" class="li-item selected">Item 7 text</li>
	<li id="item8" class="li-item selected">Item 8 text</li>
</ul>
<ul id="all-categories" class="tab">
	<li id="item1" class="li-item">Item 1 text</li>
	<li id="item2" class="li-item">Item 2 text</li>
	<li id="item3" class="li-item">Item 3 text</li>
	<li id="item4" class="li-item">Item 4 text</li>
	<li id="item5" class="li-item">Item 5 text</li>
	<li id="item6" class="li-item">Item 6 text</li>
	<li id="item7" class="li-item">Item 7 text</li>
	<li id="item8" class="li-item">Item 8 text</li>
</ul>

The CSS

You do not need to use this. You can use your own CSS.

#tabs { margin: 0 0 -2px 0; height: 45px; }
	#tabs b { display: block; float: left; margin: 0px; background: #fff; font-weight: normal; }
		#tabs b.active { background: #e0d3e3; }
		#tabs b.active a { color: #663366; }
		#tabs b.inactive a:hover { background: #f5edf6; }

	#tabs b a { display: block; color: #a989b0; padding: 10px; border: 1px solid #d3d3d3; text-decoration: none; }
	#tabs b a:hover { background: #f5edf6; }

.tab { clear: both; width: 100%; height: 250px; margin: 0; padding: 0!important; overflow: hidden; overflow-y: scroll; background: #fff; border: 1px solid #d3d3d3; }
	.tab li { font-weight: normal; padding: 10px!important; margin: 0!important; border-bottom: 1px dotted #d3d3d3; cursor: pointer; color: #663366; background-image: none!important; }
		.tab li:hover { background: #e0d3e3; }
	.tab li.selected { background: #956a99; color: #fff; }
		.tab li.selected:hover { background: #b592b8; color: #fff; }

The Javascript

bind events to the lists

Dual Lists Mode:

        if ( $('#selected-categories').length > 0 ) {
                ls.init({
                        variable      : '#selected-categories',  // the list that is updated to reflect user's selections
                        clickable     : 'li',                             // the element on which to bind the click event
                        update_list  : true,
                        constant     : '#all-categories'          // the list the user makes selections from
                });
        }

Single List Mode:

        if ( $('#selected-categories').length > 0 ) {
                ls.init({
                        variable      : '#selected-categories',  // the list that is updated to reflect user's selections
                        clickable     : 'li',                             // the element on which to bind the click event
                        update_list  : false
                });
        }

the code that makes it work

ls = {

	/* *************************************************************************
	*
	* start the initial binding of the list columns
	*
	************************************************************************* */
	init : function( params ) {

		var p = params;

		$(p._variable + " " + p._clickable).unbind('click');
		$(p._variable + " " + p._clickable).bind('click', function() {
			ls.move_left( p, $(this) );
		});

		if ( p._update_list ) {
			$(p._constant + " " + p._clickable).unbind('click');
			$(p._constant + " " + p._clickable).bind('click', function() {
				ls.move_right( p, $(this) );
			});
		}

		// update the list array field
		ls.track_selected_elements( p );

	},
	/* *************************************************************************
	* END :::
	************************************************************************* */

	/* *************************************************************************
	*
	* Moves selected element from the variable list to the constant list
	*
	************************************************************************* */
	move_left : function( p, obj ) {

		var p = p;

		if ( p._update_list ) {

			obj_id = $( obj ).attr('id');

			// this object exists in the other list
			// just remove it from existing list
			if ( $( p._constant ).find( '#' + obj_id ).length > 0 ) {
				obj.remove();
				$( p._constant ).find( '#' + obj_id ).removeClass('selected');

			} else {
				$(p._constant).append( obj );
				obj.removeClass( 'selected' );

				ls.sort_list( p, p._constant );
				obj.unbind('click');
				obj.bind('click', function() {
					ls.move_right( p, $(this) );
				});
			}

		} else {
			if ( obj.hasClass('selected') ) {
				obj.removeClass( 'selected' );
			} else {
				obj.addClass( 'selected' );
			}
		}

		// update the list array field
		ls.track_selected_elements( p );
	},
	/* *************************************************************************
	* END :::
	************************************************************************* */

	/* *************************************************************************
	*
	* Moves selected element from the contstant list to the variable list
	*
	************************************************************************* */
	move_right : function( p, obj ) {

		var p = p;

		obj_id = $( obj ).attr('id');

		// this object exists in the other list
		// just remove it from existing list
		if ( $( p._variable ).find( '#' + obj_id ).length > 0 ) {
			obj.remove();

		} else {
			$(p._variable).append( obj );
			obj.addClass( 'selected' );

			ls.sort_list( p, p._variable );
			obj.unbind('click');
			obj.bind('click', function() {
				ls.move_left( p, $(this) );
			});
		}

		// update the list array field
		ls.track_selected_elements( p );
	},
	/* *************************************************************************
	* END :::
	************************************************************************* */

	/* *************************************************************************
	*
	* When append to the list(s), the ordering is off. This alphabetically
	* sort the list items
	*
	************************************************************************* */
	sort_list : function ( p, obj ) {

		var parent = obj;

		var items = $(obj + ' ' + p._clickable).get();
		items.sort(function(a,b){
			var keyA = $(a).text();
			var keyB = $(b).text();

			if (keyA < keyB) return -1;
			if (keyA > keyB) return 1;
			return 0;
		});
			var ul = $(parent);
			$.each(items, function(i, li){
				ul.append(li);
			});
	},
	/* *************************************************************************
	* END :::
	************************************************************************* */

	/* *************************************************************************
	*
	* appends the list of selected LI elements in a hidden input box. will
	* allow you to get the values on form post without any jquery or javascript
	*
	************************************************************************* */
	track_selected_elements : function( p ) {
			var p = p;
			var ls_list_array = [];

			_class = ( p._update_list ) ? '' : '.selected';

			/* *******************************************
			* remove the old list to null it out        */
				$('#ls_update_list_array').remove();

			/* ******************************************
			* get the complete list of selected li's   */
				$(p._variable + ' li' + _class).each(function() { ls_list_array.push($(this).attr('id')) });

			/* *******************************************
			* append the array list as an hidden input  */
				var ls_input = '<input type="hidden"'
							+ 'id="ls_update_list_array" '
							+ 'name="ls_update_list_array" '
							+ 'value="' + ls_list_array + '" />'

				$(p._variable).append(ls_input)
	}
}

Dual List Example

• Item 1 text
• Item 3 text
• Item 7 text
• Item 8 text

• Item 2 text
• Item 4 text
• Item 5 text
• Item 6 text

Single List Eample

• Item 1 text
• Item 2 text
• Item 3 text
• Item 4 text
• Item 5 text
• Item 6 text
• Item 7 text
• Item 8 text