Fleegix.js
Simple. Useful. JavaScript.

Fleegix.js reference

This page describes the modules in the Fleegix.js JavaScript toolkit, and the different methods they contain. Click on a module or method name for a detailed description.

Contents

Globals

Fleegix.js defines a tiny number of global variables -- this makes it a lot less likely we step on somebodys else's toes.

$ (dollar sign)

Syntax

$(nodId)

Parameters

nodeId (String) -- The id of a DOM node.

Description

Ah, the global dollar-sign function. Some people love it. Some hate it. Whatever you think of it, it's undeniable that it's implemented enough places now that it's fairly universal. The Fleegix.js version is minimal -- it just works for lookup of a single node.

Note: this global function is only created if Fleegix.js doesn't find an already-existing one. So if you're using a library like Prototype or JQuery that has its own ideas about the dollar sign, Fleegix.js won't clobber the existing definition.

Examples

var fooNode = $('foo');
=> Returns a DOM node with the id of 'foo'

$elem

Syntax

$elem(elemType, opts)

Parameters

elemType (String) -- The type of DOM element to create.

opts (Object) -- A keyword/value object containing a list of properties to assign to the new DOM element.

Description

Alias for document.createElement, with the option of passing in a list of attributes to assign to the new element.

Examples

var fooDiv = $elem('div', {
  id: 'foo',
  className: 'barClass',
  innerHTML: 'Howdy' });

$text

Syntax

$text(nodeText)

Parameters

nodeText (String) -- Text to use in the new text node.

Description

Alias for document.createTextNode.

Examples

