Meta100 Blog

Designing Fun.

RSS | Archive

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

Requires: jQuery .

Install: Add the line after jQuery.

<script type="text/javascript" src="http://meta100.github.com/mDOMupdate/javascripts/mDOMupdate.js" charset="UTF-8"></script>

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('<span> *HI!*</span>');

∞ 4:30 pm, by meta100, [ 6 notes ] , Comments

Jun 09th, 10

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.

<script type="text/javascript" src="http://plugins.meta100.com/mguides/javascripts/mGuidesUI_min.js" charset="UTF-8"></script>

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

∞ 5:23 pm, by meta100, [ 17 notes ] , Comments

May 15th, 10

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.

<script type="text/javascript" src="http://meta100.github.com/mColorPicker/javascripts/mColorPicker_min.js" charset="UTF-8"></script>

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

Use: Insert HTML5 markup for color picker.

Example 1:

<input type="color" />

Example 1

Example 2:

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

<input type="color" value="#ff0667" />

Example 2

Example 3:

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

<input type="color" value="#ff0667" data-hex="true" />

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.

<input type="color" value="#ff0667" data-text="hidden" style="height:20px;width:20px;" />

Example 4

Example 5:

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

<input id="color_5" type="color" value="#ff0667" data-text="hidden" style="height:20px;width:20px;" />
<script type="text/javascript">
  $(document).ready(function () {
    $('#color_5').bind('colorpicked', function () {
      alert($(this).val());
    });
  });
</script>

Example 5

∞ 5:53 pm, by meta100, [ 29 notes ] , Comments