Thursday, June 30, 2005

Shortcut document.getElementById

Reading Ajaxian Blog today and came across some very handy JavaScript. It's a great shortcut. It originated from DWR and they deserve all the credit. I'm just passing it along for those who have not seen it before.

function $() {
    var elements = new Array();
    for (var i = 0; i < arguments.length; i++) {
        var element = arguments[i];
        if (typeof element == 'string') {
            if (document.getElementById) {
                element = document.getElementById(element);
            }
            else if (document.all) {
                element = document.all[element];
            }
        }

        if (arguments.length == 1) {
            return element;
        }

        elements.push(element);
    }

    return elements;
}


So, instead of:

document.getElementById('elementName')

You can:

$('elementName')

I'm gonna start using this in all of my JavaScript!

10 comments:

Afuna said...

Ooh, now that is nifty :)

I tried to use it in conjunction with your Code2HTML widget, and for some reason, although it shows up fine in the window, when I c&p after conversion (with the option to insert spaces around parentheses unchecked), the $ sign disappeared, and gave me "function {" instead.

Did a bit of poking around, and it seems to happen whenever the $something looks like a Perl style variable.

($.somethingsomething works fine, as well as $<>, and $literalspacecharacter)

I hope I'm not bothering you with anything you already know about :)

(And Code2HTML is wonderful. I use it almost daily ;D )

Stacey said...

afuna, Hmm, now thats interesting. I'll have to see if I can fix that. Probably can fix it by escaping the $ character. I'm using the widget.system functionality of widgets to execute pbcopy and pbpaste. Looks like I'll need to escape the $ symbol in the stream that I send to pbcopy. I'll get an update to that later today. Thanks for finding this for me, and I am glad you like it. I did this little widget just for me, but thought that others could use it too.

Afuna said...

*whistles* That was quick.

Considering how often I use post up code containing the '$' symbol, the bugfix has upped the widget from being 'merely convenient' to 'practically indispensable'.

Thank you. I was getting tired of having to escape every little < and   ;)

Stacey said...

Glad I can be of service. I have some more ideas for this widget, like colorized html, but it may be a while before I get the time to get it implemented. If you think of anything, or find another bug, just post me a message on here.

afuna said...

...colorized HTML...

Ooh, that sounds very nice!

If I ever get around to playing with widgets, I think I'll try figuring out how to wrap the output in <code><pre> tags, since it's something I do all the time, but it probably isn't going to be useful to the majority of users. Heh.

At the moment, I'm having trouble with the widget again though. It converts just fine, but I can't seem to copy from it.

Checked Console, and I saw this error message ( as well as variations thereof):
DashboardClient[3388] (net.4haks.code2html) undefined: Can't find variable: tex (line: 0)
(event handler):Can't find variable: tex

Stacey said...

Afuna,

If you could, post me a snippet of the code that is causing the trouble, and I'll get that corrected for you. I'll also add the <code><pre> block stuff to my todo list.

Stacey said...

Never mind about that. I found the bug in the code, but cannot correct it until I get home. You can correct it yourself, though. Here's what to do:

1) Copy the widget somewhere handy, like your documents folder.
2) Control click the widget and select view package contents.
3) Create a new folder called Code2HTML somewhere and copy the contents of the package into that folder.
4) Open the Code2HTML.js file for editing from the location where you copied the contents of the package.
5) Scroll to line 26. This line should jsut read "tex" and nothing else.
6) Delete that line, and save the file.
7) Rename the folder where you copied the package contents to "Code2HTML.wdgt" and answer "Add" to the dialog that pops up.
8) Remove the .wdgt extension from this newly created widget.
9) Copy the widget to your widgets folder /Library/Widgets and enjoy!

I think that covers everything. If you have any trouble, the fix will be available on the website later today -- should be around 6pm EST.

I'm not sure how that extraneous line crept into the code, but I am glad that it was found quickly.

afuna said...

Ah, thank you. That worked awesome :)

I feel somewhat guilty about mentioning the code/pre thing now, since it's been added to your workload. Now that I've figured out how to open the files in a wdgt package (and thank you very much for the instructions on doing that, by the way :)), I've managed to figure out where to add the tags so they'll show up. So you won't have to add it in, if you're just doing it for my sake, I mean :)

Stacey said...

Good deal! You are now well on your way to coding a widget. If you come up woth some cool stuff, be sure to share it.

Hawkman said...

That's a cool labour-saving trick :)