paul.wilkins.myopenid.com

[JavaScript] On Convert simple Javascript to jQuery plugin

2012-02-04T14:09:35-08:00

Here's some details on how to achieve that.
http://docs.jquery.com/Plugins/Authoring

[JavaScript] On Convert simple Javascript to jQuery plugin

2012-02-04T14:09:22-08:00

Here's some details on how to achieve that.
http://docs.jquery.com/Plugins/Authoring

[JavaScript] On Rounding in JS

2011-12-18T02:02:05-08:00

After writing some unit tests that provided full coverage over the original code, the following code results in the same end result.

util.roundNumber = function(num, factor, type) {
    var roundTypes = {
        normal: 'round',
        up: 'ceil',
        down: 'floor'
    };
    return Math[roundTypes[type]](num / factor) * factor;
}

[JavaScript] On Rounding in JS

2011-12-18T02:01:18-08:00

After writing some unit tests that provided full coverage over the original code, the following code results in the same end result.

util.roundNumber = function(num, factor, type) {
    var roundTypes = {
        normal: 'round',
        up: 'ceil',
        down: 'floor'
    };
    return Math[roundTypes[type]](num / factor) * factor;
}

[JavaScript] On Toggle a few divs

2010-12-06T11:02:09-08:00

You can use the attribute-starts-with selector
http://api.jquery.com/attribute-starts-with-selector/

The triggered function will run in the context of the matching element, which could be the "li-div3" element. That allows us to get the element using the this keyword.

Once we have the element, we can get its id, and then take the part of that id which starts from the third character which gives us the appropriate div, "div3"

Here I presume that the "div31" in the original post was a typing mistake, and should instead be "div3"

jQuery(function ($) {
  $('a[id^="li-div"]').click(function () {
    $('#' + this.id.substring(3)).slideToggle();
  });
});

[JavaScript] On console.log for ie

2010-08-21T00:16:51-07:00

The major change here is removing the reliance on jQuery.

Functions were declared as both function statements and as function decarations. They are now consistently done as function declarations.

The enumObj function now uses an anonymous function to help reduce the scope of the content variables.

Many other minor tweaks have also been made, for example with the makePanel function, which should have a separate responsibiity as that of the showPanel function.

(function () {
    function addHeading(obj) {
        var objType, h2, text;
        objType = (obj instanceof Array) ? "Array" : "Object";
        h2 = document.createElement('h2');
        text = document.createTextNode(objType + ' details:');
        h2.appendChild(text);
        return h2;
    }
    function escapeHTML(str) {
        var div, text;
        div = document.createElement('div');
        text = document.createTextNode(str);
        div.appendChild(text);
        return div.innerHTML;
    }
    function enumObj(obj, skipHeading) {
        var content;
        content = document.createDocumentFragment();
        if (typeof (obj) === "object") {
            if (skipHeading !== false) {
                content.appendChild(addHeading(obj));
            }
            content.appendChild(function () {
                var ul, li, span, text, key;
                ul = document.createElement('ul');
                ul.className = 'consoleObjList';
                for (key in obj) {
                    if (obj.hasOwnProperty(key)) {
                        li = document.createElement('li');
                        span = document.createElement('span');
                        text = document.createTextNode(key);
                        span.appendChild(text);
                        li.appendChild(span);
                        
                        li.appendChild(document.createTextNode(': '));
                        li.appendChild(enumObj(obj[key], false));
                        ul.appendChild(li);
                    }
                }
                return ul;
            }());
        } else {
            //treat it as a string
            content.appendChild(document.createTextNode(escapeHTML(obj)));
        }
        return content;
    }
    function makePanel() {
        var ul = document.createElement('ul');
        ul.id = 'consolePanel';
        ul.className = 'rc6';
        return ul;
    }
    function showPanel(li) {
        var panel = document.getElementById("consolePanel");
        if (!panel) {
            panel = makePanel();
            document.body.appendChild(panel);
        }
        panel.appendChild(li);
    }

    if (!window.console) {
        window.console = {};

        window.console.log = function (obj) {
            var li = document.createElement('li');
            li.className = 'fc tal m_12';
            li.appendChild(enumObj(obj));
            showPanel(li);
        };
    }
}());

[JavaScript] On Javascript Loop Refactor

2010-08-03T03:18:01-07:00

You can use clearInterval from within the update function to step the process when the time is right.

You may also want to use the correct spelling for ceiling.

This code counts from 0 to totalUsers-1 as does your original code.
If you want it to instead count from 1 to totalUsers, move the if condition block to the start of the function.

function _initCountUpUsers()
{
    var totalUsers, ceiling, floot, update;

    totalUsers = $('#totalUsers');
    ceiling = parseInt(totalUsers.html());
    floor = ceiling - 10;
	
    function updateTotalUsers()
    {
        totalUsers.html(floor);
        floor++;
        if (floor === ceiling) {
            clearInterval(update);
        }
    }
    update = window.setInterval(updateTotalUsers, 1000, floor);
}

