About me

jherax.js + javascript programming + david rivera perez

DAVID RIVERA PEREZ
Bogotá D.C. Colombia
Software Developer
LinkedIn ProfileProfile
Stack Overflow
Stack Careers

I am a software developer from Bogotá-Colombia, geek of JavaScript, jQuery and C#. I have worked in the back-end (C#, Java, VB.Net) and I've also played the role of database administrator (SQL Server) but really I'm passionate about JavaScript and the front-end development. I like creating web applications and in general, develop quality software following the best practices of programming and attributes of functionality, reusability and maintainability.

Speaking of web development, I want to mention three important architectural patterns, MVC (Model-View-Controller), MVP (Model-View-Presenter) and MVVM (Model-View-viewModel), with which it will be much easier to develop structured web applications. Recently, I started using the MVVM pattern, and I liked the way how it separate and communicates the presentation (HTML) and the JavaScript logic.

MVVM is an architectural pattern based on MVC and MVP which attempts to separate the development of user-interfaces (UI) from that of the business logic and behavior in an application. This pattern makes use of declarative "data-bindings" that allow interaction between "View" and "Model" through a "ViewModel". The viewModel uses an "observable" object which implements the Observer Pattern to notify changes and automatically detect dependencies to update. In JavaScript we can find some good MVVM Frameworks like KnockoutJS and Kendo MVVM (demo)

There is an old saying: Practice makes perfect; read, be documented, and do testing are good habits that we should acquire, the time, practice and perseverance will polish our skills, then we will not be developers who "implement other solutions", but those that create solutions.

JSU library

This is a library of JavaScript / jQuery utilities, which includes tools for data validation and text formatting, plugins for tooltip, modal-windows and positioning elements, resources injection, string and JSON manipulation, object cloning, sorting arrays, and other features.
Go to the API reference.

Getting Started

The library has a dependency on jQuery 1.8+ which must be loaded before jsu-library.
It also requires some CSS rules for functions showing tooltips, loadings, among others.

If jQuery.ui.position is available, all tooltips will be positioned using jQuery.ui, otherwise an internal implementation for positioning will be used.

fnShowDialog is a facade for jQuery.ui.dialog and has a dependency on jQuery.ui 1.9+.
But if you don't want to use jQuery.ui as the default implementation, you can override the method by specifying the source property with the new implementation, e.g. jsu.fnShowDialog.source = function (options) { ... }

The library has the following structure:


(function () {
  //None of below settings are mandatory.

  //We set the container for dynamic HTML
  jsu.wrapper = "#main-section";

  //We set the language setting
  jsu.regional.set(jsu.regional.english);

  //Sets the default position for all tooltips
  jsu.settings.position = {
    at: "left bottom",
    my: "left+2 top+5"
  };

  //Add your code...
}());

In many programming languages, namespacing is a technique employed to avoid collisions with other objects or variables in the global context. They're also extremely useful for helping organize blocks of functionality in your application into easily manageable groups that can be uniquely identified.

Global variables should be reserved for objects that have system-wide relevance and they should be named to avoid ambiguity and minimize the risk of naming collisions. In practice this means you should avoid creating global objects unless they are absolutely necessary.

Is critical as it's important to safeguard your code from breaking in the event of another script on the page using the same variable or method names as you are. To overcome some of these issues, we take advantage of the Module Pattern through namespace injection. The logic is shielded from the global scope by a function wrapper (usually an IIFE) which exposes an object representing the module’s public interface.


//This encapsulated function is called IIFE
//Immediately-Invoked Function Expressions
var MODULE = (function () {
  var api = {},
      privateVar;

  function privateFunction() {}
  function exposedFunction() {}

  //expose the public interface
  api.publicMethod = exposedFunction;
  return api;
}());

I recommend this excellent book: Learning JavaScript Design Patterns.
Also worth reading these articles:

API Reference

This method makes life easier when you require create nested namespaces.
For example, you need to create the following object structure:


// way 1: we can create the structure through an IIFE
(function () {
  jsu.createNS("animation.tools");

  // If you use local/cached references is recommended declare them
  // within a function or module at the top of your function scope
  // (this is a dependancy declaration pattern)
  var _2d = jsu.createNS("animation.g2D"),
      _3d = jsu.createNS("animation.g3D");

  // you can get the reference of created namespace
  _2d.slide = function() {};
  _3d.cubic = function() {};
}());

// way 2: passing the object reference as a proxy
(function (proxy, undefined) {
  proxy.slide = function() {};
})(jsu.createNS("animation.g2D"));

(function (proxy, undefined) {
  proxy.cubic = function() {};
})(jsu.createNS("animation.g3D"));

// way 3...n, you can use Module Pattern: loose augmentation, etc...

This namespace exposes objects and methods to setup the current culture preferences.
The available languages are jsu.regional.english and jsu.regional.spanish
The spanish language is the default and can be accessed through jsu.regional.current
You can specify another language by calling the set() method, for instance: jsu.regional.set(jsu.regional.english);
Also you can define a new language settings, consider the following example:


(function () {
  // Creates the language object (italian)
  jsu.regional.italian = {
    culture: "it", //locale codes: http://www.science.co.il/Language/Locale-codes.asp
    wordPattern: null, //regular expression pattern for text capitalization in fnCapitalize
    decimalMark: ".", //the decimal separator symbol used by fnNumericFormat
    thousandsMark: ",", //the thousands separator symbol used by fnNumericFormat
    timeFormat: "HH:mm", //time format. HH: 00-23 hour, hh: 01-12 hour, mm: minutes, ss: seconds
    dateFormat: "MM/dd/yyyy", //date format. dd: 2-digit day, MM: 2-digit month, yyyy: 4-digit year
    dateFormatError: "Il formato della data non è corretta", //text for fnIsValidDate when date format is wrong
    dateIsGreater: "La data non può essere maggiore di oggi", //text for fnIsValidDate when date can't be greater than...
    dateIsLesser: "La data non può essere minore di oggi", //text for fnIsValidDate when date can't be lesser than...
    validateForm: "Il pulsante deve essere all'interno di <form>", //text for $.fnEasyValidate validating the button
    validateRequired: "Questo campo è obbligatorio", //text for $.fnEasyValidate when validating required fields
    validateFormat: "Il formato non è corretto", //text for $.fnEasyValidate when validating a wrong format
    dialogTitle: "Informazioni", //default title for fnShowDialog windows
    dialogCancel: "Cancellare", //default text for $.fnConfirm "cancel" button
    dialogOK: "Concordare" //default text for $.fnConfirm "agree" button
  };
  // Sets the new language settings
  jsu.regional.set(jsu.regional.italian);
}());

