CSS Shrink Text to Fit to Container

jQuery Plugin to resize text to fit container

jQueryPlugin:

Shrink.js

(function($) {
    $.fn.textfill = function(maxFontSize) {
        maxFontSize = parseInt(maxFontSize, 10);
        return this.each(function(){
            var ourText = $("span", this),
                parent = ourText.parent(),
                maxHeight = parent.height(),
                maxWidth = parent.width(),
                fontSize = parseInt(ourText.css("fontSize"), 10),
                multiplier = maxWidth/ourText.width(),
                newSize = (fontSize*(multiplier-0.1));
            ourText.css(
                "fontSize", 
                (maxFontSize > 0 && newSize > maxFontSize) ? 
                    maxFontSize : 
                    newSize
            );
        });
    };
})(jQuery);

Javascript

$("div").textfill();

Reference to plugin

Test Your Javascript for performance before you go live

Optimizing your JavaScript is very important while you develop hybrid applications for mobile platform or web applications.
Few optimization steps to make your hybrid application faster and good.

1) Compress each of your JS and CSS files for removing white spaces and merging.
java -jar E:\Compress\yuicompressor-2.4.7\build\yuicompressor-2.4.7.jar E:\application\application.js -o
E:\application\application.js --charset utf-8 
java -jar E:\Compress\yuicompressor-2.4.7\build\yuicompressor-2.4.7.jar E:\application\application.css -o E:\application\application.css --charset utf-8

2) Test Your Javascript for performance before you go live
JS lint
3) Good notes to optimize your JS
JS Optimization

Javascript Input field to accept only numbers

Javascript Input field to accept only numbers:

The jquery.numeric plugin has some bugs that I notified the author of. It allows multiple decimal points in Safari and Opera, and you can't type backspace, arrow keys, or several other control characters in Opera. I needed positive integer input so I ended up just writing my own in the end.

$(".numeric").keypress(function(event) {
// Backspace, tab, enter, end, home, left, right
// We don't support the del key in Opera because del == . == 46.
var controlKeys = [8, 9, 13, 35, 36, 37, 39];
// IE doesn't support indexOf
var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
// Some browsers just don't raise events for control keys. Easy.
// e.g. Safari backspace.
if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
(49 <= event.which && event.which <= 57) || // Always 1 through 9
(48 == event.which && $(this).attr("value")) || // No 0 first digit
isControlKey) { // Opera assigns values for control keys.
return;
} else {
event.preventDefault();
}
});

reference : Link to input field numbers only

Javascript print_r dump function

print_r functionality of PHP in JavaScript. Here is the function called dump will give the result of objects and arrays. You can view JavaScript Objects and JavaScript arrays by calling dump function.



/**
 * Function : dump()
 * Arguments: The data - array,hash(associative array),object
 *    The level - OPTIONAL
 * Returns  : The textual representation of the array.
 * This function was inspired by the print_r function of PHP.
 * This will accept some data as the argument and return a
 * text that will be a more readable version of the
 * array/hash/object that is given.
 */
function dump(arr, level) {
    var dumped_text = "";
    if (!level) level = 0;


    //The padding given at the beginning of the line.
    var level_padding = "";
    for (var j = 0; j < level + 1; j++) level_padding += "    ";


    if (typeof (arr) == 'object') { //Array/Hashes/Objects 
        for (var item in arr) {
            var value = arr[item];


            if (typeof (value) == 'object') { //If it is an array,
                dumped_text += level_padding + "'" + item + "' ...\n";
                dumped_text += dump(value, level + 1);
            } else {
                dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
            }
        }
    } else { //Stings/Chars/Numbers etc.
        dumped_text = "===>" + arr + "<===(" + typeof (arr) + ")";
    }
    return dumped_text;
}

Javascript jquery library and plugin

Very good useful javascript and jquery tools, libraries and plugins


http://www.smashingmagazine.com/2011/04/07/useful-javascript-and-jquery-tools-libraries-plugins/

Remove tag without value from html element

Remove tag without value from HTML element and display only value of the Tag.

use the below function to remove the tag from HTML element.

function removeHTMLTags()
{

if(document.getElementById && document.getElementById("input-code"))
{
var strInputCode = document.getElementById("input-code").innerHTML;

/*
This line is optional, it replaces escaped brackets with real ones,
i.e. < is replaced with < and > is replaced with >
*/
strInputCode = strInputCode.replace(/&(lt|gt);/g, function (strMatch, p1){
return (p1 == "lt")? "<" : ">";
});

var strTagStrippedText = strInputCode.replace(/<\/?[^>]+(>|$)/g, "");
alert("Output text:\n" + strTagStrippedText);
// Use the alert below if you want to show the input and the output text
// alert("Input code:\n" + strInputCode + "\n\nOutput text:\n" + strTagStrippedText);
}

}

JQuery live focus and live blur bug fixing code

JQuery focus and blur event does not work with JQuery live event handler.

Here the solution for that. Just add the below code in you JQuery file or your java script file at the end.

and call your event like

$("Element").live("blur", function(){
// Your code goes here...
});

JQuery Blur and Focus code you need to add is here...

/****************************************************
JQUERY BLUR AND FOCUS EVENTS BUG FIXING CODE
****************************************************/

(function(){

var special = jQuery.event.special,
uid1 = 'D' + (+new Date()),
uid2 = 'D' + (+new Date() + 1);

jQuery.event.special.focus = {
setup: function() {
var _self = this,
handler = function(e) {
e = jQuery.event.fix(e);
e.type = 'focus';
if (_self === document) {
jQuery.event.handle.call(_self, e);
}
};

jQuery(this).data(uid1, handler);

if (_self === document) {
/* Must be live() */
if (_self.addEventListener) {
_self.addEventListener('focus', handler, true);
} else {
_self.attachEvent('onfocusin', handler);
}
} else {
return false;
}

},
teardown: function() {
var handler = jQuery(this).data(uid1);
if (this === document) {
if (this.removeEventListener) {
this.removeEventListener('focus', handler, true);
} else {
this.detachEvent('onfocusin', handler);
}
}
}
};

jQuery.event.special.blur = {
setup: function() {
var _self = this,
handler = function(e) {
e = jQuery.event.fix(e);
e.type = 'blur';
if (_self === document) {
jQuery.event.handle.call(_self, e);
}
};

jQuery(this).data(uid2, handler);

if (_self === document) {
/* Must be live() */
if (_self.addEventListener) {
_self.addEventListener('blur', handler, true);
} else {
_self.attachEvent('onfocusout', handler);
}
} else {
return false;
}

},
teardown: function() {
var handler = jQuery(this).data(uid2);
if (this === document) {
if (this.removeEventListener) {
this.removeEventListener('blur', handler, true);
} else {
this.detachEvent('onfocusout', handler);
}
}
}
};

})();


Now Call your blur / focus event

JQuery new features added in JQuery 1.4

Some good new features added in JQuery 1.4
JQuery features