[JavaScript] On Format Numbers With Commas

2010-06-10T02:59:59-07:00

The addCommas should be AddCommas

Originally I was using addCommas as the function name, and when renaming after posting so that it was the same as your original function, I missed one.

As for the situation with match[1] and match[2], fixing the first issue should have fixed the second.

Now to explain arguments[1]

All functions can have their arguments accessed via the arguments collection. The argument called value that is passed to the AddCommas function can be accessed directly, or via arguments[0]

The AddCommas function uses a second argument to store the part after the comma. I don't want to define the AddCommas function with a second argument, because that implies that the second argument should be used when first calling it. The solution is to pass the extra argument from within, and then to retrieve it using the arguments collection.

Here's how it works for 100, 1000, and 123456789

With 100, no match is found when it looks for a digit followed by 3 other digits. That [\.]?.* part just caters for optional decimal point values.
As no match is found for 100, it is returned without being changed.

With 1000,
1. a match is found for 1 and 000
2. the function is called with 1 and 000
3. Â Â no match is found within just the 1
4. Â Â 1,000 is returned back to the function
5. 1,000 returned out

With 123456789
1. Â a match is found for 123456 and 789
2. Â the function is called with 123456 and 789
3. Â Â Â a match is found for 123 and 456
4. Â Â Â the function is called with 123 and 456
7. Â Â Â Â Â no match is found within just the 123
8. Â Â Â Â Â it joins '123' + ',' + '456' and returns 123,456 back to the function
9. Â Â Â it joins '123,456' + ',' + '789' returns 123,456,789 back to the function
10. 123,456,879 is returned out

function AddCommas(value) {
    var match = /^(\d+)(\d{3}[\.]?.*)$/.exec(value.replace(/,/g, ''));
    if (match) {
        value = AddCommas(match[1], match[2]);
    }
    return value + (arguments[1] > '' ? ',' + arguments[1] : '');
}

[JavaScript] On Format Numbers With Commas

2010-06-08T01:44:54-07:00

Let's get functional on this.

function AddCommas(value) {
    var match = /^(\d+)(\d{3}[\.]?.*)$/.exec(value.replace(/,/g, ''));
    if (match) {
        value = AddCommas(match[1], match[2]);
    }
    return value + (arguments[1] > '' ? ',' + arguments[1] : '');
}

[JavaScript] On Rotate co-ordinates

2010-03-05T22:06:34-08:00

this.rotate = function (antiClockwise) {
  var dir = (antiClockwise) ? -1 : 1;
  temp_x = this.x;
  this.x = dir * this.y;
  this.y = -dir * temp_x;
}

[JavaScript] On Rotate co-ordinates

2010-03-05T22:04:35-08:00

duplicate post

[JavaScript] On filter selectbox with 3000+ options

2010-02-04T02:25:13-08:00

Not to step on your toes, but there'a already a multiselect that has been developed for jQuery UI
http://quasipartikel.at/multiselect/

You may find quite a difference of performance.

[JavaScript] On Cpanel like password generator

2010-01-15T01:39:46-08:00

Here's a further refinement

function autogeneratepassword(params) {
    var passwd = '',
        length = params.pwlength,
        pwchars = '';
    pwchars += (params.chartype_upper) ? 'ABCDEFGHJKLMNPQRSTUVWYXZ' : '';
    pwchars += (params.chartype_lower) ? 'abcdefhjmnpqrstuvwxyz' : '';
    pwchars += (params.chartype_number) ? '23456789' : '';
    pwchars += (params.chartype_symbol) ? '!@#$%^&*()' : '';

    while (length-- > 0) {
        passwd += pwchars.charAt[Math.floor(Math.random() * pwchars.length)];
    }
    return passwd;
}

[JavaScript] On timer.class

2010-01-01T23:37:03-08:00

An example usage within the comments would be useful.

What else do you think is not so good about this code, and in your mind requires further looking at?

[JavaScript] On Need help with creating a loop

2009-11-01T19:54:36-08:00

Edit: using a normal for loop, as with for...in on an array there's no guarantee that other properties aren't prototyped in addition

var fields = ['invoice_discount', 'invoice_vat', 'invoice_salestax', 'invoice_freight'],
    i,
    field;
for (i = 0; i < fields.length; i++) {
    field = fields[i];
    this[field] = this.form.down('#' + field);
    this[field].observe('change', this._checkFormat.bindAsEventListener(this));
}

[JavaScript] On Error on closure

2009-09-08T15:04:08-07:00

When the timeout runs the handler, the handler function is run from the scope of the window object.

You need the handler function to know about the listener object. You can do that by passing listener to a function, and then have that function return a function. That way the returned function will still know about the listener variable.

The same goes for the event variable as well.

fireEvent: function(event) {
    var type = event.type;
    if (!this.events) return;
    var listeners = this.events.get(type);
    var listener;
    if (listeners != null) {
        for (var i = 0,listener; listener = listeners[i++];) {
            // Using timeout, so the handlers may be execute "simultaneously"
            window.setTimeout(function (listener, event) {
                return function handler() {
                    listener.func.apply(listener.scope, [event]);
                };
            }(listener, event), 0);
        }
    }
},