If you want to provide additional languages for other plugins, then you can pass a function as the second parameter in the method set(); Keep in mind that some plugins can only be configured previous to its initialization. If we are using jQuery.ui, we can provide a language to configure the datepicker widget. 


(function () {
  // We will create italian language for datepicker plugin
  // Additional languages for datepicker can be found at:
  // https://github.com/jquery/jquery-ui/tree/master/ui/i18n
  $.datepicker.regional['it'] = {
    closeText: 'Chiudi',
    prevText: '<Prec',
    nextText: 'Succ>',
    currentText: 'Oggi',
    monthNames: ['Gennaio','Febbraio','Marzo','Aprile','Maggio','Giugno','Luglio','Agosto','Settembre','Ottobre','Novembre','Dicembre'],
    monthNamesShort: ['Gen','Feb','Mar','Apr','Mag','Giu','Lug','Ago','Set','Ott','Nov','Dic'],
    dayNames: ['Domenica','Lunedì','Martedì','Mercoledì','Giovedì','Venerdì','Sabato'],
    dayNamesShort: ['Dom','Lun','Mar','Mer','Gio','Ven','Sab'],
    dayNamesMin: ['Do','Lu','Ma','Me','Gi','Ve','Sa'],
    weekHeader: 'Sm',
    dateFormat: 'dd/mm/yy',
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: false,
    yearSuffix: ''
  };
  // Sets the new language settings
  jsu.regional.set(jsu.regional.italian, function () {
    $.datepicker.setDefaults($.datepicker.regional['it']);
  });
}());

This namespace defines global settings that are used by some methods.

jQuery Plugins

Usage

Detects the browser via userAgent; it is an old way of validating the browser, since jQuery 1.9+ deprecated the browser property. This method is not reliable for detecting capabilities, instead use the feature detection approach, as does Modernizr.

Returns Object


  //see the browser and version.
  //the browser object is immutable.
  console.log(jsu.browser);

  //search for a specific browser
  if (jsu.browser.msie) { ... }
  if (jsu.browser.chrome) { ... }
  if (jsu.browser.mozilla) { ... }
  if (jsu.browser.opera) { ... }

Determines if the @object parameter is a DOM Element.

Returns Boolean


  var obj = { nodeType: "Element" };
  if (jsu.isDOM(obj)) { ... } //false : Object

  obj = document.getElementById("txtName");
  if (jsu.isDOM(obj)) { ... } //true : DOM Element

  obj = $(":button").get(0);
  if (jsu.isDOM(obj)) { ... } //true : DOM Element

  obj = $(":button");
  if (jsu.isDOM(obj)) { ... } //false : jQuery

Determines if the @object parameter is a function.

Returns Boolean


  var fn = {};
  if (jsu.isFunction(fn)) { fn(); } //false : Object

  fn = null;
  if (jsu.isFunction(fn)) { fn(); } //false : Null

  fn = "function";
  if (jsu.isFunction(fn)) { fn(); } //false : String

  fn = function () { alert("expression"); };
  if (jsu.isFunction(fn)) { fn(); } //true : Function

  function foo () { alert("declaration"); };
  if (jsu.isFunction(foo)) { foo(); } //true : Function

This is a reference to JSON.stringify and provides a polyfill for old browsers. fnStringify serializes an object, array or primitive value and return it as JSON.

Returns String


  var oPerson = {
      name: "David",
      sex: "male",
      age: 30
  };
  // Serializes the oPerson object
  console.log(jsu.fnStringify(oPerson));

  // We use jQuery.extend to merge the contents of
  // two or more objects together into the first object.
  var oNew = $.extend({ alias: 'jherax' }, oPerson);
  console.log(jsu.fnStringify(oNew));

This object has two methods to determine the category of an <input> element.


  <!--We create the elements to test-->
  <input type="radio" id="radio" />
  <input type="date" id="date" />
  <textarea id="area"></textarea>


(function () {
  //.get(index) retrieves the DOM element
  var area = $("#area").get(0),
      date = $("#date").get(0),
      radio = $("#radio").get(0);
  if (jsu.inputType.isText(area)) area.value = "Textarea is inputType.isText";
  if (jsu.inputType.isText(date)) date.value = new Date().toISOString().substring(0, 10);
  if (jsu.inputType.isCheck(radio)) radio.checked = true;
}());

This function allow us to determine if an event handler (defined by @eventname + @namespace) was created previously.

Event namespacing is a technique that allows us to handle tasks differently depending on the event namespace used, and it is very useful when you have attached several listeners to the same event, and need to do something with just one of them.

Returns Boolean


var runTest = (function ($) {
  var c1 = 0, c2 = 0;

  return function (selector) {
    var elem = $(selector);

    //creates the event handler without a namespace
    c1 += 1;
    elem.click(function () {
      console.log("+ Not namespaced:", c1);
    });

    //checks if the namespaced event handler was previously created
    var created = jsu.handlerExist(elem.get(0), "click", "fnHighlight");

    //creates the event handler by namespacing the event
    if (!created) {
      c2 += 1;
      elem.on("click.fnHighlight", function (e) {
        var t = " " + c2 + ":";
        console.log("* Event type" + t, e.type);
        console.log("* Namespaced" + t, e.namespace || e.handleObj.namespace);
      });
    }

    //triggers the event handler
    elem.trigger("click");

    //triggers an event handler by its namespace
    //elem.trigger("click.fnHighlight");
  };
}(jQuery));


  //we are going to perform some tests
  var i = 4, obj = {};
  //obj = $("#list-of-methods").get(0);

  while (i -= 1) {
    //creates the click handlers
    runTest(obj);
    console.log("---");
  }

  //retrieves the handlers created (non-public jQuery API)
  var handlers = (jQuery._data(obj, 'events') || {}).click || [];
  console.log("click handlers:", handlers);

Builds the event name, by appending a period and the @namespace at the end of @eventname.

