Popup Widget

by StriplingWarrior

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css">
<div>
<ul><li>
    <div class="tnl-popup-menu">
        <a href="#" class="tnl-popup-menu-icon">
            <span class="ui-icon-pencil ui-icon ui-state-default"></span>
        </a>
        <div>
            <a href="#" class="tnl-popup-menu-icon">
                <span class="ui-icon-pencil ui-icon ui-state-active"></span>
            </a>
            <div>
            Here's some static content
                <div class="tnl-popup-widget">
                    <a href="/gh/get/response.html/zalun/jsFiddleGithubDemo/tree/master/Demo/">
                        <span class="ui-icon-pencil ui-icon ui-state-default"></span>
                    </a>
                    <div>
                        <h4>Test</h4>
                        <div>Loading content...</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    This is a test
</li>
<li>
    <div class="tnl-popup-menu">
        <a href="#" class="tnl-popup-menu-icon">
            <span class="ui-icon-pencil ui-icon ui-state-default"></span>
        </a>
        <div>
            <a href="#" class="tnl-popup-menu-icon">
                <span class="ui-icon-pencil ui-icon ui-state-active"></span>
            </a>
            <div>
            Here's some static content
                <div class="tnl-popup-widget">
                    <a href="/gh/get/response.html/zalun/jsFiddleGithubDemo/tree/master/Demo/">
                        <span class="ui-icon-pencil ui-icon ui-state-default"></span>
                    </a>
                    <div>
                        <h4>Test</h4>
                        <div>Loading content...</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    This is a test
</li><li>
    <div class="tnl-popup-menu">
        <a href="#" class="tnl-popup-menu-icon">
            <span...

CSS

body > div {height: 200px; border: 1px solid black; position:relative; z-index: 2;}
.tnl-popup-menu {position:relative; display:inline-block; height: 1em; z-index: 1; /*IE6-7 hacks*/zoom:1; *display: inline; _height: 1em;}
.tnl-popup-menu > a {display:inline-block;}
.tnl-popup-menu > div {display:inline;}
.tnl-popup-menu > div > a {display: none;}
.tnl-popup-menu > div > div {display: none; position:absolute; top:0; left:20px; width: 100px; background-color:white; border: 1px solid black; }
.tnl-popup-menu > div > div.tnl-popup-menu-left {left:auto; right: 0px;}
.tnl-popup-widget {position:relative; display:inline-block; /*IE6-7 hacks*/zoom:1; *display: inline; _height: 1em;}
.tnl-popup-widget > a {display: inline-block;}
.tnl-popup-widget > div {display:none; position:absolute; top:0; left:20px; z-index: 2; width: 300px;}
table {width: 100%; text-align: center;}
th {text-align: center;}
th div.tnl-popup-menu > div > div {display: none; position:absolute; top:20px; left:0px; width: 100px; background-color:white; border: 1px solid black; }
th > span {position:relative; display:block;}
th > span > div.tnl-popup-menu {position:absolute; right:0px; top: 0px;}

JavaScript

/* Simple JavaScript Inheritance
 * By John Resig http://ejohn.org/
 * MIT Licensed.
 */
// Inspired by base2 and Prototype
(function(){
  var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;
  // The base Class implementation (does nothing)
  this.Class = function(){};
  
  // Create a new Class that inherits from this class
  Class.extend = function(prop) {
    var _super = this.prototype;
    
    // Instantiate a base class (but only create the instance,
    // don't run the init constructor)
    initializing = true;
    var prototype = new this();
    initializing = false;
    
    // Copy the properties over onto the new prototype
    for (var name in prop) {
      // Check if we're overwriting an existing function
      prototype[name] = typeof prop[name] == "function" && 
        typeof _super[name] == "function" && fnTest.test(prop[name]) ?
        (function(name, fn){
          return function() {
            var tmp = this._super;
            
            // Add a new ._super() method that is the same method
            // but on the super-class
            this._super = _super[name];
            
            // The method only need to be bound temporarily, so we
            // remove it when we're done executing
            var ret = fn.apply(this, arguments);        
            this._super = tmp;
            
            return ret;
          };
        })(name, prop[name]) :
        prop[name];
    }
    
    // The dummy class constructor
    function Class() {
      // All construction is actually done in the init method
      if ( !initializing && this.init )
        this.init.apply(this, arguments);
    }
    
    // Populate our constructed prototype object
    Class.prototype = prototype;
    
    // Enforce the constructor to be what we expect
    Class.constructor = Class;

    // And make this class extendable
    Class.extend = arguments.callee;
    
    return Class;
  };
})();

var Truenorth = Truenorth...