This is just a little something I whipped up because I found it useful. Tips.Glossary is used for helpful tool-tips that gracefully degrade when JavaScript is not available for whatever reason. The basic idea is that you include an HTML glossary in the page, and if Tips.Glossary is available, the tips will come up however you specify, if not, they are simply anchors to their entries in the HTML.

This probably works with most MooTools stuff post 1.2, you are smart and will figure it out.

Check it out here.

Download the example.

or have a look at the code:

Selectors.Pseudo.hash = function(hash){
	if(!$chk(hash))
		return this.get('href').contains('#');
	var currentHash = this.get('href').split('#')[1];
	return currentHash === hash;
}
 
 
Tips.Glossary = new Class({
 
	Extends: Tips,
 
	options: {
		'anchorClass':	false,
		'hideGlossary':	true
	},
 
	initialize: function(glossary, options){
		this.parent(options);
		this.glossary = $(glossary);
		if(!$chk(this.glossary))
			throw "Glossary not found / defined, quitting";
		if(this.options.hideGlossary)
			this.glossary.setStyle('display', 'none');
		this.indexGlossary();
		return this;
	},
 
	indexGlossary: function(){
		this.items = this.glossary.getElements('*[id]');
		this.anchors = new Elements();
		this.items.each(function(e){
			var anchor = $(document.body).getElement('a:hash('+e.get('id')+')');
			if($chk(anchor)){
				if(this.options.hideGlossary);
				anchor.addEvent('click', function(event){
					new Event(event).stop();
				});
				this.setTipContent(anchor, e);
				this.anchors.push(anchor);
			}
			if(this.options.anchorClass)
				this.anchors.addClass(this.options.anchorClass);
			this.attach(this.anchors);
		}, this);
	},
 
	setTipContent: function(anchor, target){
		anchor.store('tip:title', target.get('title'));
		anchor.store('tip:text', target.get('html'));
		this.fireEvent('settingContent', [anchor, target]);
	}
 
});

On a side note, notice the psuedo selector being added. This has been added because for whatever reason, the following CSS3 selector is goofy:

$(document.body).getElements('a[href="http://trickeries.com"]'); // works
$(document.body).getElements('a[href="#glossary-username"]');    // does not work

Anyone have any idea why?

I made a weensy little script for the theme I recently made (which I still have not named or prepared for distribution) which will generate single pixel transparent pngs to use as tiled background images in css.

demonstration toy

<?php    
 
	$p = imagecreatetruecolor(1, 1);
	imagesavealpha($p, true);
	$o = (100 - (int) $_GET['o']) * 1.27;
	$c = imagecolorallocatealpha($p, (int) $_GET['r'], (int) $_GET['g'], (int) $_GET['b'], $o);
	imagefill($p, 0, 0, $c);
	header("Content-type: image/png");
	imagepng($p);
 
?>

usage / parameters:

r

how much red to include: r=[0-255]

g

how much green to include: g=[0-255]

b

how much blue to include: b=[0-255]

o

how opaque the pixel should be: o=[0(fully transparent)-100(fully opaque)]

so…

pixler.php?r=255&g=255&b=255&o=50

will make a white pixel that is 50% visible.

pixler.php?r=255&o=100

will make a red pixel that is fully visible.

pixler.php

calling the script with no parameters will create an invisible black pixel (…).

UPDATE: This might be sorta useless. Please see this comment.

There have been a variety of occasions where I only want one instance of the Request object, but want to make sure that every request I attempt gets run without canceling another, or screwing around with onCompletes.  The following is a rather simple implement that takes care of this problem:

Request.implement({
    queue: function(sendArg){
        if(!$defined(this.queued))
            this.queued = [];
        this.queued.push(sendArg);
        this.processQueue();
    },
    processQueue: function(){
		if(this.timer)
			$clear(this.timer);
		if (!this.check())
			this.timer = this.processQueue.delay(250, this);
		else {
			if ($defined(this.queued[0])) {
				this.send(this.queued.shift());
				this.processQueue();
			}
			else
				this.fireEvent('onQueueEmpty');
		}
    }
});

This will basically stack requests and send them in the order received. If there is no stack, the request will be sent immediately.

The usage is the same as the normal Request send method, however there is now an onQueueEmpty event to tell when all requests in the queue have been sent.

example

download w/the example

Sortable Slideable Saveable (sss) is a class I wrote up that allows you to have a list of elements that can be sorted, toggled, and the state of each will be saved each time a change is made, either using a cookie or a couple of ajax / json calls.

It can be seen in action in my sidebar to the right. You can drag / sort them by dragging the icons, and you can toggle them by clicking on the title of each. Any changes you make will be stored in a cookie, you can reload the page and they should be in the state you left them in.

I will probably update this and provide some detailed documentation shortly. If anyone has any questions, let me know. Also if anyone has any input on how to make it better, let me know.

another example

download w/the example

I made this because i figured it was just what everyone needed (because everyone is grumpy all the time).  It is a simple javascript function you can store in a bookmark that will add a sweet dancing kirby to any page you are on.

(>^ – ^)> fire him up <(^ – ^<)