Binding and unbinding events is a common pattern in the development of jQuery plugins, so you can manage the actions performed by an event, but what if do I have more than one event-listener bound to the same event and I want to do something with just one of them?

Event namespacing is a technique that provides a way to manage specific event handlers.
Take a look at these articles: Namespace your events and jQuery event names and namespaces

Returns String


//delegates the click event to the document
$(document)
  .off("click.highlight") //unbinds the event-handler by its namespace
  .on(jsu.nsEvents("click", "highlight"), "[data-role=highlight]", function (e) {
      $(this).addClass("jsu-highlight");
  });

//attaches the same event-handler to different events
$(".jsu-maxlength")
  .off(".maxLength") //unbinds all event-handlers by its namespace
  .on(jsu.nsEvents("keypress input paste", "maxLength"), function (e) {
      //implementation
  });

Dynamically adds a script. This method is useful to insert JavaScript code from an external file.

Note: By default the resource is loaded asynchronously via jQuery.ajax, in which case, the method returns a jqXHR object that implements the Promise interface providing all methos of the Deferred object. Keep in mind that using jQuery.ajax you can not request resources hosted on another domain, or use the file:/// protocol, unless you configure the .ajax() method for such case (see jQuery.ajaxPrefilter)

If you set createTag: true then the <script> element is created, in which case the method returns the DOM Element of the <script> created. The <script> is inserted before the last script executed or before the script specified by @options.before

Returns Element or jqXHR

► module.js (this is the script to load)


var MODULE = (function () {
  var date = new Date().toISOString();
  console.log(">> MODULE loaded > " + date);
  return {
      "name": "module.js",
      "date": date
  };
}());

► main.js (this is the main script file)


(function (demo, context, jsu, undefined) {
  /* 1 */
  //creates the <script> element to load
  //the file, then it is inserted before main.js
  //and runs the "onload" callback after the
  //script has been loaded and executed.
  //see: Script-injected
  demo.scriptTag = function () {
    setTimeout(function () {
      printBegin("1. Main stack");
      //ensures that MODULE does not exist
      if(context.MODULE) MODULE = undefined;
      jsu.fnAddScript({
        src: "demos/fnAddScript/module.js",
        before: "main.js",
        createTag: true,
        onload: function () {
          console.log("1. onload callback > MODULE:", MODULE);
        }
      });
      console.log("1. Main stack > MODULE:", context.MODULE);
    }, 100);
  }

}(jsu.createNS("demo"), window, jsu));

//writes the message in the console
function printBegin (text) {
  console.log("%c" + text + " > start: " +
    new Date().toISOString(), "color: green");
}


(function (demo, context, jsu, undefined) {
  /* 2 */
  //loads the file asynchronously via $.ajax, and executes 
  //the method ".done()" from the returned jqXHR object
  demo.ajaxAsync = function () {
    setTimeout(function () {
      //ensures that MODULE does not exist
      if(context.MODULE) MODULE = undefined;
      printBegin("2. Main stack");
      jsu.fnAddScript("demos/fnAddScript/module.js")
        .done(function () {
          console.log("2. Async promise > MODULE:", MODULE);
        });
      console.log("2. Main stack > MODULE:", context.MODULE);
    }, 200);
  }

}(jsu.createNS("demo"), window, jsu));


(function (demo, context, jsu, undefined) {
  /* 3 */
  //loads the file synchronously via $.ajax, and executes 
  //the method ".done()" from the returned jqXHR object
  demo.ajaxSync = function () {
    setTimeout(function () {
      //ensures that MODULE does not exist
      if(context.MODULE) MODULE = undefined;
      printBegin("3. Main stack");
      jsu.fnAddScript({
        src: "demos/fnAddScript/module.js",
        async: false
      }).done(function () {
          console.log("3. Sync promise > MODULE:", MODULE);
      });
      console.log("3. Main stack > MODULE:", context.MODULE);
    }, 300);
  }

}(jsu.createNS("demo"), window, jsu));


  //Ejecutamos las pruebas
    demo.scriptTag();

  //demo.ajaxAsync();
  //demo.ajaxSync();

Dynamically adds an external stylesheet file (CSS).
This method is useful to inject a css file to the document.

Returns Element

► demo.css (this is the css file to load)


  body { color: red !important; }

► main.js (this is the main script file)


  setTimeout(function () {
    //adds the stylesheet just before the <link> jherax.min.css
    var lnk = jsu.fnAddCSS("demos/fnAddCSS/demo.css", "jherax.min.css");
    lnk.id = "lnk-jherax";

    //appends the stylesheet to the end of <head> element
    //jsu.fnAddCSS("demos/fnAddCSS/demo.css");
  }, 900);

fnEscapeRegExp (text)

Escapes the special characters in the String @text so that it can serve as a literal pattern in a regular expression. This mean that the special characters in a regular expression will be treated as literals.
For instance, in the text "(A+)" the special characters are treated as literal just like that: "\(A\+\)"

Returns String or Null if @text is not a String


  var path = "C:\\Documents",
      re1 = new RegExp(path),
      //escapes the special characters
      re2 = new RegExp(jsu.fnEscapeRegExp(path));

  console.log("String: ", path);

  console.log("re1 unescaped: ", re1.source); /* C:\Documents */
  console.log("test re1: ", re1.test(path));  /* false */

  console.log("re2 escaped: ", re2.source);  /* C\:\\Documents */
  console.log("test re2: ", re2.test(path)); /* true */

Gets the value of a specific key read from the querystring in the current url.

Returns String. If the key is not found in the url, an empty string is returned.


  //suppose we have the following url:
  //http://jherax.github.io/?lang=english#fngetquerytostring-key

  //we want to retrieve the value of the key [lang]
  var lang = jsu.fnGetQueryToString("lang");
  //we get the value: "english"
  console.log(lang);

Gets the values from the querystring in the url and saves them as an Object literal.

Note: The @key parameter is not mandatory, and if it is not specified, all keys found in the querystring will be retrieved as a Object literal.

Returns Object


  //suppose we have the following url:
  //http://www.youtube.com/watch?v=hrZl_EQUbRQ&hd=1

  //we want to retrieve all keys from the querystring
  var q = jsu.fnGetQueryToObject();
  console.log(q); //prints: {v: "hrZl_EQUbRQ", hd: "1"}

  //we want to retrieve the value of the key [v]
  var v = jsu.fnGetQueryToObject("v");
  console.log(v); //prints: {v: "hrZl_EQUbRQ"}

