Hide WP admin bar

jQuery widget to hide the default Wordpress admin bar and then show it when the user hovers over a button

by hoss

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<div id="wpadminbar">This admin bar should show only if the user hovers over the 'Admin bar &raquo;' button</div>

CSS

body {
    margin: 0;
}
#wpadminbar {
    background-color: #373737;
    color: #CCCCCC;
    height: 28px;
    line-height: 28px;
    padding: 0 10px;
    width: 100%
}

JavaScript

/**
 * @package:		WordPress
 * @subpackage:		Utilities Plugin
 * @Description:	Custom jQuery UI 'adminBar' widget for implementing a sliding admin bar
 */

$ = jQuery.noConflict();

$(function(){
	
	$.widget('DDUI.adminBar', {
	
		options : {
		
			text:				'Admin bar &raquo;',	// The text to display in the button
			text_direction:		'ltr',					// The direction of the text ('ltr' or 'rtl')
			button_position:	'left',					// Where to place the button ('right' or 'left')
			button_duration:	500,					// The lenght of time (in miliseconds) to take to show/hide the 'Show admin menu' button
			bar_duration:		500,					// The lenght of time (in miliseconds) to take to show/hide the admin menu
			show_time:			5000					// The length of time (in miliseconds) to show the admin bar for
			
        }, // options
	
		/**
		 * Constructor
		 */
		_create : function(){
		
			/** Ensure that this is a valid '#wpadminbar' element */
			this._validate_element();
			if(!this.valid){
				return false;
			}
			
			this._can_show(true);
			
			/** Initialise the layout of the widget */
			this._create_layout();
			
			/** Initialise the events which can be triggered by this widget */			
			this._create_events();
			
		}, // _create
		
		/**
		 * Validate the selector that this instance of 'adminBar' was called upon and ensure it is a Wordpress admin bar
		 */
		_validate_element : function(){
		
			this.valid = (this.element.attr('id') === 'wpadminbar') ? true : false;
			
		}, // _validate_element
		
		/**
		 * Create the layout of the widget
		 */
		_create_layout : function(){
		
			/** Hide the receiver checkbox for this widget */
			this.element.hide();
			
			/** Create the relevant DOM objects for the switch button */
            this.button = $('<div>').addClass('dd-show-admin-bar');
			this.button_text = $('<span>').addClass('text');
			
            /** Insert the admin bar button in to the DOM */
           ...