var fooDiv = $elem('div', {
  id: 'foo',
  className: 'barClass');
fooDiv.appendChild($text('Howdy'));

fleegix

Syntax

(None)

Parameters

(None)

Description

Namespace for the methods and properties in the Fleegix.js toolkit.

Base

Basic metaprogramming helpers are here, as well as all the code used to set up agent-sniffing flags like the always-helpful fleegix.isIE.

fleegix.extend

Syntax

fleegix.extend(superClass, subClass)

Parameters

superClass (Function) -- Constructor function for the object you want to extend.

subClass (Function) -- Constructor function for the object containing all the stuff you want to extend the superclass object with.

Description

Simple object extension, returns a constructor function you can use to create the extended objects. Note this makes the assumption you always want to call the contstuctor function of the superclass object with the same arguments as the subclass object.

Examples

var superThing = function (f) {
  this.foo = f;
};
var subThing = fleegix.extend(superThing, function (f, b) {
  this.bar = b;
});

var sub = new subThing('QWER', 'ASDF');
sub.foo;
=> 'QWER'
sub.bar;
=> 'ASDF'

fleegix.mixin

Syntax

fleegix.mixin(targetObj, mixinObj)

Parameters

targetObj (Object) -- Object you want to copy methods and properties onto.

mixinObj (Object) -- Object with methods and properties you want to copy to the target.

Description

Copies methods and properties on one object onto another.

Examples

var someThing = function (f) {
  this.foo = f;
};
var some = new someThing('QWER');
fleegix.mixin(some, {
  bar: 'ASDF',
  fooFinder: function () {
    return this.foo;
  }
});

some.bar;
=> 'ASDF'
some.fooFinder();
=> 'QWER'

fleegix.clone

Syntax

fleegix.clone(cloneObj)

Parameters

cloneObj (Object) -- Object you want to make a copy of.

Description

Simple cloning function that makes a copy of object. Will recurse through all the properties and copy those as well. Note: does not check for cyclical references.

Examples

var someThing = function () {
  this.foo = 'QWER',
  this.bar = [1, 2, 3]
};
var some = new someThing();
var other = fleegix.clone(some);

other instanceof someThing;
=> true
other.foo;
=> 'QWER'
other.bar.push(4);
other.bar;
=> [1, 2, 3, 4]
some.bar;
=> [1, 2, 3]

Agent sniffing

Description

Agent sniffing is horrible, but in the imperfect world of cross-browser apps, sometimes you just have to suck it up and do what has to be done.

Here's a list of the user-agents and OS's detected:

  • fleeix.isOpera
  • fleegix.isKhtml
  • fleegix.isSafari
  • fleegix.isMoz (includes Firefox plus older Mozilla)
  • fleegix.isFF (Firefox only)
  • fleegix.isIE
  • fleegix.isMac
  • fleegix.isUnix (includes Linux plus BSD, Sun OS)
  • fleegix.isLinux (Linux only)
  • fleegix.isWindows

Events

The Fleegix.js event system provides a convenient and flexible way to connect together either DOM events or events in your application. It also provides a basic publish/subscribe system to allow decentralized communiation between the pieces of your Web UI.

fleegix.event.listen

Syntax

fleegix.event.listen(listenerObj, triggerEventName, someFunction); (calling just a simple function)

fleegix.event.listen(listenerObj, triggerEventName, someObject, someMethodName); (calling a method of an object)

Parameters

listenerObj (Object/HTMLElement) -- Object to add the listener to.

triggerEventName (String) -- Name of method or event which will trigger execution of a function or method.

someFunction (Function) -- Function to execute when the triggering event is run.

someObject (Object/HTMLElement) -- Object with the method you want to execute when the triggering event is run.

someMethodName (String) -- Name of the method you want to execute when the triggering event is run.

Description

Allows you to trigger a function or method whenever a DOM event fires, or a method of some object is invoked. Whenever the triggering event or method is fired, the attached method or function will run. Multiple functions or methods can be attached to the same trigger.

Examples

function simpleAlert() {
  alert('simple');
}

var zardoz = new function () {
  this.foo = function () {
    alert('ABC');
  };
}

var logansRun = new function () {
  this.bar = function () {
    alert('123');
  };
}

fleegix.event.listen(zardoz, 'foo', simpleAlert);
zardoz.foo(); => two alerts, 'ABC,' then 'simple.'

fleegix.event.listen(zardoz, 'foo', logansRun, 'bar');
zardoz.foo(); => now three alerts, 'ABC,' 'simple,' then '123.'

fleegix.event.unlisten

Syntax

fleegix.event.unlisten(listenerObj, triggerEventName, someFunction); (with a simple function)

fleegix.event.unlisten(listenerObj, triggerEventName, someObject, someMethodName); (with a method of an object)

Parameters

listenerObj (Object/HTMLElement) -- Object to remove the listener from.

triggerEventName (String) -- Name of method or event which you want to stop triggering a certain function or method.

someFunction (Function) -- Function to stop triggering when the triggering event is run.

someObject (Object/HTMLElement) -- Object with the method you want to stop from executing when the triggering event is run.

someMethodName (String) -- Name of the method you want to stop from executing when the triggering event is run.

Description

Removes an attached listener so it will no longer trigger the function or method specified. Use 'unlisten' with the exact same parameters you passed to 'listen' to remove that particular listener.

Examples

function simpleAlert() {
  alert('simple');
}

var zardoz = new function () {
  this.foo = function () {
    alert('ABC');
  };
}

var logansRun = new function () {
  this.bar = function () {
    alert('123');
  };
}

fleegix.event.listen(zardoz, 'foo', logansRun, 'bar');
zardoz.foo(); => two alerts, 'ABC,' then '123.'

fleegix.event.unlisten(zardoz, 'foo', logansRun, 'bar');
zardoz.foo(); => now just one alert, 'ABC.'

fleegix.event.publish

Syntax

fleegix.event.publish(channelName, publishPayload);

Parameters

channelName (String) -- Name of the channel to publish on.

publishPayload (Object) -- Object to send to anyone listening on the specified channel.

Description

Allows an object to publish to a specific channel (simply named with a string), and pass a JavaScript object to anyone subscribed, as a payload of the publish-event.

Examples

var pubObj = {
    thisProp: 'foo',
    thatProp: function () {},
    theOtherProp: 2112 };

fleegix.event.publish('sciFi' pubObj);

fleegix.event.subscribe

Syntax

fleegix.event.subscribe(channelName, subscriberObj, handlerMethod);

Parameters

channelName (String) -- Name of the channel to listen for publish-events on.

subscriberObj (Object) -- Object that is listening for publish-events on that channel.

handlerMethod (Function) -- Method to invoke when the publish-event occurs. The publish event will pass this method a JavaScript Object as a parameter.

Description

Allows an object to listen for published events on a specific channel (simply named with a string), and specify a handler method that will be fired on each publish-event, and be handed a JavaScript object as the publish-event payload.

Examples

var zardoz = new function () {
  this.handlePublish = function (pubObj) {
    alert(pubObj.thisProp);
  };
}

fleegix.event.subscribe('sciFi', zardoz, 'handlePublish');

var pubObj = {
    thisProp: 'foo',
    thatProp: function () {},
    theOtherProp: 2112 };

fleegix.event.publish('sciFi' pubObj); => passes pubObj to
handlePublish method of zardoz, which alerts 'foo.'

fleegix.event.unsubscribe

Syntax

fleegix.event.unsubscribe(channelName, unsubscribeObj);

Parameters

channelName (String) -- Name of the channel to unsubscribe from.

unsubscribeObj (Object) -- Object that should stop listening to that channel.

Description

Allows an object that's subscribed to a particular publishing channel to stop listening.

Examples

fleegix.event.unsubscribe('sciFi', zardoz');

XHR

The XHR module has two convenience methods for doing standard GET and POST requests, and also has the ability to do requests with more detailed control (such as using arbitrary HTTP methods such as PUT, or setting authentication headers or the format of the response). The module uses XHR-object pooling and request queueing.

fleegix.xhr.get

Syntax

fleegix.xhr.get(handlerFunction, url, [responseFormat]); (Asynchronous requests)

fleegix.xhr.get(url, [responseFormat]); (Synchronous requests)

Parameters

handlerFunction (Function) -- function called when an asynchronous XHR request returns. If first argument is missing, get assumes a synchronous (blocking) request. When called by the response, it will be passed two parameters -- the response in the desired format, and the request ID.

url (String) -- The URL to make the request to.

responseFormat (String) -- Optional parameter, sets the format of the response passed to the handler function. Possible values are 'text' (to pass the responseText of the XHR object), 'xml' (the responseXML), and 'object' (to get the XHR object itself) Defaults to 'text.'

Description

Makes an XHR GET request, and passes the result to the specified handler function.

Examples

function alertResponse(resp, id) {
  alert(resp);
  alert('Request ID was: ' + id);
}
fleegix.xhr.get(alertResponse, 'random_textfile.txt');

var s = fleegix.xhr.get('random_textfile.txt');
alert(s);

function alertStatus(resp, id) {
  alert(resp.status);
}
fleegix.xhr.get(alertResponse, 'random_textfile.txt',
    'object');

fleegix.xhr.post

Syntax

fleegix.xhr.post(handlerFunction, url, data, [responseFormat]); (Asynchronous requests)

fleegix.xhr.post(url, data, [responseFormat]); (Synchronous requests)

Parameters

handlerFunction (Function) -- function called when an asynchronous XHR request returns. If first argument is missing, post assumes a synchronous (blocking) request. When called by the response, it will be passed two parameters -- the response in the desired format, and the request ID.

url (String) -- The URL to make the request to.

data (String) -- Data payload to send with the request.

responseFormat (String) -- Optional parameter, sets the format of the response passed to the handler function. Possible values are 'text' (to pass the responseText of the XHR object), 'xml' (the responseXML), and 'object' (to get the XHR object itself) Defaults to 'text.'

Description

Makes an XHR POST request, and passes the result to the specified handler function.

Examples

function alertResponse(resp, id) {
  alert(resp);
}
fleegix.xhr.post(alertResponse, 'random_textfile.txt',
  'foo=bar&baz=2112');

var s = fleegix.xhr.post('random_textfile.txt',
  'foo=bar&baz=2112');
alert(s);

function alertStatus(resp, id) {
  alert(resp.status);
  alert('Request ID was: ' + id);
}
fleegix.xhr.get(alertResponse, 'random_textfile.txt',
  'foo=bar&baz=2112', 'object');

fleegix.xhr.send

Syntax

fleegix.xhr.send(requestOptions); (Either asynchronous or synchronous)

Parameters

requestOptions (Object) -- Options for the XHR request. Here is the list of possible properties to set, and the default values if they are not set:

  • url: null -- The URL to make the request to
  • method: 'GET' -- HTTP request method to use
  • async: true -- If set to false, makes a blocking request and returns the result inline
  • data: null -- data to send with POST or PUT requests
  • handleSuccess: null -- Function to handle successful responses for asynchronous requests
  • handleErr: null -- Function to handle error responses for asynchronous requests. If no error/all handler exists, the error will be handled with the built-in function fleegix.xhr.handleErrDefault, which pops up the error page from the server in a new, full-sized window
  • handleAll: null -- Function to handle both errors or successful responses. If you set this, don't set handleSuccess or handleErr
  • handleTimeout: null -- Function to handle cases where the request is processing for longer than timeoutSeconds
  • responseFormat: 'text' -- format to use when passing the response to the handler function (valid values are 'text,' 'xml,' 'object')
  • mimeType: null -- Can be used to override the MIME type of the response returned by the server. Sometimes used to ensure tje browser handles response as XML, even if the server doesn't set the Content-type header properly
  • username: '' -- Set when using basic auth with the request
  • password: '' -- Set when using basic auth with the request
  • headers: [] -- Used to set any special headers you might want on the request
  • preventCache: false -- Adds a dummy variable to the end of the request URL to prevent caching in retarded browsers like IE6
  • timeoutSeconds: 30 -- The number of seconds until the request times out. (Note this doesn't include time spent in the request queue -- the clock starts when the request is picked up and sent by the XHR object.)
  • uber: false -- Give the request priority over any existing queued async requests. If uber property is set to true, this request goes directly to the front of the queue

Description

Makes an XHR request, with fine-grained control over the type of request, type of response, as well as many other options.

Examples

fleegix.xhr.send({
  url: 'some_page.rbx',
  handleAll: function (s) { alert(s.status); },
  responseFormat: 'object',
  uber: true
} );

fleegix.xhr.abort

Syntax

fleegix.xhr.abort(requestId);

Parameters

requestId (Number) -- Request ID of a currently processing XHR request to abort.

Description

If the request is still processing, will abort it and return true. If the request identified by requestId is not currently processing (i.e., it may have already completed), returns false.

Examples

var id = fleegix.get(handlerFunction,
  '/some_file.rbx'); // Get a request ID number
fleegix.xhr.abort(id); // Abort the request

Strings

A bunch of methods for wrangling strings.

fleegix.string.toArray

Syntax

fleegix.string.toArray(str)

Parameters

str (String) -- String you want to convert into an Array.

Description

Converts a string into an Array of one-character strings.

Examples

var str = 'Rush2112';
fleegix.string.toArray(str);
=> ["R", "u", "s", "h", "2", "1", "1", "2"]

fleegix.string.reverse

Syntax

fleegix.string.reverse(str)

Parameters

str (String) -- String you want to reverse.

Description

Reverses the order of characters in a string.

Examples

var str = 'Rush2112';
fleegix.string.reverse(str);
=> '2112hsuR'

fleegix.string.ltrim

Syntax

fleegix.string.ltrim(str)

Parameters

str (String) -- String you want to trim whitespace off the left side of.

Description

Trims whitespace characters off the left side of a string.

Examples

var str = '   ABC  ';
fleegix.string.ltrim(str);
=> 'ABC   '

fleegix.string.rtrim

Syntax

fleegix.string.rtrim(str)

Parameters

str (String) -- String you want to trim whitespace off the right side of.

Description

Trims whitespace characters off the right side of a string.

Examples

var str = '   ABC  ';
fleegix.string.rtrim(str);
=> '   ABC'

fleegix.string.trim

Syntax

fleegix.string.trim(str)

Parameters

str (String) -- String you want to trim whitespace off.

Description

Trims whitespace characters off either end of a string.

Examples

var str = '   ABC  ';
fleegix.string.trim(str);
=> 'ABC'

fleegix.string.deCamelize

Syntax

fleegix.string.deCamelize(str)

Parameters

str (String) -- String you want to convert from camelCase to lowercase_with_underscores.

Description

Convert a string from camelCase (e.g., JavaScript variable style) to lowercase_with_underscores (e.g., Ruby/Python variable style).

Examples

var str = 'someParameterName';
fleegix.string.deCamelize(str);
=> 'some_parameter_name'

fleegix.string.camelize

Syntax

fleegix.string.camelize(str)

Parameters

str (String) -- String you want to convert from lowercase_with_underscores to camelCase.

Description

Convert a string from lowercase_with_underscores (e.g, Ruby/Python variable style) to camelCase (e.g., JavaScript variable style).

Examples

var str = 'some_parameter_name';
fleegix.string.camelize(str);
=> 'someParameterName'

fleegix.string.capitalize

Syntax

fleegix.string.capitalize(str)

Parameters

str (String) -- String that you want to uppercase the first letter of.

Description

Uppercases the first letter of a string.

Examples

var str = 'geddy';
fleegix.string.capitalize(str);
=> 'Geddy'

fleegix.string.escapeXML

Syntax

fleegix.string.escapeXML(str)

Parameters

str (String) -- String of XML markup to escape.

Description

Escapes quotes, ampersands, and angle brackets in XML markup, changing them to entity codes.

Examples

var str = "<div>Howdy</div>";
fleegix.string.escapeXmL(str);
=> "&lt;div&gt;Howdy&lt;/div&gt;"

fleegix.string.unescapeXML

Syntax

fleegix.string.unescapeXML(str)

Parameters

str (String) -- String of XML markup to unescape.

Description

Converts entity codes for quotes, ampersands, and angle brackets in escaped XML markup back to their original characters.

Examples

var str = "&lt;div&gt;Howdy&lt;/div&gt;";
fleegix.string.escapeXmL(str);
=> "<div>Howdy</div>"

Forms

The Fleegix.js forms module contains a number of helpful functions for working with forms, including a serialize function for submitting data via XHR, a restore function which can pre-populate a form from its serialized data, a form-to-hash converter, and a diff method which allows you to compare two different forms (useful in telling what a user has changed in a form).

fleegix.form.serialize

Syntax

fleegix.form.serialize(formElement, [serializeOptions]);

Parameters

formElement (Object) -- The HTML form you want to serialize.

serializeOptions (Object) -- Options for how to serialize the form. Here is the list of possible properties to set, and the default values if they are not set:

  • stripTags: false -- Strip HTML markup tags from the values.
  • includeEmpty: false -- Include variables in the string for all the form elements, even if they have no value set (e.g., even if elemB is empty stil set string to elemA=foo&elemB=&elemC=bar)
  • collapseMulti: false -- take values from elements that can return multiple values (multi-select, checkbox groups) and collapse into a single, comma-delimited value (e.g., foo=asdf,qwer,zxcv)

Description

Transforms all the values of form elements in an HTML form into a query-string-style string, usually to be submitted as the payload in an XMLHttpRequest POST request.

Examples

var someForm = document.getElementById('someFormId');
var str = fleegix.form.serialize(someForm);
fleegix.xhr.post(handlerFunc, '/post_page.rbx', str);
=> Posts contents of someForm to post_page.rbx

var someForm = document.getElementById('someFormId');
var str = fleegix.form.serialize(someForm, { includeEmpty: true });
var url = 'get_page.rbx?' + str;
fleegix.xhr.get(handlerFunc, url);
=> Use the serialized form as a query string in a GET

fleegix.form.toObject

Syntax

fleegix.form.toObject(formElement);

Parameters

formElement (Object) -- The HTML form you want to convert to a keyword/value object.

Description

Transforms all the values of form elements in a form into a keyword/value object (hash). When a form element has multiple values (like with sets of checkboxes, or multi-select select boxes), the values will be put into an array.

All form elements will have a key in the hash. Empty form elements (e.g., a blank text box) will have a value of null in the hash.

Examples

var someForm = document.getElementById('someFormId');
someForm.firstTextBox.value = 'foo';
var obj = fleegix.form.toObject(someForm);
alert(obj.firstTextBox); => alerts 'foo.'

Effects

A new effects module which provides the two most useful visual effects for a Web app -- fade-in and fade-out.

fleegix.fx.fadeOut

Syntax

fleegix.fx.fadeOut(domElement, [fadeOptions]);

Parameters

domElement (HTMLElement) -- DOM node (such as div or span) that you wish to apply a fadeout animation effect to.

fadeOptions (Object) -- Options for the fadeout animation. Here is the list of possible properties to set, and the default values if they are not set:

  • duration: 500 -- Number of milliseconds to do the fadeout animatinon in.
  • trans: 'lightEaseIn' -- easing transition to use in the fade
  • doOnStart: null -- Function to execute as the animation starts
  • doAfterFinished: null -- Function to exectute after the animation completes

Description

Does a basic opacity fadeout animation effect on the desired DOM element. The element should be set to 100% opacity before applying the effect.

Examples

var fadeDiv = document.getElementById('someDiv');
fleegix.fx.fadeOut(fadeDiv);

fleegix.fx.fadeIn

Syntax

fleegix.fx.fadeIn(domElement, [fadeOptions]);

Parameters

domElement (HTMLElement) -- DOM node (such as div or span) that you wish to apply a fadein animation effect to.

fadeOptions (Object) -- Options for the fadein animation. Here is the list of possible properties to set, and the default values if they are not set:

  • duration: 500 -- Number of milliseconds to do the fadein animatinon in.
  • trans: 'lightEaseIn' -- easing transition to use in the fade
  • doOnStart: null -- Function to execute as the animation starts
  • doAfterFinished: null -- Function to exectute after the animation completes

Description

Does a basic opacity fadein animation effect on the desired DOM element. The element should be set to zero opacity before applying the effect.

Examples

var fadeDiv = document.getElementById('someDiv');
fleegix.fx.fadeIn(fadeDiv);

fleegix.fx.blindUp

Syntax

fleegix.fx.blindUp(domElement, [blindOptions]);

Parameters

domElement (HTMLElement) -- DOM node (such as div or span) that you wish to apply a window blind animation effect to.

fadeOptions (Object) -- Options for the fadein animation. Here is the list of possible properties to set, and the default values if they are not set:

  • duration: 500 -- Number of milliseconds to do the fadein animatinon in.
  • trans: 'lightEaseIn' -- easing transition to use in the fade
  • doOnStart: null -- Function to execute as the animation starts
  • doAfterFinished: null -- Function to exectute after the animation
  • blindType: 'height' -- Change the actual height of the DOM element during the wipe.

Description

Does a basic window blind/shade animation effect on the desired DOM element. By default the blindType is 'height', which changes the actual height of the element during the wipe. Setting this value to 'clip' will use a CSS clipping effect instead that keeps the height of the element the same. Note that the clipping wipe will only work with absolute-positioned elements.

If you're using the 'height' blindType (the default), for optimal effect you should begin with a DOM element that's zero pixels in height.

Examples

var blindDiv = document.getElementById('someDiv');
fleegix.fx.blindDown(blindDiv);

fleegix.fx.blindDown

Syntax

fleegix.fx.blindDown(domElement, [blindOptions]);

Parameters

domElement (HTMLElement) -- DOM node (such as div or span) that you wish to apply a window blind animation effect to.

fadeOptions (Object) -- Options for the fadein animation. Here is the list of possible properties to set, and the default values if they are not set:

  • duration: 500 -- Number of milliseconds to do the fadein animatinon in.
  • trans: 'lightEaseIn' -- easing transition to use in the fade
  • doOnStart: null -- Function to execute as the animation starts
  • doAfterFinished: null -- Function to exectute after the animation
  • blindType: 'height' -- Change the actual height of the DOM element during the wipe.

Description

Does a basic window blind/shade animation effect on the desired DOM element. By default the blindType is 'height', which changes the actual height of the element during the wipe. Setting this value to 'clip' will use a CSS clipping effect instead that keeps the height of the element the same. Note that the clipping wipe will only work with absolute-positioned elements.

If you're using the 'height' blindType (the default), when the animation completes, the height of the element will be zero pixels.

Examples

var blindDiv = document.getElementById('someDiv');
fleegix.fx.blindUp(blindDiv);

JSON

Contains a function for serializing a JavaScript object to the JSON data format.

fleegix.json.serialize

Syntax

fleegix.json.serialize(serializeObj);

Parameters

serializeObj (Object) -- Object to serialize as a JSON string.

Description

Serializes a JavaScript object into a JSON (http://www.json.org/) string.

Examples

var obj = { name: 'Rush',
    members: ['Geddy', 'Neil', 'Alex'], album: 2112 };
var str = fleegix.json.serialize(obj);

DOM

Contains a couple of useful functions for dealing with DOM elements.

fleegix.dom.getViewportWidth

Syntax

fleegix.dom.getViewportWidth();

Description

Returns the width in pixels of the browser window.

Examples

var w = fleegix.dom.getViewportWidth();

fleegix.dom.getViewportHeight

Syntax

fleegix.dom.getViewportHeight();

Description

Returns the height in pixels of the browser window.

Examples

var h = fleegix.dom.getViewportHeight();

fleegix.dom.center

Syntax

fleegix.dom.center(someNode);

Parameters

someNode (HTMLElement) -- The DOM element you wish to center both horizontally and vertically.

Description

Horizontally and vertically centers a DOM element using absolute positioning (for example, a div for a dialog box).

Examples

var centerDiv = document.getElementById('someDiv');
fleegix.dom.center(centerDiv);

Css

Contains a couple of useful functions for working with CSS.

fleegix.css.addClass

Syntax

fleegix.css.addClass(someNode, someClass);

Parameters

someNode (HTMLElement) -- The DOM node you wish to add a CSS class to.

someClass (String) -- The CSS class you wish to add.

Description

Adds a CSS class to a DOM element. Multiple classes are added as a space-delimited list.

Examples

var someDiv = document.getElementById('someDiv');
fleegix.css.addClass(someDiv, 'someCssClass');

fleegix.css.removeClass

Syntax

fleegix.css.removeClass(someNode, someClass);

Parameters

someNode (HTMLElement) -- The DOM node you wish to remove a CSS class from.

someClass (String) -- The CSS class you wish to remove.

Description

Removes a CSS class to a DOM element.

Examples

var someDiv = document.getElementById('someDiv');
fleegix.css.addClass(someDiv, 'someCssClass');

URI

The URI module in Fleegix.js contains a number of functions for working with URIs -- specifically query strings. With these functions you can grab values out of query-string parameters, or update query-string parameters with new values.

fleegix.uri.getQuery

Syntax

fleegix.uri.getQuery(urlString);

Parameters

urlString (String) -- The URL you want to get the query string from.

Description

Returns the query string (i.e, the portion after the question mark) on a URL.

Examples

var query = fleegix.uri.getQuery(location.href);

fleegix.uri.getBase

Syntax

fleegix.uri.getBase(urlString);

Parameters

urlString (String) -- The URL you want to get the base URL from.

Description

Returns the base URL (i.e, the portion before the question mark, if there's a query string) on a URL.

Examples

var base = fleegix.uri.getBase(location.href);

fleegix.uri.getParam

Syntax

fleegix.uri.getParam(paramName, querystring);

Parameters

paramName (String) -- The name of the parameter you want to get the value of.

querystring (String) -- The query string you want to get a value from.

Description

Returns the value of a parameter on a query string. If the same parameter name appears multiple times in the query string, the function will return an array of all the values.

Examples

var query = 'foo=2112&bar=howdy&foo=1001';
var foo = fleegix.uri.getParam('foo', query);
foo = foo.join();
alert(foo); => alerts '2112,1001.'

fleegix.uri.setParam

Syntax

fleegix.uri.setParam(paramName, value, querystring);

Parameters

paramName (String) -- The name of the parameter you want to set the value of.

value (String) -- The value you want to set the parameter to.

querystring (String) -- The query string you want to set a value for a param on.

Description

Sets the value of a parameter in a query string. If the param is not in the string, it appends it with the desired value at the end of the string. If the entire string is empty, it creates a query string with the single param and value in it.

If the parameter is in the query string multiple times, the function will set the value of the first instance of the param that it finds in the string.

Examples

var query = 'foo=2112&bar=howdy&foo=1001';
var foo = fleegix.uri.setParam('bar', 'wowzers', query);
alert(query); => alerts 'foo=2112&bar=wowzers&foo=1001.'

Cookies

The code in this module provides a nice, clean wrapper for getting and setting cookie values in the browser.

fleegix.cookie.set

Syntax

fleegix.cookie.set(cookieName, [opts]);

Parameters

cookieName (String) -- Name of the cookie you want to set the value for.

opts (Object) -- Object with keyword options for the cookie. Here is the list of possible properties to set, and the default values if they are not set:

  • path: '/' -- Path for the cookie -- documents in this path on the server will be able to use it.
  • days: (none) -- The number of days the cookie will last
  • hours: (none) -- The number of hours the cookie will last
  • minutes (none) -- The number of minutes the cookie will last

Description

Sets the value of the cookie with the specified name and path. Days, hours, and minutes for the duration of the cookie may be used in combination. If no opts are passed, assumes '/' for path, and the cookie will expire when the user closes the browser,

Examples

fleegix.cookie.set('loginId');

fleegix.cookie.set('Zardoz', { path: '/app/main', hours: 2,
  minutes: 30 });

fleegix.cookie.get

Syntax

fleegix.cookie.get(cookieName, [path]);

Parameters

cookieName (String) -- Name of the cookie you want to get the value for.

path (String) -- Path for the cookie you want to get the value for. If omitted, assumes root ('/').

Description

Gets the value of the cookie with the specified name and path.

Examples

fleegix.cookie.get('loginId');

fleegix.cookie.destroy

Syntax

fleegix.cookie.destroy(cookieName, [path]);

Parameters

cookieName (String) -- Name of the cookie you want to remove.

path (String) -- Path for the cookie you want to remove. If omitted, assumes root ('/').

Description

Removes the cookie with the specified name and path.

Examples

fleegix.cookie.remove('loginId');