Copies an object and freezes all navigable properties in the object (set them to read-only). Unlike the Object.freeze() method, fnFreezeObject performs a deep copy of the @object and prevents future changes in that object, such as add, delete or modify properties.

In some cases we may need to keep an immutable object, and for that, we can use this method, with which we can copy and seal the object attributes.

Returns Object


  var oSource = {
    serie: "Lenovo IdeaPad Z710",
    features: {
      processor: "Intel Core i7-4700MQ",
      graphics: "NVIDIA GeForce GT 745M",
      memory: "PC3-12800 DDR3L",
      ram: 8
    },
    getBasicInfo: function () {
      console.log(
        "\n> Processor: " + this.features.processor +
        "\n> RAM (GB): " + this.features.ram);
    }
  };

  //copy and freezes the object properties
  var oFrozen = jsu.fnFreezeObject(oSource);

  //changes some properties in both objects
  oSource.features.chasis = "Thermaltake";
  oFrozen.features.chasis = "Thermaltake";
  oSource.features.ram = 16;
  oFrozen.features.ram = 16;

  console.log("Changed properties in both objects?");
  console.log("SOURCE OBJECT:\n", oSource.features);
  console.log("FROZEN OBJECT:\n", oFrozen.features);

Displays the date according to the format specified by dateFormat and timeFormat in jsu.regional

This method provides support for ISO 8601 format, which is the standard international format used by the input elements of type date, datetime, datetime-local. According to w3.org the value attribute must be a valid date-time text as defined in the standard: RFC 3339.

Returns Object with the following properties: 


(function () {
  //We set the language setting (not mandatory, spanish by default)
  jsu.regional.set(jsu.regional.english);

  //No arguments, gets the current date
  var d = jsu.fnGetDate();
  console.log("Current:", d.date, "hour:", d.time);

  //We send a string (accepts String|Number|Date|Object)
  d = jsu.fnGetDate("01-31-2000");
  console.log("Date:", d.date);

  //We specify an Object with the output format: ISO-8601
  var dt = "12/24/2013 23:59:13"; /* mm/dd/yyyy */
  var iso = jsu.fnGetDate({ date: dt, ISO8601: true });
  console.log("ISO 8601:", iso.dateTime);

  //We provide the input date in ISO 8601
  dt = "1995-12-17T03:24:59Z"; //Z UTC
  iso = jsu.fnGetDate({ date: dt });
  console.log("UTC:", iso.dateTime);

  //We provide the input date in ISO 8601
  dt = "1995-12-17T03:24:59-05:00"; //-05:00 offset
  iso = jsu.fnGetDate({ date: dt });
  console.log("GMT:", iso.dateTime);

  //We provide the input date as Date object
  dt = new Date(1395971368528);
  d = jsu.fnGetDate({ date: dt });
  console.log("Regional:", d.dateTime);
}());

Gets the Date object from a String that meets the ISO 8601 format for dates.
It is mandatory that the date is provided in the ISO 8601 format, otherwise the method returns null

Note: If the time offset GMT (-+hh:mm) is not present, it works with the local time zone setting.

Returns Date or Null


  var date;
  date = jsu.fnDateFromISO8601("12/17/1995"); //no ISO 8601
  console.log("Date:", date && date.toLocaleString());
  
  date = jsu.fnDateFromISO8601("1995-12-17T03:24:59Z");
  console.log("Date:", date && date.toLocaleString());

Encodes a string, by converting special characters such as <, >, &... to the corresponding HTML entity. For instance, the text <p>hello</p> is encoded as follows: &lt;p&gt;hello&lt;/p&gt;

Note: This method also can be used as a delegate for the jQuery methods:
.val() and .text() with the following signature: fnGetHtmlText (index, value)

Returns String with encoded html.

► Basic usage


  var html = "<li> Command & Conquer </li>";

  //gets the encoded html-text
  var htmlEncoded = jsu.fnGetHtmlText(html);

  console.log("Original:", html);
  console.log("Encoded:", htmlEncoded);

► Advanced usage


  <textarea rows="5"></textarea>
  <textarea rows="5" id="preview"></textarea>
  <!-- We specify the HTML to encode -->
  <div id="html-to-encode">
    <h3>fnGetHtmlText</h3>
    <u>HTML to encode</u>
  </div>


  setTimeout(function () {
    var html = $("#html-to-encode").html();
    $("textarea").val($.trim(html));
    //gets the encoded html-text
    console.log("Encoded:", jsu.fnGetHtmlText(html) );
    $("#preview").fnShowTooltip("This html will be encoded...");
  }, 1);

  setTimeout(function () {
    $(".vld-tooltip").remove();
    //used as a delegate method for .val() or .text()
    //(we just pass the reference to the method)
    $("#preview").val(jsu.fnGetHtmlText).fnShowTooltip("Encoded!");
  }, 2000);

fnGetSelectedText ()

Gets the selected text in the document and inside the text boxes.

Note: Currently the only elements that allow text selection safely are: <input type="text|search|password|tel|url"> and <textarea>

Returns Object with the following properties: 


  var sel = jsu.fnGetSelectedText();
  if (sel.text !== "") alert(sel.text);
  console.log(sel);

Gets the current position of the cursor in the @dom element.

Note: Currently the only elements that allow text selection safely are: <input type="text|search|password|tel|url"> and <textarea>. If @dom is not one of the above elements, it returns -1

Returns Number


  var elem = $("#txtName").val("Hello!").get(0),
      pos = jsu.fnGetCaretPosition(elem);
  console.log("caret position: ", pos);

Sets the @position of the cursor in the @dom element.

Note: Currently the only elements that allow text selection safely are: <input type="text|search|password|tel|url"> and <textarea>

Returns Undefined


  var elem = document.getElementById("txtName");
  elem.value = "Hello World!";
  elem.focus();
  jsu.fnSetCaretPosition(elem, 5);
  //cursor is positioned after "Hello"

Applies a transformation to the text and removes all consecutive line breaks, spaces, and tabs at the beginning and end of the text. If the whitespace characters occur in the middle of the text, also are removed. You can use this method as a jQuery extension, see jQuery.fnCapitalize.

