Object.Event

Prototype.Tidbits

Odds and ends for Prototype.js

Usage

Click on the link above to download the source, include it after you have included the main prototype.js file, and then you can use any of the methods below:

document.getElementsByAttribute() , Element.getElementsByAttribute()

You can use this method to select DOM nodes that contain attributes of your choosing. They can be valid or custom attributes.


<div id="container">
    <p custom="a"></p>
    <p custom="b"></p>
</div>
//each exmaple alerts "a" and "b"
document.getElementsByAttribute('custom').each(function(element){
    alert(element.getAttribute('custom'));
});
$('container').getElementsByAttribute('custom').each(function(element){
    alert(element.getAttribute('custom'));
});

Element.makeUnselectable() , Element.makeSelectable()

Ever have a draggable, droppable, or otherwise interactive element on your page that gets selected as part of a text selection? The following code block has been made unselectable. Note that you can still select text in the parent element, and hence, the entire element below, but you can't click inside of it to select text directly. Note that Element.makeSelectable() only becomes useful once you have made something unselectable. Every element is selectable by default.


$('an_element').makeUnselectable(); //or
Element.makeUnselectable($('an_element'));

window.openCentered()

This opens a new window, centering it horizontally on the screen, and placing it 3/4 of the way towards the top. You can specify height,width,top,left plus any options window.open accepts (toolbar,status, etc). Boolean values become "yes" or "no" in the parameter string passed to window open. If the opened window loses focus and the method is called again, the window automatically regains focus.

Cookie.get() , Cookie.set() , Cookie.unset()

Setting a cookie isn't as simple as it should be. As long as you aren't setting cookies across multiple subdomains this will do the trick.


Cookie.set('key','value',60); //expires 60 seconds from now
Cookie.get('key'); //returns false if not found else the value stored in key
Cookie.unset('key'); //removes key

Client.browser , Client.version , Client.OS

The Client object provides three properties that tell you what OS, what browser and what version of said browser is loading the JavaScript.

Builder.Inline

For Scriptaculous, not Prototype, but I'll deem it relevant enough to include here. Works just like Builder.node() but instead of passing in a tag name, each tag is a function. Only common tags are included, but it's easy enough to add your own if you look at the source.

with(Builder.Inline){
    container = div({id:'container'},[
        ul([
            li('one'),
            li('two'),
            li('three')
        ])
    ]);
    container.appendChild(p('paragraph text'));
}

Online Forum

I'd love to hear your feedback and suggestions for this library. Please head over to the Prototype.Tidbits discussion forum. This is a brand new forum so there aren't many discussions yet, but I do check it regularly.

LivePipe™