mrspoonzy at gmail Cube by Noah Ellman A powerful javascript toolkit, in research © by Noah Ellman

Wee.Hotbox

wee Hotbox(...)
wee.Hotbox loadContent(...)
setContent(...)
close?
create()
setTitle(...)
onClose

Hotbox is a popup DIV module very similar to the well known ones such as "Lightbox" and "Lightview".

A key benefit of frodo's hotbox is that its build natively into the framework. Thus it requires no other code libraries and is only a small amount of code. "Lightview" for example, requires both the "Prototype" framework and Google's Ajax libraries, which all-in-all is over 10,000 lines of Javascript code that the web browser must parse, 99% of which will probably not ever be used.

  • Auto sizes to content
  • Just pass a URL to set the content
  • Can be custom styled via CSS

Examples:

WeeBox Stylesheets

div.hotbox { border:5px solid #090; padding:0 0px 0px 0px; background:#EEE; overflow:hidden; height:auto; }
div.hotbox-container { border:0px solid #555; overflow:hidden; }
div.hotbox-top { border-bottom:1px solid #BBBBBB; padding:5px 20px 3px 8px; background:#e1e1e5; }
div.hotbox-title { margin-left:8px; font-size:13px; font-weight:normal; color: #666; }
div.hotbox-btn { -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }

How Do I Do It?

Hotbox is easy to use. Heres some example code.

var mybox = wee.Hotbox();
// load login.htm from your website into the hotbox (behind the scenes)
mybox.loadContent('login.htm');
// okay show the box
mybox.create();
// you can also set content to a string of HTML or text
// hotbox will automatically resize itself according to the content
mybox.setContent('

this will auto size too

'); // to force close the box mybox.close();

Where do I put my weebox code?

That depends on when you want the weebox to open. What you aught to do is place the code inside a function.

function openMyBox() {
	var mybox = wee.Hotbox();
// etc. . . .
}

You can call your function whatever you like. Add the above code into your site's .js file. If you dont have one, then simply put the code inside a <s cript> tag in the <head> section of your document.

If you want the weebox to appear when a user clicks a button, you would do something like this.

<input type="button" onclick="openMyBox();">

The onclick attribute on your button will call you custom function.

You can also do this to a link, like this:

<a href="javascript:;" onclick="openMyBox();">Click here</a>
class new wee.Hotbox(...)( [id] ,  [className] ,  [args] )
Create a new instance of hotbox.
Args
  1. (optional) {string} Javascript ID for your hotbox, if special.
  2. (optional) {string} CSS class name for hotbox, if you need.
method wee.Hotbox.loadContent(...)( string url )
Loads the HTML from a URL (via ajax) and sets the hotbox content.
Args
  1. {string} A ajax URL that returns HTML content
Returnsitself

The loadContent method expects a URL as the parameter. The URL specified will be loaded via Ajax automatically and the output injected into weebox. The fade out and fade in transitions will be done automatically by weebox during a content change.

method wee.Hotbox.setContent(...)( string html )
Set the box content to your HTML code.
Args
  1. {string} Valid HTML as a string.
Returnsitself

Same as loadContent(), but for use with plan string of text or HTML.

??? close?

Close weebox. This is the same as if the user hit the close button.

method wee.Hotbox.create()
Call this to actually render and display the box.
Returnsitself, so you can chain with loadContent()
method wee.Hotbox.setTitle(...)( string title )
Set the title of the box (the text in the top left)
Args
  1. {string} Your title text
Returnsitself
event wee.Hotbox.onClose
Assign your own function to this property, to catch when the user hits the close button.

This is actually an event function. Set the onClose property to your custom function to catch when the user closes the box.


Discussion on /code-frodobox