The @type parameter determines the type of transformation. When you specify the value "word" for this parameter, you can define your own rules to transform lowercase the words in the text. The property jsu.regional.<language>.wordPattern is a regular expression that defines the words that keep lowercased.

Note: If @object is an Input Element, the value property is used as the text to format.

Returns String


  var text = "\n  make  your\t  code DRY  \n ";
  console.log('original text: "' + text + '"');
  console.log('word : "' + jsu.fnCapitalize(text, "word" ) + '"');
  console.log('title: "' + jsu.fnCapitalize(text, "title") + '"');
  console.log('first: "' + jsu.fnCapitalize(text, "first") + '"');
  console.log('upper: "' + jsu.fnCapitalize(text, "upper") + '"');
  console.log('lower: "' + jsu.fnCapitalize(text, "lower") + '"');

You can define which words keeps lowercased:


  (function () {
    var lang = jsu.regional;
    //we define the words that don't apply capital letter
    lang.english.wordPattern = /\s(?:And|Are|At|A|O[nrf]|By|In|The)\b/g;
    //we set the language settings
    lang.set(lang.english);

    var text = " pc AND KEYBOARD\t ArE oN tHe table ";
    console.log("Before: ", '"' + text + '"');
    //transforms the text after 2 seconds
    setTimeout(function () {
      text = jsu.fnCapitalize(text, "word");
      console.log("After: ", '"' + text + '"');
    }, 2000);
  }());

Sets the numeric format according to the current culture settings. If the @options parameter is not provided, the thousands separator and the decimal mark take the value of decimalMark and thousandsMark properties according to the current language setting in jsu.regional.current

Note: If @object is an Input Element, the value property is used as the text to format.
Note: You can use this method as a jQuery extension, see jQuery.fnNumericFormat.

Returns String with the formatted number.


(function () {
  //set the language settings
  jsu.regional.set(jsu.regional.english);

  //prints the current language object
  var lang = jsu.regional.current;
  console.log("culture:", lang.culture);
  console.log("decimalMark:", lang.decimalMark);
  console.log("thousandsMark:", lang.thousandsMark);

  var numberEnUS = "6079.249", //"." is the decimal separator (en-US)
      numberEsCO = "123456789,472"; //"," is the decimal separator (es-CO)

  //sends a string as the first argument
  var formatEnUS = jsu.fnNumericFormat(numberEnUS),
      formatEsCO = jsu.fnNumericFormat(numberEsCO, {
        inDecimalMark: ",", //decimal separator in numberEsCO
        inThousandsMark: "." //thousands separator in numberEsCO
      });

  console.log("number en-US:",   numberEnUS);
  console.log("formatted text:", formatEnUS);
  console.log("number es-CO:",   numberEsCO);
  console.log("formatted text:", formatEsCO);
}());

Customize the numeric format


  //here is not necessary the regional settings.
  //jsu.regional is ignored in this example.

  var numberEsCO = "1234567.89,472", //malformed number
      customFormat = jsu.fnNumericFormat(numberEsCO, {
        inDecimalMark: ",", //decimal separator in numberEsCO
        inThousandsMark: ".", //thousands separator in numberEsCO
        outDecimalMark: "dec", //decimal separator for outcome
        outThousandsMark: "'" //thousands separator for outcome
      });

  console.log("number es-CO:",   numberEsCO);
  console.log("formatted text:", customFormat);

Sending a DOM element


  //sets the language settings
  //jsu.regional.set(jsu.regional.english);

  var numberEnUS = "123456789.472",
      dom = $("#txtName").val(numberEnUS).get(0);

  //sends a DOM element as the first argument
  jsu.fnNumericFormat(dom);
  console.log("formatted DOM:", dom.value);

This Object provides a namespace for the functions validating specific formats.
Each function defined in the namespace receives the value parameter as the text to validate.
Note: Validators are also implemented as a jQuery extension, see jQuery.fnIsValidFormat.
Important The validator functions return Boolean

The value parameter is a String or DOM element inputType.isText.

  (function() {
    //Configures the language setting
    jsu.regional.set(jsu.regional.english);
    var _email = "some.gmail.com";
    var _pass = "insuff1ci3nt";
    var _dt = "10/31/2013 16:10";
    console.log("email:", jsu.fnIsValidFormat.email(_email));
    console.log("password:", jsu.fnIsValidFormat.password(_pass));
    console.log("datetime:", jsu.fnIsValidFormat.datetime(_dt));

    //Create a new validator for numbers
    jsu.fnIsValidFormat.set("number", function (text) {
      text = jsu.inputType.isText(text) ? text.value : text.toString();
      var pattern = /^(?:\d+\.)?\d+$/;
      return pattern.test(text);
    });

    //Redefine the validator for email
    jsu.fnIsValidFormat.set("email", function (text) {
      text = jsu.inputType.isText(text) ? text.value : text.toString();
      var pattern = /(\w[-._\w]*\w@\w[-._\w]*\w\.\w{2,3})/i;
      return pattern.test(text);
    });

    //Test the newly created validators
    console.log("number:", jsu.fnIsValidFormat.number("109.35"));
    console.log("email:", jsu.fnIsValidFormat.email("mail@yahoo.com"));
  })();

Evaluates whether the entry DOM element has the date format for the value property.
Date validations are performed according to jsu.regional by dateFormat and timeFormat
The validation message is displayed with a tooltip. If jQuery.ui.position is available, the tooltip is rendered by jQuery.ui.position, otherwise an extended method for jQuery.position is used.
Note: You can use this function as a jQuery extension, see jQuery.fnIsValidDate.
Important: You can customize the messages defined in jsu.regional namespace:
dateIsGreater dateIsLesser dateFormatError
Returns Boolean

  (function() {
    //Configures the language setting
    jsu.regional.set(jsu.regional.english);
    var d = new Date();
    $("#txtLicence").val(
      jsu.fnGetDate({ date: d.setHours(24) }).date);
    $("#txtBirthday").val(
      jsu.fnGetDate({ date: d.setHours(24) }).date);
  }());

  //Validates elements in the form
  $("#btnSend").on("click", function() {
    var dBirthday = $("#txtBirthday").get(0);
    var dDriverLic = $("#txtLicence").get(0);

    if (!jsu.fnIsValidDate(dDriverLic)) return false;
    if (!jsu.fnIsValidDate(dBirthday, {
        compareTo: dDriverLic.value,
        warning: "Your birthday can't be greater than driver's license expedition"
    })) return false;

    alert("Submit form");
  });

