JS: MelloBar // HelloBar Rip Off via jQuery

mellobar.jquery.js

/*
Author: Justin Obney
Website: http://justinobney.com
Example: http://jsfiddle.net/justinobney/aeyqR/
*/

;
(function($, window, undefined) {
  var pluginName = 'mellowBar',
    document = window.document,
    defaults = {
      message: "Hello Mello",
      css: {}
    };

  function Plugin(element, options) {
    this.element = element;
    this.options = $.extend({}, defaults, options);

    this._defaults = defaults;
    this._name = pluginName;

    this.init();
      
    applyCSS();
  }

  Plugin.prototype.init = function() {
    // Place initialization logic here
    // You already have access to the DOM element and the options via the instance, 
    // e.g., this.element and this.options
    var mello_bar_HTML = [
        '<div style="display: block; " class="mellobar-wrapper">', 
        '<div class="mellobar-container texture">', 
        '<h2>' + this.options.message + '</h2>', 
        '<div class="mellobar-shadow"></div>', 
        '</div>', 
        '</div>'
    ];

    mello_bar_compiled = mello_bar_HTML.join('');

    $(this.element).prepend(mello_bar_compiled);
  };

  // A really lightweight plugin wrapper around the constructor, 
  // preventing against multiple instantiations
  $.fn[pluginName] = function(options) {
    return this.each(function() {
      if (!$.data(this, 'plugin_' + pluginName)) {
        $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
      }
    });
  };

  function applyCSS() {

    $('.mellobar-container').css({
      'font-family': 'Georgia,Times New Roman,Times,serif',
      'background': '#0072BD',
      'color': 'white',
      'font-size': '14px',
      'font-weight': 'normal',
      'height': '30px',
      'line-height': '30px',
      'margin': '0',
      'overflow': 'visible',
      'padding': '0',
      'position': 'relative',
      'text-align': 'center',
      'width': '100%',
      'z-index': '1000',
      'border-bottom-width': '3px',
      'border-bottom-style': 'solid',
      'border-bottom-color': '#000'
    });
      
      $('.mellobar-container.texture').css({
      'background-image': 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAcCAYAAADm63ZmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABJ9JREFUeNrEF0lIbEew582Iz+DMOBMi4hJhxviHzEHEJehFQTRowO3gSUE8KriACoKCFxERt6MgevCgoBcJ4hZQA4KoBz24IXrxYAT54ncl6piq/vaz33vdb35O/0FNVVdXV1dXV1XXEEKIivD29qby9OzsLMU8ZGRk0PmTkxM1FAppaxCvrq5qcoxXXl6u08nP8WMTz7gxwubmpkkJw3V1dSaeaOOGhgaKR0dHVdHBEcbGxnRjTSYrK8u0iewU/OL6+nqTjHED4YYc3dHRoXZ2dopkiOWJjQa3t7dLDQ9nhOiqRM5Q0CogCP/5/X5is9lIS0uLxgsGg2R6epr4fD46h9/w8DBdi2OE1tZWOkbIzs6mPKYbaYgxjWY6eHx+fq6NTadzOp0Up6ena9YnJCRITyq6XpHHZLK1tbX6NSIXypRVVVWpR0dHGn9tbU2j7+7uNNrlckn1GQ3iDy6MqbKyMk24urpap+D+/t7SS7zSiooKy1hbXl4Wrh0YGPjwlKyWpKamhk0ChPX1dYofHx+/KfNEe42MjKgFBQUfdcootLGxQXF3dzfFCwsLOoV9fX3COoaQn59vmcW3t7dCg3ldtndFBOJDyySWkSx7eB77GI/nG+V4GaNO/mM8MJhAPBJaEtCgq6srIioPRiP5dBbJ4QdBTxITE01Gi9bwB7++via9vb2EiNJ8ampKmubhstUYvNvb22FlGS8lJUVfEhjwZf97ZSRhNUWWZVtbW0JPiQoig8XFReFjbqXn5ubmQw5/enp6TArGx8elhbS5uVlaJgYHBy2v0wgRERHm7KM/kuziMy/cZ5VZIjn8np+fCRhF6Z2dHZKZmUlppaurS7cIH022qKamRrcJxJCm2AjGDSsrKy1LCcQQcTgc2npoICkfqjpdoDY1Nam5ubmWrYYsLhiOjIyUXheLS1GcGYsp8hx84UJaVVXy9PSkc/vFxQXFhYWFJo8wGtsc/vqwVrE5aCQpb2ZmhsTGxgqv+/T0lLZFbFJnORggzLD/04p8S9M4Pz8vlVWMFTouLk74hCCGGqZLAhZ/CFDDdLHz8PBgiic+/kpKSjQexp8uOVj/YpUtGJAvLy/Sd0+0RvY+GrNbpJO+fRMTE2RpackD7egnEAwA+AD8u7u7P09OTrrQIFwEz48bxFOh0AX29/dRJgXGyXNzc24u/pzHx8e/APkrk9nb20tG/WzjoaGhH2DOD3EUPDg48B0eHqaAXDK8wT8CtjFPOS4vL3/zer2/Ax0DteP59fXVZrfbv8B4BZRtgJwdNkz3eDwlkAw/QY35F+RwlzuAv9va2v7q7+9Xzs7OgvHx8X/A2kSYf3o/+D0cZMvtdv+ZlJRkg8PjYUoBMLIfUQb+Rz4oirIL9CxtXaBGKFDV3Xl5eR7Y0A4tLwEBBZq815WVlc9FRUWfoVLb4A+Fq7S01AvzDurmrzIh2PA6JibmCk8J3nWCQd6I96oYCAQUkA8B/gKHu3y/smjwnjctLS0SvASu+epCkMED/kOssut7/VsmWNigZcgRpW1UVFSOaCHKS9reHH6z6Ohotbi4WOM3NjYajcoRGfmfAAMA/0VH1CJk/I4AAAAASUVORK5CYII=)',
      'background-repeat': 'repeat-x',
      'background-position': '0 3px'
    });

    $('.mellobar-wrapper').css({
      'height': '30px',
      'margin': '0 0 10px',
      'overflow': 'visible',
      'padding': '0',
      'position': 'relative',
      'width': '100%',
      'z-index': '2'
    });

    $('.mellobar-shadow').css({
      'position': 'absolute',
      'bottom': '-8px',
      'left': '0',
      'width': '100%',
      'height': '8px',
      'line-height': '8px',
      'overflow': 'hidden'
    });

    $('.mellobar-wrapper H2').css({
      'font-size': '20px'
    });
  }

}(jQuery, window));

/*
----- usage: -----
$('body').mellowBar();

$('#posBottom').mellowBar({
    message: 'Some Other Message'
});
​------------------
*/