Parse any number string to float

function stringToFloat(str) {
    var fractional_part, integer, fractional = "", found = false, i;
    // remove leading and trailing non-digit symbols
    str = str.replace(/[^\d,\.]+$/, '').replace(/^[^\d,\.]+/, '');
    fractional_part = str.slice(-3);
    for (i = fractional_part.length - 1; i >= 0; i--) {
        if (/\d/.test(fractional_part[i])) {
            fractional = fractional_part[i] + fractional;
        } else {
            found = true;
            break;
        }
    }
    if (fractional && found) {
        integer = str.slice(0, i - 3);
    } else {
        integer = str;
        fractional = "";
    }
    return parseFloat(integer.replace(/[^\d]/g, '') + "." + fractional);
}

Showing an image when dragging any tag in HTML

Chrome and Safari support displaying a ghost image for draggable objects out of the box, Firefox does not. It's not a big deal, I'd say a matter of one event handler.

This is a sample HTML:

Drag Me!

and JavaScript code:

$(function () {
    var dragImage = document.createElement("img");
    dragImage.src = "/image/to/show/when/dragging.jpg";
    function handleDragStart(e) {
        e.dataTransfer.effectAllowed = 'move';
        e.dataTransfer.setDragImage(dragImage, e.layerX, e.layerY);
    }

    $("#draggableObject").get(0).addEventListener('dragstart', handleDragStart, false);
});

Native HTML5 Drag and Drop

MDN::dataTransfer

Autoselection of checkboxes in a table

The code doing selection

$(function () {
    "use strict";
    var toggleSelect = $("#all"),
        checkboxes = $("#table").find("tbody input[type=checkbox]");
    toggleSelect.click(function () {
        checkboxes.attr('checked', $(this).is(":checked"));
    });
    checkboxes.click(function () {
        toggleSelect.attr('checked', checkboxes.length === checkboxes.filter(':checked').length);
    });
});

A sample table

         
         
Username
         
Phone Number
     
     

         
         
User 1
         
0123456789
     
         
         
User 2
         
0133456789
     
 

Word and text translation bookmarklet

Sometimes (I hope rarer and rarer :)) I need to translate an unknown foreign word on the page. I used to select it, open Google Dictionary Translate, paste it, set source and destination languages if needs and only then press the button to translate it.

Some time later I discovered bookmarklets. I liked the approach and made one for myself.

Drag this link En<>Ru the bookmark panel to be able translate words or text.

To change default source and destination languages put their codes in place of en and ru.

Source code.

(function() {
    var t;
    try {
        t= ((window.getSelection && window.getSelection()) ||
            (document.getSelection && document.getSelection()) ||
            (document.selection &&
            document.selection.createRange &&
            document.selection.createRange().text));
    }
    catch(e){
        t = "";
    }

    if(t && (t=t.toString()) && t.length){
window.open("http://translate.google.com/?sl=en&tl=ru&hl=en&text="+t+"#en|ru|"+t);
    }
})()

I used Javascript Compressor to get compressed version to use it in the bookmarklet.

CKEditor autosave plugin

If you need autosave function for the CKEditor I made a plugin. It allows to save automatically the work as you've stopped typing.

UPD  Oct 6, 2011: Plugin has moved to GitHub.

Add jQuery to any website

Sometimes I need to perform some manipulations with a webiste's data. For this purpose I like to use jQuery but not every website it has. So I need to add this support. For that I made a bookmarklet. To use it just drag jQuery to your bookmar bar.

Checkbox select all jQuery plugin for a table

/*
 * File: jquery.checkboxselection.js
 *
 * Plugin to create checkbox in the table
 * It needs table has correct structure (at least with head and body) and
 * there are checkboxs in row's first cell both in header in body
 */

(function($) {
    $.fn.checkboxSelection = function() {
        return this.each(function() {
            var table = this;
            var headCheckbox = $('thead th:first :checkbox', table).click(function() {
                $('tbody tr', table).find('td:first :checkbox').attr('checked', this.checked);
            })
            var checkSelection = function() {
                var trs = $('tbody tr', table).find('td:first');
                headCheckbox.attr('checked', trs.find('input:checked').length == trs.find(':checkbox').length);
            }
            $('tbody tr', this).find('td:first :checkbox').click(checkSelection);
            checkSelection();
        });
    }
})(jQuery);

HTML:

<table>
    <thead>
        <tr>
            <th><input type="checkbox"></th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" name="a[1]"></td>
            <td>John Smith</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="a[2]"></td>
            <td>Jack Daniels</td>
        </tr>
    </tbody>
</table>

Using:

$('table').checkboxSelection();

Check class

In case if you have to use pure Javascript:

    var hasClass = function(element,className) {
        return (function() {
            var classes = element.className.split(' ');
            for(var i in classes) {
                if(classes[i] == className) {
                    return true;
                }
            }
            return false;
        })();
    }

Table checkboxes selection

To select or unselect checkboxes in a table I use the follow code

(function() {
    // checkboxes in the table
    var cbs = document.getElementsByName('checkboxes');
    // header checkbox
    var all = document.getElementById('header_checkbox');
    all.onclick = function() {
        for(var i=0;i<cbs.length;i++) {
            cbs[i].checked = this.checked;
        }
    }
    var cbClick = function() {
        all.checked = (function() {
            for(var i=0;i<cbs.length;i++) {
                if(cbs[i].checked != true) {
                    return false;
                }
            }
            return true;
        })();
    }
    for(var i=0;i<cbs.length;i++) {
        cbs[i].addEventListener('click', cbClick, true);
    }
})();

Javascript function delegate

Function.prototype.createDelegate = function(obj, args, ignoreArgs) {
 var method = this;
 return function {
  return method.apply(obj || window, (!args) ? arguments : (ignoreArgs === true) ? args : args.concat(Array.apply(null, arguments)));
 };
};