This function is very useful when you need display a validation message.
It shows the message in a tooltip at the right side of dom and focuses that element.
The tooltip element is painted according to the rules defined by .vld-tooltip class.
It has the following DOM structure: <span class="vld-tooltip"> your message </span>
Important: If jQuery.ui.position is available, the tooltip is rendered by jQuery.ui.position, otherwise an extended method for built-in jQuery.position is used.
Note: By specifying jsu.settings.position you can override the position for all tooltips.
Note: You can use this function as a jQuery extension, see jQuery.fnShowTooltip.
Returns Boolean, always returns false

  $(function() {
    // Configures the language setting
    jsu.regional.set(jsu.regional.english);

    var _email = $("#txtEmail").get(0);
    var _admission = $("#txtDate").get(0);

    if (!jsu.fnIsValidFormat.email(_email)) {
      // Displays the tooltip at the default position
      return jsu.fnShowTooltip(_email, "The email address is not valid");
    }
    if (!jsu.fnIsValidFormat.date(_admission)) {
      // Displays the tooltip at the specified position
      return jsu.fnShowTooltip(
        _admission,
        "The admission date is not valid", {
            at: "left bottom",
            my: "left+2 top+5"
        });
    }
  });

Sets the default position for all tooltips

  (function() {
    // Sets default position for tooltips
    jsu.settings.position = {
      at: "left bottom",
      my: "left+2 top+5"
    };
  }());

  $(function() {
    // Validates some fields
    if (!$("#txtBirthday").fnIsValidDate({
        warning: "Your next birthday can't be lesser than today",
        isFuture: true
    })) return false;

    var pass = $("#txtPassword");
    if (!pass.fnIsValidFormat("password")) {
      return !pass.fnShowTooltip("The password did not meet the requirements");
    }
  });

This is a facade for jQuery.ui.dialog which is a modal window useful for displaying text, DOM or jQuery elements. You can create dynamic html by passing the html string to the content property.
Generated HTML is appended by default to where jsu.wrapper selector indicate, but if you want to place it into a specific element, then you can set the appendTo property by specifying the container element.

Some images are used to display an icon to the left of text, but only works when content is plain text.
Also you can display existing HTML elements by passing the DOM or jQuery object to content property.

Note: By default, it has a dependency on jQuery.ui.dialog and has some css overrides, but you can redefine the functionality by providing a function reference to the jsu.fnShowDialog.source property, this way the dependency to jQuery.ui.dialog is removed. For consistency, the supplied function should have the same signature as the original fnShowDialog function (but is not mandatory).
Returns jQuery dialog element. 

  (function() {
    //sets the default container
    jsu.wrapper = "#page-wrapper";
    //configure the global language setting
    jsu.regional.english.dialogTitle = "System message";
    jsu.regional.set(jsu.regional.english);
  }());

  //simple dialog window
  $("#sample-1").on("click", function() {
    jsu.fnShowDialog({
      icon: "info",
      content: "This is the default dialog which is useful for displaying information."
    });
  });

  //modal confirmation window
  $("#sample-2").on("click", function() {
    jsu.fnShowDialog({
      icon: "alert",
      title: "Delete selected elements?",
      content: "These items will be permanently deleted<br>and cannot be recovered. Continue?",
      width: 330,
      buttons: {
        "Delete": function() {
          $(this).dialog("close");
        },
        "Cancel": function() {
          $(this).dialog("close");
        }
      }
    });
  });

  //dialog window with an existing element
  $("#sample-3").on("click", function() {
    jsu.fnShowDialog({
      appendTo: "#main-form",
      content: $("#wizard-view"),
      closeOnPageUnload: true,
      maxHeight: 300
    });
  });

Redefine the original function to use kendo.ui instead of jquery.ui

  // basic implementation of kendo.ui.Window
  function fnShowWindow(options) {
    $("#wnd-dialog").remove();
    //TODO: check for dependencies to prevent code breaks.
    var wnd = $("<div id='wnd-dialog'>")
      .append(options.content)
      .appendTo(options.appendTo || "body");
    var dialog = wnd.data("kendoWindow");
    if (!dialog) {
        (dialog = wnd.kendoWindow({
            minHeight: +options.minHeight || 50,
            height: +options.height || null,
            minWidth: +options.minWidth || 90,
            width: +options.width || 320,
            title: options.title || "",
            actions: ["Close"],
            modal: true
        }).data('kendoWindow')).center();
    }
    else dialog.open();
    return dialog;
  }

  (function() {
    //overrides the original function, and removes the jquery.ui dependency
    jsu.fnShowDialog.source = fnShowWindow;
  }());

  $(function() {
    //displays the new dialog window
    jsu.fnShowDialog({
      title: "System Message",
      content:
        '<div class="wnd-icon alert"></div>' +
        '<p>Open console to view results » <em>F12</em> or <em>shift + ctrl + i</em></p>'
    });
  });

Shows an overlay screen with the "loading" animation at the center.
The progress animation is done via CSS3, therefore you must add the following css rules:
#floatingBarsG .blockG @keyframes fadeG .bg-fixed .bg-opacity
Returns Boolean, always returns true

<div id="target" style="display: inline-block; width: 200px; height: 200px; border:1px solid #bbb; border-radius:10px; background: #eee;"></div>

  $(function() {
    //Shows the loading animation at the center of screen
    jsu.fnLoading();
    setTimeout(function() {
      jsu.fnLoading({ hide: true });
    }, 3000);

    //Shows the loading animation at the center of #target
    setTimeout(function() {
      jsu.fnLoading({ of: "#target" });
    }, 3200);
    setTimeout(function() {
      jsu.fnLoading({ hide: true });
    }, 6200);
  });

fnScrollbarWidth ()

This utility detects the width of the scrollbar in the browser, in pixels.
It is useful when you create layouts and the content exceeds the container size, then comes the scrollbar, taking space in the layout (used in fnShowdialog when maxHeight property was added and its default value was set to 86% of the screen height)
Returns Number

  var dialog = $("#popup");
  if (dialog.hasVScroll()) {
      var width = dialog.width();
      var scrollWidth = jsu.fnScrollbarWidth();
      dialog.width(width + scrollWidth);
  }

