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: #333333;
    color: #EEEEEE;
    height: 28px;
    line-height: 28px;
    padding: 0 10px;
    width: 100%
}

JavaScript

$ = 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;
            }

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