As it’s been pointed out to me, Nar is supposedly a dead ringer for me. What do you guys think?

Nar

Tori

Mick

I mean, I love Mashable, but come on.

Click the image to enlarge.

	/* ***********************************************************
	* 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

I’ve written a tabs script for jQuery that is short and to the point while still allowing for design flexibility and ease. There’s nothing to it. Simply establish the tabs settings with your appropriate IDs and classes and you’re good to go. I’ve used on a few occasions and it has yet to fail me.

As usual, however, let me know if you have problems. I’ve supplied complete code for HTML, CSS and, of course, the jQuery/JavaScript.

Let’s Start With 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">Item 1 text</li>
        <li id="item2" class="li-item">Item 3 text</li>
        <li id="item3" class="li-item">Item 7 text</li>
        <li id="item3" class="li-item">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="item3" class="li-item">Item 4 text</li>
        <li id="item1" class="li-item">Item 5 text</li>
        <li id="item2" class="li-item">Item 6 text</li>
        <li id="item3" class="li-item">Item 7 text</li>
        <li id="item3" class="li-item">Item 8 text</li>
</ul>

The CSS

/* *****
* tab header properties
***** */
#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 a { display: block; color: #a989b0; padding: 10px; border: 1px solid #d3d3d3; text-decoration: none; }
		#tabs b a:hover { background: #f5edf6; }

		#tabs b.active a { color: #663366; }
		#tabs b.inactive a:hover { background: #f5edf6; }