jQuery plugins

This is a set of utilities for jQuery.
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy API that works cross-browser. If you want to learn more about jQuery, here is a full guide: How jQuery Works.

jQuery.hasVScroll ()

This plugin detects if the first element in the collection has a vertical scrollbar.
Returns Boolean

  var dialog = $("#popup");
  if (dialog.hasVScroll()) {
    var width = dialog.width();
    var scrollWidth = jsu.fnScrollbarWidth();
    dialog.width(width + scrollWidth);
  }

jQuery.hasHScroll ()

This plugin detects if the first element in the collection has a horizontal scrollbar.
Returns Boolean

  var dialog = $("#popup");
  if (dialog.hasHScroll()) {
    var height = dialog.height();
    var scrollWidth = jsu.fnScrollbarWidth();
    dialog.height(height + scrollWidth);
  }

Position an element relative to another. This plugin extends jQuery's built-in .position() method. If jQuery.ui is not loaded, calling the .position() method will cause the internal implementation of the method to be used instead. If no arguments or the of property is not set, the default .position() method is called.
Returns jQuery

  setTimeout(function() {
    var target = $("#target");
    $("#floating").position = {
      of: target,
      at: "right center",
      my: "left+2 center"
    };
  }, 600);

  setTimeout(function() {
    $("#floating").position = {
      of: "form > p:first",
      at: "left bottom",
      my: "left+2 top+5"
    };
  }, 2000);

Centers an element relative to another. If no arguments or the of property is not set, matching elements are placed at the center of screen (with position: fixed)
Returns jQuery

  // positioning at the center of screen
  $(".notify").fnCenter();

  // positioning at the center of #target
  var div = $('<div id="divHello">').css({
    'padding': '20px',
    'background': '#ccc',
    'border-radius': '5px',
    'display': 'inline-block'
  }).appendTo("body").html("<h4>Hello jQuery</h4>");
  div.fnCenter({ of: "#target" });

Limits the maximum number of characters allowed for the matching elements inputType.isText.
A tooltip is placed to the right of the element, showing the actual number of characters typed.
By default the tooltip is positioned by .position() at: "right bottom" but this position can be overridden for all tooltips by setting the jsu.settings.position property; if you do not want to affect all tooltips, then you can specify the position by providing the position parameter to the function.
The appearance of the tooltip is ruled by the .vld-tooltip class.
Returns jQuery

  $("#txtName").fnMaxLength(20);
  $("#license").fnMaxLength(10, {
    at: "right top-5",
    my: "right bottom"
  });

Applies a transformation to the text and removes all consecutive line breaks, spaces, and tabs at the beginning and end of the text. If the whitespace characters occur in the middle of the text, also are removed. This is a jQuery extension of the method fnCapitalize.

The @type parameter determines the type of transformation. When you specify the value "word" for this parameter, you can define your own rules to transform lowercase the words in the text. The property jsu.regional.<language>.wordPattern is a regular expression that defines the words that keep lowercased.

Note: The value property in the matching elements is used as the text to format.
Note: The text is transformed when the blur event is raised.

Returns String


  setTimeout(function () {
    var text = "\n do\t it  with\t  jQuery\t\n ";
    var $input = $("#txtName").val(text).width(180);
    $input.fnShowTooltip("This text will be transformed");
    $input.fnCapitalize("title").focus();
  }, 1);

  //raises the "blur" event
  setTimeout(function () {
    alert("blur to transform");
    $("#txtName").blur();
  }, 2000);

You can define which words keeps lowercased:


  (function () {
    //we define the words that don't apply capital letter
    jsu.regional.english.wordPattern = /\s(?:And|Are|At|A|O[nrf]|By|In|The)\b/g;
    //we set the language settings
    jsu.regional.set(jsu.regional.english);
    //initializes the plugin
    var $input = $("#txtName").fnCapitalize("word");
    var text = " pc AND KEYBOARD\t ArE oN tHe table ";
    //raises the "blur" event to transform the text
    $input.val(text).focus();
    setTimeout(function () {
      alert("transform on blur");
      $input.blur();
    }, 2000);
  }());

Sets the numeric format according to the current culture settings. If the @options parameter is not provided, the thousands separator and the decimal mark take the value of decimalMark and thousandsMark properties according to the current language setting in jsu.regional.current

Note: The value property in the matching elements is used as the text to format.
Note: The text is formatted when the blur or keyup events are raised.
Note: This is a jQuery extension of the method fnNumericFormat.

Returns jQuery


(function () {
  //set the language settings
  jsu.regional.set(jsu.regional.english);

  //prints the current language object
  var lang = jsu.regional.current;
  console.log("culture:", lang.culture);
  console.log("decimalMark:", lang.decimalMark);
  console.log("thousandsMark:", lang.thousandsMark);

  var box = $("#txtName"),
      numberEnUS = "6079.249", //"." is the decimal separator (en-US)
      malformed = "1234567.89,472"; //malformed number

  box.val(numberEnUS).fnNumericFormat().blur();
  console.log("original:", numberEnUS, "formatted:", box.val());

  //Customize the numeric format.
  //jsu.regional is ignored for this case.
  box.val(malformed).fnNumericFormat({
    inDecimalMark: ",", //decimal separator in malformed
    inThousandsMark: ".", //thousands separator in malformed
    outDecimalMark: "dec", //decimal separator for outcome
    outThousandsMark: "'" //thousands separator for outcome
  }).blur();

  console.log("original:", malformed, "formatted:", box.val());
}());

jQuery.fnNumericInput ()

This function creates a mask to accept only numeric characters in the input.
Returns jQuery

  // allowed characters: [0-9]
  $(".vld-numeric").fnNumericInput();

This function applies a custom mask to accept only those character that meet the pattern.
Returns jQuery

  // allowed characters: a b c 1 - 6
  $("#txtGrade").fnCustomInput("abc1-6");

  // allowed characters: @ ñ ; . - [A-Za-z0-9_]
  $("#txtEmail").fnCustomInput(/[@ñ;.\-\w]/);

This function prevents the keyset to be pressed.
To allow a set of characters, better to use $.fnCustomInput
Returns jQuery

  // prevents pressing the spacebar in the document
  $(document).fnDisableKey(" ");

  // prevents pressing the keys q,w,e,r,t at #txtName
  $("#txtName").fnDisableKey("qwert");

