customSelect plugin with hidden elements

There is a problem where HTML select elements that are initially hidden do not update when their value is changed.  This is because the plugin cannot get the width of the element if not on the screen.

Workaround is to only trigger the plugin on hidden elements when they become visible.  A quick way to do this is to use a customSelectHidden class on the hidden selects and when they become visible run this code…

$('.customSelectHidden:visible').removeClass('customSelectHidden').addClass('customSelect').customSelect();

Media queries in javascript using window.matchMedia()

Window.matchMedia() returns a new MediaQueryList object representing the parsed results of the specified media query string.

if (window.matchMedia("(min-width: 400px)").matches) {
    /* the view port is at least 400 pixels wide */
} else {
    /* the view port is less than 400 pixels wide */
}

Mozilla API documentation:
https://developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia

Convert HTML Entities for use in JavaScript

If you use HTML entities in part of your markup and you want jQuery to copy it to another element, the new element will show the full HTML entity rather than the corresponding character.

If this happens you can run the text to be copied through the following function and the characters will be displayed and not the HTML entities.


/**
* converts HTML entities to the decimal equivalent
* @param {string} text
* @returns {string}
*/
Class.prototype.htmlEntitiesToDecimalCode = function (text) {

    'use strict';

    var aCodes = [],
        i;

    aCodes[60] =   'lt';
    aCodes[62] =   'gt';
    aCodes[171] =  'laquo';
    aCodes[187] =  'raquo';
    aCodes[732] =  'tilde';
    aCodes[8194] = 'ensp';
    aCodes[8195] = 'emsp';
    aCodes[8211] = 'ndash';
    aCodes[8212] = 'mdash';
    aCodes[8216] = 'lsquo';
    aCodes[8217] = 'rsquo';
    aCodes[8220] = 'ldquo';
    aCodes[8221] = 'rdquo';
    aCodes[8249] = 'lsaquo';
    aCodes[8250] = 'rsaquo';

    for (i in aCodes) {
        if (aCodes.hasOwnProperty(i)) {
            text = text.split('&' + aCodes[i] + ';').join('&#' + i + ';');
            text = text.split('&' + aCodes[i] + ';').join('&#' + i + ';');
        }
    }

    return text;
};

Nice reference for more character codes: http://www.danshort.com/HTMLentities/

You might not need jQuery

jQuery and its cousins are great, and by all means use them if it makes it easier to develop your application.

If you’re developing a library on the other hand, please take a moment to consider if you actually need jQuery as a dependency. Maybe you can include a few lines of utility code, and forgo the requirement. If you’re only targeting more modern browsers, you might not need anything more than what the browser ships with.

At the very least, make sure you know what jQuery is doing for you, and what it’s not. Some developers believe that jQuery is protecting us from a great demon of browser incompatibility when, in truth, post-IE8, browsers are pretty easy to deal with on their own.

http://youmightnotneedjquery.com/