Meta100 Blog

mDOMupdate

Wed, 23 Feb 2011 16:30:00 -0500

mDOMupdate

Triggers the event ‘DOMUpdated’ on DOM manipulation via jQuery.

Requires: jQuery .

Install: Add the line after jQuery.

Or download from https://github.com/meta100/mDOMupdate.

Use:

$(document).bind('DOMUpdated', function () { /* Insert code to execute here. */ });

Use Firebug lite or your browsers builtin console to modify the page DOM, via jQuery, an alert will fire to let you know the event has triggered.

For Example:

$('p').append(' *HI!*');

mGuides

Wed, 09 Jun 2010 17:23:00 -0400

mGuides

A jQuery plugin that extends jQueryUI dragable and resizable. This plugin adds guides for positioning dragable and resizable elements.

Requires: jQuery & jQueryUI.

Install: Add the line after jQueryUI.

Or download from https://github.com/meta100/mGuides.

Use: Adds the following options to jQueryUI draggable and resizable options (http://jqueryui.com/demos/):
guide - Default is true. Since you are loading the script it we will assume you want it to run.
guidecolor - The color of the guide lines must be an array with four colors. Default guidecolor array is [‘blue’, ‘red’, ‘green’, ‘yellow’]. First color is side guide, second is side outer padding guide, third is center align guide and fourth color is inner padding guide.
guidestyle - Default is ‘dashed’ can be any css border style
guideinner - Default false. The jQuery selector of the element you wish to have inner padding guides.
guidecenter - Default true. Set to false if you do not wish to have center guides for alignment.
guidepadding - Default 0. Set to the number of pixels you wish to have the inner and padding guides to be positioned from the edges of the elements.
snapTolerance - Default is 20. Used for the max distance from the guide the elements edge has to be for it to snap to the guide.

Example:

$(".draggable").draggable({guides: true, guidepadding: 20, guideinner: '.demo'}).resizable({handles: 'n, e, s, w', guides: true, guidepadding: 20, guideinner: '.demo'});

mGuides

mColorPicker

Sat, 15 May 2010 17:53:00 -0400

mColorPicker

A simple lite jQuery color picker plugin with a swatch to remember the last 10 colors chosen, that uses html5 markup.

Requires: jQuery .
Optional: mDOMupdate. - for automatically converting dynamically created color inputs. (dynamically added via jQuery)

Install: Add the line after jQuery.

Or download from https://github.com/meta100/mColorPicker.

Use: Insert HTML5 markup for color picker.

Example 1:

Example 1

Example 2:

The value you set for the input element will define the initial value of the color picker.

Example 2

Example 3:

Setting data-hex=”true” outputs hex colors as apposed to the default rgb.

Example 3

Example 4:

If you set the input elements attribute data-text=”hidden” the text input will be hidden and no color wheel will show. Instead, the size of the input element will be used as a clickable color picker trigger. Set the height and width of the input to set the size of the clickable color picker trigger.

Example 4

Example 5:

Added an event ‘colorpicked’ that will trigger when a color is chosen in the colorpicker.

Example 5