This is the jQuery extension for the fnIsValidFormat validators and performs the validation by passing the validator name as the type argument. The value property of the first matching element is used as the text to validate.
Note: You can create or redefine validators through jsu.fnIsValidFormat.set() method. Once defined the validator, it can be used inmediately by providing the validator name as the type argument.
Returns Boolean

  (function() {
    //Configures the language setting
    jsu.regional.set(jsu.regional.english);
    var dt = $("#date").val("12/31/2013 23:10");
    var isValid = dt.fnIsValidFormat("datetime");
    console.log("datetime:", isValid);

    //Create a new validator for numbers
    jsu.fnIsValidFormat.set("number", function (text) {
      text = jsu.inputType.isText(text) ? text.value : text.toString();
      var pattern = /^(?:\d+\.)?\d+$/;
      return pattern.test(text);
    });

    //Test the newly created validator
    var age = $("#age").val("30");
    console.log("number:", age.fnIsValidFormat("number"));
  })();

This is the jQuery extension for fnIsValidDate function.
Evaluates whether the first matching element has the date format for the value property.
Date validations are performed according to jsu.regional by dateFormat and timeFormat
The validation message is displayed with a tooltip. If jQuery.ui.position is available, the tooltip is rendered by jQuery.ui.position, otherwise an extended method for jQuery.position is used.
Important: You can customize the messages defined in jsu.regional namespace:
dateIsGreater dateIsLesser dateFormatError
Returns Boolean

  (function() {
    //Configures the language setting
    jsu.regional.set(jsu.regional.english);
    var d = new Date();
    $("#txtLicence").val(
      jsu.fnGetDate({ date: d.setHours(24) }).date);
    $("#txtBirthday").val(
      jsu.fnGetDate({ date: d.setHours(24) }).date);
  }());

  //Validates elements in the form
  $("#btnSend").on("click", function() {
    if (!$("#txtLicence").fnIsValidDate()) return false;
    if (!$("#txtBirthday").fnIsValidDate({
        compareTo: $("#txtLicence").val(),
        warning: "Your birthday can't be greater than driver's license expedition",
        position: {
          at: "left bottom",
          my: "left+2 top+3"
        }
    })) return false;

    alert("Submit form");
  });

This is the jQuery extension for fnShowTooltip function.
This function is very useful when you need display a validation message.
A tooltip is shown at the right side of current element, and set focus on that element.
The tooltip element is painted according to the rules defined by .vld-tooltip class.
It has the following DOM structure: <span class="vld-tooltip"> your message </span>
Important: If jQuery.ui.position is available, the tooltip is rendered by jQuery.ui.position, otherwise an extended method for built-in jQuery.position is used.
Note: By specifying jsu.settings.position you can override the position for all tooltips.
Returns jQuery

  (function() {
    // Configures the language setting
    jsu.regional.set(jsu.regional.english);
    // Sets default position for tooltips
    jsu.settings.position = {
      at: "left bottom",
      my: "left+2 top+5"
    };
  }());

  $(function() {
    var _email = $("#txtEmail");
    var _admission = $("#txtDate");

    if (!_email.fnIsValidFormat("email")) {
      // Displays the tooltip at the default position
      return !_email.fnShowTooltip("The email address is not valid");
    }
    if (!_admission.fnIsValidFormat("date")) {
      // Displays the tooltip at the specified position
      return !_admission.fnShowTooltip(
        "The admission date is not valid", {
            at: "left+2 top-5",
            my: "left bottom"
        });
    }
    if (!$("#txtBirthday").fnIsValidDate({
        warning: "Your next birthday can't be lesser than today",
        isFuture: true
    })) return false;
  });

Validates the specified elements in the document. Validations can be performed automatically (depending on the css class provided by the element to validate), or customized (by providing the fnValidator option). If you want automatic validations, then set the css class to the elements to validate, by adding the prefix vld- plus the name of the validator (e.g. "vld-datetime"). As the default validations are performed by fnIsValidFormat(), you can also create new validators or redefine the existing ones through jsu.fnIsValidFormat.set() method, so you can customize the validators as you want.
These are the default css classes:

If you wish to validate a specific group of elements, then you can create a validation group by adding the data-group attribute to the validating elements and also to the validator button.
You can customize the message defined in jsu.regional validateFormat
Returns jQuery

<select id="ddlType" class="vld-required" data-group="group.a">
  <option value="0">Select...</option>
  <option value="1">Magnetic</option>
  <option value="2">Electric</option>
</select>
<p><input type="text" id="txtValue" class="vld-required" data-group="group.a" /></p>
<p><input type="text" id="txtDate" class="vld-date" /></p><!--This one is not in group.a-->
<p><input type="text" id="txtEmail" class="vld-email" /></p><!--This one is not in group.a-->
<p><textarea id="txtNotes" class="vld-required"></textarea></p><!--This one isn't in group.a-->
<button type="submit" id="btnAdd1" data-group="group.a">Add new item</button>
<button type="submit" id="btnAdd2">Add Notes</button>

$(document).on("ready", function () {
  $("#ddlType").chosen();
  $("#txtNotes").fnMaxLength(100);
  $("#txtValue").fnNumericInput();
  $("#txtDate").datepicker().addClass("no-auto-focus");
  $("#btnAdd2").fnEasyValidate();
  $("#btnAdd1").fnEasyValidate({
    firstItemInvalid: true,
    fnValidator: function (btn) {
      var num = $('#txtValue');
      if (+num.val() < 1000) {
        num.fnShowTooltip("Price must be greater than $999");
        return false; //prevent default actions
      }
      return true; //run default actions
    },
    fnBeforeTooltip: function(dom) {
      if ((/select/i).test(dom.nodeName)) {
        //changes the item to display tooltip
        dom.domTarget = $(dom).next().get(0);
      }
    }
  });
});
The magic of myth and legend has come true in our time. One types the correct incantation on a keyboard, and a display screen comes to life, showing things that never were nor could be;
The computer resembles the magic of legend in this respect, too. If one character, one pause, of the incantation is not strictly in proper form, the magic doesn't work. Human beings are not accustomed to being perfect, and few areas of human activity demand it. Adjusting to the requirement for perfection is, I think, the most difficult part of learning to program.
~ Frederick Brooks.