/* *****
* tab content
***** */
.tab { clear: both; width: 100%; height: 250px; margin: 0; padding: 0; overflow: hidden; overflow-y: scroll; background: #fff; border: 1px solid #d3d3d3; }
	.tab li { font-weight: normal; padding: 10px; border-bottom: 1px dotted #d3d3d3; cursor: pointer; color: #663366; }
	.tab li:hover { background: #e0d3e3; }

The jQuery Code

/* *************************************************
*
* configuration: settings for class & ids of tab
* elements
************************************************* */
var tabs = {
	default_tab    : 0,                    // the # of the tab that should be shown on page load
	// the tab itself
	tab : {
		wrapper   : '#tabs',          // parent that wraps around each tab header
		container : 'b',                // the container that wraps around the clickable tab text
		clickable : 'a',                 // the clickable tab text
		_class     : {
			active   : 'active',   // class for the active tab
			inactive : 'inactive' // class for all inactive tabs
		}
	},
	// the content for each tab
	content : {
		_class  : '.tab'                 // class of the content for the tabs
	},

	/* *************************************************
	*
	* bind tabbing events
	*
	************************************************* */
	init : function() {
		$( tabs.tab.wrapper + ' ' + tabs.tab.clickable ).click(function() {
			var id 	= $(this).attr('href');
			var par 	= $(this).parent();

			// hide all tab content
			$.each( $( tabs.content._class ), function(i) {
				$( this ).css( 'display','none' );
			});

			// display the tab content chosen
			$( id ).css('display','block');

			// show the tab as clicked
			$.each( $( tabs.tab.wrapper + ' ' + tabs.tab.container ), function() {
				$( this ).removeClass( tabs.tab._class.active );
				$( this ).addClass( tabs.tab._class.inactive );
			});

			par.removeClass( tabs.tab._class.inactive );
			par.addClass( tabs.tab._class.active );

			return false;
		});

		// hide all tab content except the first tab
		$.each( $( tabs.content._class ), function(i) {
			if (i > tabs.default_tab) {
				$( this ).css('display','none');
			}
		});
	}

};

Now Initiate the Code

$(document).ready(function() {
        /* ************************************
        * only initiate the tab function if tabs are preset */
	        if ( $('#tabs').length > 0 ) {
		        tabs.init();
	        }
});

There you go. That’s all there is to it. The code is definitely portable and you could make it a plugin yourself if you wanted. I will get it setup to allow multiple sets of tabs per page and update when it’s completed.

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

I got sick of coming across classes that didn’t have everything I needed, or didn’t do it correctly. One of my biggest problems was an inability to nest query calls within another query result’s output.

Example:

<?php

// main query
// gets a list of companies from the companies table
$a = "SELECT id, company_name FROM companies";
$a = $db->query($a);

while  ($aa = $db->fetch_object($a) ) :

     echo '<div class="company_name">' . $aa->company_name . '</div>';

     // get the contacts for each company
     $b = "SELECT contact_name, phone1 FROM contacts WHERE company_id = $aa->id"; // because we've already used $a, we can't use it again during $a's output
     $b = $db->query($b);

     // output all contacts for the each company
     while ( $bb = $db->fetch_object($b) ) : // the same thing as $a, we can not use $aa again during its output
          echo '<div class="contact_name">' . $bb->contact_name . '</div>';
          echo '<div class="contact_phone">' . $bb->phone1 . '</div>';
     endwhile;

endwhile;

?>

With this class, that is not a problem. The only requirement is that you can’t name your $sql and $results ($row) variables the same (noted in the code above). Other than that, there’s nothing to it. It’s just a way to provide clean, and efficient database interaction.

Database.Core.php Code

• Updated 06-23-2010:

  • Renamed main database class file to Database.Core.php
  • Removed the $connection settings and placed them in the Database.Connect.Config.php file. Helps keep hands out of the core file.
  • show_mysql_error(): edited so it only receives and passes the original SQL statement, to the error_backtrace() method, upon error.
  • query(): no longer fires the die() function and close_db() method. Send the erroring SQL statement to show_mysql_error() method for handling of error output.
  • multi_query(): no longer fires the die() function and close_db() method. Send the erroring SQL statement to show_mysql_error() method for handling of error output.
  • error_backtrace(): replaced previous method with cleaner code. The error now has formattting for easier readability.

<?php
/* **********************************************************************
*
* 	DB connection variables
*	Must be set in order to establish a connection to the database
*
********************************************************************** */

$connection = (object) array();
require ( 'Database.Connect.Config.php' );

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

/* **********************************************************************
*	DatabaseFunctions is a class created to manage database functions
*
*	The class manages all database interraction for purpose of allowing certain things to be
*	turned on and off.  An example would be Error Reporting.  Once the application is on the live
*	server, we can set $config->ShowErrors to false and error reporting for database erros will no
*	be shown.
*
*	This is real simply to use
*
*	Examples:
*
**********
*
*		Get number of rows returned in a query (you can also nest this:
*			$sql = "SELECT fieldA, fieldB FROM tableA"; // would return 4 rows
*			$sql = $db->fetch_object($sql);
*			$rows = $db->num_rows();
*			echo $rows; // 4
*
*		Nested num_rows();
*			$a = "SELECT fieldA FROM tableA"; // would return 2 rows
*			$a = $db->fetch_object($a);
*			$a_rows = $db->num_rows();
*			echo $a_rows; // 2
*
*			while ($aa = $db->fetch_object($a) ) :
*				$b = "SELECT fieldA FROM tableA"; // would return 6 rows
*				$b = $db->fetch_object($b);
*				$b_rows = $db->num_rows();
*					echo $b_rows; // 6
*			endwhile;
*
*
**********
*
*
*		Results as Object:
*			$sql = "SELECT fieldA, fieldB FROM tableA";
*			$sql = $db->fetch_object($sql);
*
*			while ($row = $db->fetch_object($sql) ) :
*				echo $row->fieldA . ': ' . $row->fieldB;
*			endwhile;
*
*
**********
*
*
*		Results as Array:
*			$sql = "SELECT fieldA, fieldB FROM tableA";
*			$sql = $db->fetch_object($sql);
*
*			while ($row = $db->fetch_array($sql) ) :
*				echo $row['fieldA'] . ': ' . $row['fieldB'];
*			endwhile;
*
*
**********
*
*
*		Return value of a row or field in a row ( uses the rather inefficient mysql_fetch_row() )
*			$sql = "SELECT fieldA, fieldB FROM tableA";
*			$val = $db->fetch_row(1);        // would return fieldB's value
*				-- OR --
*			$val = $db->fetch_row('fieldA'); // would obviously return fieldA's value
*
*
**********
*
*
*		Return value of a query more efficiently (avoids the inefficient mysql_fetch_row() function)
*			$sql = "SELECT fieldA FROM tableA";
*			$fieldA = $db->fetch_value($sql); // would return fieldA's value
*
*
**********
*
*
*		 Return the query result set as an array:
*			$sql = "SELECT fieldA, fieldB FROM tableA"; // returns 4 rows
*			$results = $db->to_array($sql);
*
*			$results[0]['fieldA'] = 'valueA 1';
*			$results[0]['fieldB'] = 'valueB 1';
*
*			$results[1]['fieldA'] = 'valueA 2';
*			$results[1]['fieldB'] = 'valueB 2';
*
*			$results[2]['fieldA'] = 'valueA 3';
*			$results[2]['fieldB'] = 'valueB 3';
*
*			$results[3]['fieldA'] = 'valueA 4';
*			$results[3]['fieldB'] = 'valueB 4';
*
*
********************************************************************** */

class System_Database {

	# set whether errors should be displayed or not
	# probably want to turn off once site is live
	var $displayErrors = false;

	/* ****************************************************************
	*
	* Establish connection to the database
	* Be sure to set the connection info above
	*
	**************************************************************** */
	function connect() {
		global $connection;
		$connection->mysqlLink = mysql_connect($connection->host, $connection->user, $connection->password);

		# The connection failed for some reason
		if ( !isset($connection->mysqlLink) ) :
			die("Error connecting to the server");

		# The connection is good so lets get the Application Config Settings
		# and create the $config object
		elseif ( isset($connection->mysqlLink) ) :
			$db_selected = mysql_select_db($connection->db);

		endif;
	}
	/* ****************************************************************
	* end :::
	**************************************************************** */

	/* ****************************************************************
	*
	* Run the query
	*
	**************************************************************** */
	function sqlId() {
		$id = rand();
		$uniqueId[] = 'sql' . $id;
		$uniqueId[] = 'row' . $id;
		return $uniqueId;
	}
	/* ****************************************************************
	* end :::
	**************************************************************** */

	/* ****************************************************************
	*
	* If $showErrors is set to true or $config->ShowErrors
	* is set and is true display the error that has occurred
	*
	**************************************************************** */
	function show_mysql_error( $sql ) {
		$this->error_backtrace( $sql );
		die();
	}
	/* ****************************************************************
	* end :::
	**************************************************************** */

	/* ****************************************************************
	*
	* Run the query
	*
	**************************************************************** */
	function query( $sql ) {
		$this->result=mysql_query( $sql );
		if ( !$this->result ) :

			$this->show_mysql_error( $sql );

		else :

			return $this->result;

		endif;
	}
	/* ****************************************************************
	* end :::
	**************************************************************** */

	/* ****************************************************************
	*
	* Connect to the server using the mysqli extension
	* This is used automatically during multi_query()
	*
	**************************************************************** */
	function mySqliConnect() {
		global $connection;
		$connection->mySqli = new mysqli($connection->host, $connection->user,  $connection->password, $connection->db);
		return $connection->mySqli;
	}
	/* ****************************************************************
	* end :::
	**************************************************************** */

	/* ****************************************************************
	*
	* Close the mysqli connection once we have finished
	* using the multi_query() method
	*
	**************************************************************** */
	function mySqliClose() {
		global $connection;
		mysqli_close($connection->mySqli);
	}
	/* ****************************************************************
	* end :::
	**************************************************************** */

	/* ****************************************************************
	*
	* Execture the multi-query
	*
	**************************************************************** */
	function multi_query( $sql ) {

		$mysqli = $this->mySqliConnect();

		$this->result=mysqli_multi_query( $mysqli, $sql );

		if ( !$this->result ) :
			$this->show_mysql_error( $sql );
		else :
			$this->mySqliClose();
			return $this->result;
		endif;
	}
	/* ****************************************************************
	* end :::
	**************************************************************** */

	/* ****************************************************************
	*
	* Returns the results of the query as an object
	*
	* Example:
	*	$sql = "SELECT fieldA, fieldB FROM tableA";
	*	$sql = $db->fetch_object($sql);
	*
	*	while ($row = $db->fetch_object($sql) ) :
	*		echo $row->fieldA . ': ' . $row->fieldB;
	*	endwhile;
	*
	**************************************************************** */
	function fetch_object( $sql ) {
		$uniqueIdentifier=rand();
		$$uniqueIdentifier=mysql_fetch_object( $sql );
		return $$uniqueIdentifier;
		unset( $$uniqueIdentifier );
	}
	/* ****************************************************************
	* end :::
	**************************************************************** */

	/* ****************************************************************
	*
	* Returns the results of the query as an array
	*
	* Example:
	*	$sql = "SELECT fieldA, fieldB FROM tableA";
	*	$sql = $db->fetch_object($sql);
	*
	*	while ($row = $db->fetch_object($sql) ) :
	*		echo $row['fieldA'] . ': ' . $row['fieldB'];
	*	endwhile;
	*
	**************************************************************** */
	function fetch_array( $sql ) {
		$uniqueIdentifier=rand();
		$$uniqueIdentifier=mysql_fetch_array( $sql );
		return $$uniqueIdentifier;
		unset( $$uniqueIdentifier );
	}
	/* ****************************************************************
	* end :::
	**************************************************************** */

	/* ****************************************************************
	*
	* Returns the number of rows returned in a query
	*
	**************************************************************** */
	function num_rows($result='') {
		$uniqueIdentifier=rand();
		if (empty($result)) $result = $this->result;
		$$uniqueIdentifier=mysql_num_rows( $result );
		return $$uniqueIdentifier;
		unset( $$uniqueIdentifier );
	}
	/* ****************************************************************
	* end :::
	**************************************************************** */

	/* ****************************************************************
	*
	* Returns the number of rows affected by a query
	*
	**************************************************************** */
	function rows_affected($result='') {
		$uniqueIdentifier=rand();
		if (empty($result)) $result = $this->result;
		$$uniqueIdentifier = mysql_rows_affected( $result );
		return $$uniqueIdentifier;
		unset( $$uniqueIdentifier );
	}
	/* ****************************************************************
	* end :::
	**************************************************************** */

	/* ****************************************************************
	*
	* Runs the mysql_result() function, but a little differently
	*
	* if $this->fetch_row(1), it will return the second field
	* of the first row
	*
	* if $this->fetch_row('field_name'), it will return the value
	* for 'field_name' in the first row
	*
	**************************************************************** */
	function fetch_row ( $fieldName ) {
		if (is_numeric( $fieldName )) {
			$fieldValue=mysql_result( $this->result, $fieldName );
		} else {
			$fieldValue=mysql_result( $this->result, 0, $fieldName );
		}
		return $fieldValue;
	}
	/* ****************************************************************
	* end :::
	**************************************************************** */

	/* ****************************************************************
	*
	* Returns the value of the specified field, in the specified
	* row.
	*
	* If no field or row is specified, it will default to first
	* row, first field
	*
	**************************************************************** */
	function fetch_value ( $sql='', $fieldName='', $row='' ) {
		$i=0;
		$fieldValue = false;

		if (empty($fieldName)) { $fieldName = 0; }
		if (empty($row)) { $row = 0; }
		$ret = array();
		$sql = $this->query($sql);
		if ($this->num_rows() > 0) {
			while ($rec = mysql_fetch_array( $sql )) {
				for ($a=0; $a < count($rec); $a++) {
					$ret[$i] = $rec;
				}
				$i++;
			}

			$fieldValue=$ret[$row][$fieldName];
		}

		return ($fieldValue);
	}
	/* ****************************************************************
	* end :::
	**************************************************************** */

	/* ****************************************************************
	*
	* Returns the results of the query as an array
	*
	* Example:
	*	$sql = "SELECT fieldA, fieldB FROM tableA"; // returns 4 rows
	*	$results = $db->to_array($sql);
	*
	*	$results[0]['fieldA'] = 'valueA 1';
	*	$results[0]['fieldB'] = 'valueB 1';
	*
	*	$results[1]['fieldA'] = 'valueA 2';
	*	$results[1]['fieldB'] = 'valueB 2';
	*
	*	$results[2]['fieldA'] = 'valueA 3';
	*	$results[2]['fieldB'] = 'valueB 3';
	*
	*	$results[3]['fieldA'] = 'valueA 4';
	*	$results[3]['fieldB'] = 'valueB 4';
	*
	**************************************************************** */
	function to_array ( $sql='' ) {
		$i=0;
		$ret = array();
		$sql = $this->query($sql);
		while ($row = mysql_fetch_assoc( $sql )) {
			for ($a=0; $a < count($row); $a++) {
				$ret[$i] = $row;
			}
			$i++;
		}
		return ($ret);
	}
	/* ****************************************************************
	* end :::
	**************************************************************** */

	/* ****************************************************************
	*
	* closes the database connection
	*
	* PHP nowadays does a really good job of trashing these connection
	* automatically. However, just to be safe, I typically call this
	* method in an include that is loaded after everything else
	*
	**************************************************************** */
	function close_db() {
		global $connection;
		if ($connection->mysqlLink) :
			mysql_close( $connection->mysqlLink );
		endif;
	}
	/* ****************************************************************
	* end :::
	**************************************************************** */

	/* ****************************************************************
	*
	* Will format system errors and display them
	*
	**************************************************************** */
	function error_backtrace( $sql ) {

		$errorsThrown = debug_backtrace();
		$errorThrown = $errorsThrown[2];

		echo "
		<style>
			#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; }
		</style>
		";

		echo "<div id=\"error-container\">"
			. "<div id=\"error-wrapper\">"
			. "<table id=\"primary-error\">\n"
			. "<tr><td class=\"left\"><strong>Error: </strong></td><td>Database error</td></tr>\n"
			. "<tr><td class=\"left\"><strong>SQL: </strong></td><td>" . $sql . "</td></tr>\n"
			. "<tr><td class=\"left\"><strong>MySQL Error: </strong></td><td>" . mysql_error() . "</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"
			. '<p>&nbsp;</p>'
			. '</div></div>';
	}
	/* ****************************************************************
	* END :::
	**************************************************************** */

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

$db = new System_Database;
?>

Database.Connect.Config.php Code

used for establishing the connection information for your database. this file is automatically included in the Database.Core.php file. just drop it in the same folder and you’re good to go.

<?php
	$connection->host           = 'localhost';
	$connection->user           = 'user_name';
	$connection->password    = 'your_password';
	$connection->db             = 'your_database';
?>

The problem with the standard accordion is that they require the child and header elements to be nested within a parent.

Example:

<div id="accordion-wrapper">
     <h1>Clickable Header 1</h1>
          <p>Collapsible child 1</p>
     <h1>Clickable Header 2</h1>
          <p>Collapsible child 2</p>
     <h1>Clickable Header 3</h1>
          <p>Collapsible child 3</p>
</div>

Where this limits us in our design is when we want to add some extra style to the accordion list. I tend to use lists when building a list. So, if we take the code above and wrap each header and collapsible child with an <li>, we would completely break the accordion.

Let’s break it down

The standard jQuery accordion would prohibit this because the layout would throw off the jQuery plugin. The plugins look at the wrapping element (in this case “accordion-wrapper”). It then finds all header (<h1>) elements and binds the click event. This click event finds the first occurrence of the collapsible element (<p>) and will either expand or collapse it depending on it’s current state.

Let’s fix this

With the following script, you simply specify what the header class is going to be and what the collapsible class is going to be. What this allows us to do is place our accordion headers and collapsible elements within structured list, thus allowing more design/layout freedom.

Example:

<ul id="accordion-list">
	<li class="accordion-item">
		<h1 class="accordion-header">Clickable Header 1</h1>
		<p>Just placed here for an example of how we don't have our header and collapsible elements stacked</p>
			<ul class="accordion-collapsible">
				<li>Collapsible child 1</li>
				<li>Collapsible child 2</li>
				<li>Collapsible child 3</li>
				<li>Collapsible child 4</li>
			</ul>
	</li>
	<li class="accordion-item">
		<h1 class="accordion-header">Clickable Header 2</h1>
		<p>Just placed here for an example of how we don't have our header and collapsible elements stacked</p>
			<ul class="accordion-collapsible">
				<li>Collapsible child 1</li>
				<li>Collapsible child 2</li>
				<li>Collapsible child 3</li>
				<li>Collapsible child 4</li>
			</ul>
	</li>
	<li class="accordion-item">
		<h1 class="accordion-header">Clickable Header 3</h1>
		<p>Just placed here for an example of how we don't have our header and collapsible elements stacked</p>
			<ul class="accordion-collapsible">
				<li>Collapsible child 1</li>
				<li>Collapsible child 2</li>
				<li>Collapsible child 3</li>
				<li>Collapsible child 4</li>
			</ul>
	</li>
</ul>

The jQuery Code:

$(document).ready(function() {
	/* ***
	* REQUIRED
	* set you classes accordingly below. */
	var accordion = {
		parent      : '.accordion-item',        // parent element containing the clickable header and collapsible
		header      : '.accordion-header',      // clickable header
		collapsible : '.accordion-collapsible'  // collapsible element
	};

	/* ***
	* hide all collapsible items */
	$(accordion.collapsible).css('display','none');

	/* ****
	* bind the accordion header click event */
	$(accordion.header).unbind('click');
	$(accordion.header).bind('click', function() {
		var header_obj      = $(this);          // The current header
		var next_parent_obj = $(this).parent(); // The parent of the header

		var content_obj = $(this).siblings(accordion.collapsible); // find the collapsible element

		if(content_obj.is(":hidden")) {
			// collapse all collapsible elements
			next_parent_obj.siblings(accordion.parent).each(function() {
				$(this).children(accordion.collapsible).slideUp('fast');
			});
			// show the content of the clicked header
			content_obj.slideDown('fast');
		} else {
			content_obj.slideUp('fast');
		}
	});
});

Seeing it in action

• Clickable Header 1

  Just placed here for an example of how we don’t have our header and collapsible elements stacked

  • Collapsible child 1
  • Collapsible child 2
  • Collapsible child 3
  • Collapsible child 4

• Clickable Header 2

  Just placed here for an example of how we don’t have our header and collapsible elements stacked

  • Collapsible child 1
  • Collapsible child 2
  • Collapsible child 3
  • Collapsible child 4

• Clickable Header 3

  Just placed here for an example of how we don’t have our header and collapsible elements stacked

  • Collapsible child 1
  • Collapsible child 2
  • Collapsible child 3
  • Collapsible child 4