[JavaScript] On Error on closure

2009-09-08T15:02:06-07:00

[deleted]

[JavaScript] On Better way in Prototype.js?

2009-09-01T14:49:07-07:00

This question has been languishing unresponded to for some time now, so I've crafted together some jQuery code to achieve what you require.

For each element with a class of "toggle", the code adds a Show/Hide link just below it.

The link toggles the element by its id attribute, and switches between Show and Hide when you click it.

$(function () {
    $('.toggle')
        .each(function () {
            $('<a href="#' + $(this).attr('id') + '">Show</a>')
                .click(function () {
                    $($(this).attr('href'))
                        .toggle();
                    $(this).text(
                        $(this).text() !== 'Show' ? 'Show' : 'Hide'
                    );
                })
                .wrap('<p></p>')
                .insertAfter(this);
        })
        .hide();
});
.
.
.
<p id="content" class="toggle">Paragraph to be toggled</p>

[JavaScript] On Port Prototype Code to jQuery?

2009-09-01T13:21:48-07:00

The following seems to provide an improved flow to the code.

The comment now seems to be superfluous, as the comment says exactly what the code does. Better comments tend to explain why things occur instead.

var total = 0;
// For each fieldpair that has a child with a checked input
// we get the sibling with a text input and add that value
// to the total.

$('.fieldpair input:checked')
    .siblings('input:text').each(function () {
        total += parseInt(this.value);
    });

[JavaScript] On Port Prototype Code to jQuery?

2009-09-01T13:10:24-07:00

The following is a working translation to jQuery, where the this keyword is the fieldpair reference.

There should be a better way to do this though.

var total = 0;
// For each fieldpair that has a child with a checked input
// we get the sibling with a text input and add that value
// to the total.

$('.fieldpair').each(function () {
    if ($('input:checked', this).length) {
        var input = $('input:text', this);
        total += parseInt(input.val());
    }
});

[JavaScript] On jQuery traversing

2009-08-19T12:55:30-07:00

* Start from the content that you're going to be adding
* Wrap it with the list item
* Then append it to the roles list

$('<select>...</select>')
    .click(function () {...})
    .wrap('<li></li>')
    .appendTo('ul.roles');

[JavaScript] On An incrementor function that could be better.

2009-06-14T00:08:42-07:00

Some good ways to refactor this is to remove the math calculations.
Instead of checking if value/10 <= 100, check that value <= 1000

Then you can use an array that matches up the value limit with the step value.

Or, you can avoid all of that and make the step value 2% of the next multiple of 10.

[JavaScript] On There must be a better way to DRY this up...

2009-05-21T07:32:32-07:00

Here is a way to improve things. I'm not sure though as to why you have tabContainers assigned, as it's not used in the code.

Oe of course, if you want an accordion behaviour, there is one built in to jQuery. http://docs.jquery.com/UI/Accordion

$(document).ready(function(){
    var tabContainers = $('div.tabs > div');
    function hideSections() {
        $('#mym-errors').hide();
        $('#mym-errorlinks').hide();
        $('#mym-step1').hide();
        $('#mym-step2').hide();
        $('#mym-step3').hide();
    }
    if ($('#mym-errors').children().length > 0) {
        $('#mym-errors').fadeIn(1000);
        $('#mym-errorlinks').fadeIn(1000);
    } else {
        $('#mym-goto-step1').click(function(){
            hideSections();
            $('#mym-step1').fadeIn(1000);
        });
        $('#mym-goto-step1-errors').click(function(){
            hideSections();
            $('#mym-step1').fadeIn(1000);
        });
        $('#mym-goto-step2').click(function(){
            hideSections();
            $('#mym-step2').fadeIn(1000);
        });
        $('#mym-goto-step3').click(function(){
            hideSections();
            $('#mym-step3').fadeIn(1500);
        });
        $('#mym-gobackto-step2').click(function(){
            hideSections();
            $('#mym-step2').fadeIn(1000);
        });
        $('#mym-startbut').click(function(){
            hideSections();
            $('#mym-step1').fadeIn(1000);
        });
        $('.togglehud').click(function(){
            $('#hud').slideToggle(250);
        });
    }
});

[JavaScript] On There must be a better way to DRY this up...

2009-05-18T06:58:14-07:00

You could use a function that hides all of the relevant elements.
Then after calling that function, you just need to show the one that you're needing.

[JavaScript] On META tag info

2009-04-15T07:13:36-07:00

Double quotes are the more correct ones to use for HTML and XHTML code.

A space needs to exist before the closing slash, to ensure that Internet Explorer, which cannot interpret XHTML, is capable of understanding the code as HTML.
See: http://www.w3.org/TR/xhtml1/#guidelines

It's also best for the attributes with greater entropy to be listed first.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />