stickyWin. default. layout.js

Creates an html holder for in-page popups using a default style.

Author

Aaron Newton <aaron [dot] newton [at] cnet [dot] com>

Dependencies

mootoolsMoo.js, Utility.js, Common.js, Function.js, Element.js, Array.js, String.js
cnetsimple.template.parser.js
Summary
stickyWin. default. layout.jsCreates an html holder for in-page popups using a default style.
Functions
stickyWinHTMLReturns a DOM element for in-page popups (<stickyWin>) with a default style.
Change Log$Source: /cvs/main/flatfile/html/rb/js/global/cnet.global.framework/common/js.widgets/stickyWin.default.layout.js,v $ $Log: stickyWin.default.layout.js,v $ Revision 1.19 2007/06/21 20:08:44 newtona IE7 ignored the css definition; implemented Element.setText for anyone using Mootools < 1.11 and use that to set the css properties

Functions

stickyWinHTML

function stickyWinHTML (caption,
body,
options)

Returns a DOM element for in-page popups (<stickyWin>) with a default style.

Arguments

caption(string) the caption for the popup window
body(string or DOM element) content for the popup
optionsa key/value set of options

Options

width(string) width for the box; defaults to 300px.
css(string) override for the css styles for the default html baseHref: (string) url to the path where the images in the default style are located. defaults to http://www.cnet.com- /html- /rb- /assets- /global- /stickyWinHTML- /.
buttons(array) array of key/value set of button options (see below)

Buttons

text(string) the text of the button
onClick(function) function to execute on click
properties(object) a name/value set of properties applied to the element using Element.setProperties
properties.class(string) a css class name for the button; defaults to “closeSticky” which closes the popup.  You can give a different class name, and the button won’t close the sticky when clicked.  You can also give it an additional class name (className: ‘closeSticky button’) so that it will have your additional class but will still close the popup.

Example

stickyWinHTML('the caption', 'this is the body', {
  width: '400px',
    buttons: [
        {
            text: 'close',
            onClick: function(){alert('closed!')}
        },
        {
            text: 'okey-dokey',
            onClick: function(){alert('ok!')},
            properties: {class: 'ok'} //don't close though
        },
        {
            text: 'blah',
            onClick: function(){alert('blah!')},
            properties: {
                class: 'closeSticky blah', //still closes
                style: 'width: 100px, border: 1px solid red',
                title: 'blah! I say!'
            }
        }
    ]
});

Resulting HTML

The HTML generated by this function looks like this:

<div class="DefaultStickyWin">
    <div class="top">
        <div class="top_ul"></div>
        <div class="top_ur">
            <div class="closeButton closeSticky"></div>
            <h1 style="width: 335px;" class="caption">the caption</h1>
        </div>
    </div>
    <div class="middle">
        <div class="body">this is the body</div>
    </div>
    <div class="closeBody">
        <div class="closeButtons">
            <a class="closeSticky button">close</a>
            <a class="ok button">okey-dokey</a>
            <a class="closeSticky blah button" title="blah! I say!" style="width: 100px, border; 1px solid red">blah</a>
        </div>
    </div>
    <div class="bottom">
        <div class="bottom_ll"></div>
        <div class="bottom_lr"></div>
    </div>
</div>

Change Log

$Source: /cvs/main/flatfile/html/rb/js/global/cnet.global.framework/common/js.widgets/stickyWin.default.layout.js,v $ $Log: stickyWin.default.layout.js,v $ Revision 1.19 2007/06/21 20:08:44 newtona IE7 ignored the css definition; implemented Element.setText for anyone using Mootools < 1.11 and use that to set the css properties

Revision 1.18 2007/06/07 18:43:37 newtona added CSS to autocompleter.js removed string.cnet.js dependencies from template parser and stickyWin.default.layout.js

Revision 1.17 2007/05/17 19:45:43 newtona product picker: hide() now hides tooltips; onPick passes in a 3rd argument that is the picker stickyWinHTML: fixed a bug with className options for buttons html.table: fixed a bug with className options for buttons

Revision 1.16 2007/05/16 20:09:41 newtona adding new js files to redball.common.full product.picker.js now has no picklets; these are in the implementations/picklets directory ProductPicker now detects if there is no doctyp and, if not, sets the position of the picker to be fixed (no IE6 support) small docs update in element.cnet.js added new picklet: CNETProductPicker_PricePath added new picklet: NewsStoryPicker_Path new file: clipboard.js (allows you to insert text into the OS clipboard) new file: html.table.js (automates building html tables) new file: element.forms.js (for managing text inputs - get selected text information, insert content around selection, etc.)

Revision 1.15 2007/05/11 00:10:48 newtona syntax fix

Revision 1.14 2007/05/07 21:37:12 newtona docs update

Revision 1.13 2007/05/05 01:01:24 newtona stickywinHTML: tweaked the options for buttons element.cnet: tweaked smoothshow/hide css handling

Revision 1.12 2007/05/04 00:32:39 newtona stickwinHTML: added the ability for buttons to not close the sticky (className option) stickyWin: added .pin (see Element.pin.js)

Revision 1.11 2007/04/05 00:13:12 newtona local.vars.js: removing $type.isNumber dependency login.status.js: no change; fixed typo in docs search.functions.js: removing $type.isNumber dependency stickyWinDefaultLayout: infinite buttons! iframeShim.js: fixed an ie bug that caused it to abort the page

Revision 1.10 2007/03/29 23:12:00 newtona confirmer now checks for a bg color in IE6 to use crossfading (see Element.fxOpacityOk) fixed an IE7 css layout issue in stickyDefaultHTML StickyWin now uses Element.flush StickyWinFx.Drag now temporarily shows the sticky win (with opacity 0) to execute makeDraggable and makeResizable to prevent a Safari bug

Revision 1.9 2007/03/13 19:09:29 newtona fixed a typy - added event “close” instead of “click”. duh.

Revision 1.8 2007/03/13 18:57:17 newtona syntax fix

Revision 1.7 2007/03/13 18:49:56 newtona added onClose action

Revision 1.6 2007/03/08 02:38:50 newtona added close and confirm buttons

Revision 1.5 2007/03/02 01:31:53 newtona fixed some css bugs in IE fixed a bug where all blocks inherited the width of the first created

Revision 1.4 2007/02/24 00:21:56 newtona fixed a css bug

Revision 1.3 2007/02/22 21:27:43 newtona moved product picker from utilities dir fixed missing ; in stickywin html

Revision 1.2 2007/02/22 18:19:48 newtona fixed a bug with the style writer added a missing bind()

Revision 1.1 2007/02/21 00:41:48 newtona * empty log message *

function stickyWinHTML (caption,
body,
options)
Returns a DOM element for in-page popups (<stickyWin>) with a default style.
My Object Oriented javascript.
Contains Utility functions
Contains common implementations for custom classes.
Contains Function prototypes and utility functions .
function $(el)
returns the element passed in with all the Element prototypes applied.
Contains useful Element prototypes, to be used with the dollar function $.
function $A(array,
start,
length)
returns a copy of the array.
Same as Array.copy, but as function.
function $each(iterable,
fn,
bind)
Use to iterate through iterables that are not regular arrays, such as builtin getElementsByTagName calls, arguments of a function, or an object.
Contains Array prototypes, $A, $each
Contains String prototypes and Number prototypes.
Provides functionality for very simple template parsing; for more complex template parsing, use TrimPath’s excellent Javascript Templates (JST): http://trimpath.com- /project- /wiki- /JavaScriptTemplates.
Sets numerous attributes for the Element.