MooTools Tips extension: Tips.Glossary

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?

trackback

Tags: , , , 1 response »
  1. khela's gravatar

    Nice work :)

Leave a Reply

ok to use:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

bonus!

If you want to post code, you can use:

<pre lang="[language]">[code]</pre>

Where [language] is a valid geshi language type, and where [code] is your code.

Sortable Slideable Saveable – a Mootools 1.2 class

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

trackback

Tags: , , , , 13 responses »
  1. keif's gravatar

    Your side bar isn’t working for me (OS X, FF3.0.1) but your other example works flawlessly.

    Very cool script, and I love that it’s default state works with JS off.

  2. atom's gravatar

    hmm, i guess someone is going to have to let me borrow a mac :p

  3. links for 2008-07-30 | iKeif – mootools, jquery, social media and a ton of links's gravatar

    [...] Guide to Earning Six Figures: Changing Your Mind 13 hours agoInformation about going free lance.trickeries! » Blog Archive » Sortable Slideable Saveable – a Mootools 1.2 class 14 hours agoVery cool mootools 1.2 class for slideable sortables that are savable via cookies!The [...]

  4. keif's gravatar

    WEEELLL I could play around with it a bit and see if I can figure it out (or if it’s just FF# acting buggy).

  5. atom's gravatar

    It is a little odd that there is a difference in FF between systems, I would like to assume the engines in use would be exactly the same, however I have already seen stupid differences in the rendering of styles between the two. My assumption is that it is just a goofy issue with CSS.

  6. Tyler's gravatar

    brilliantly executed, as usual.

  7. atom's gravatar

    ^ _ ^

  8. electronbender's gravatar
    electronbender Says:

    Chief,
    Can you add a nested ability to this thing? That would realyyyyy be nice…

  9. Rob C's gravatar

    Hi,

    The ’savable’ side of things doesn’t seem to work on your example (the one linked here, and the one downloaded).

    I can see the PHP code at the top, but how does one implement the save?

    Thanks!

  10. atom's gravatar

    @Rob, What I have there in the example is just a quick and dirty example using sessions. In order to have this saved in any meaningful sense you are going to need to write / read the state to and from somewhere.

  11. dakota's gravatar

    Could this be modified to support dragging to multiple columns?

  12. dakota's gravatar

    How can I style the drop areas to have a dotted border? by this I mean when dragging one, how can I get the areas I can release it to to have a border… I’ve been trying to have it add a class, but can’t figure out where in the sss code to add it.

  13. Guillem's gravatar

    Hi,

    I there a way to use your amazing script with multiple list in order to mix them together?
    I tried to do this that way:
    window.addEvent(‘domready’, function(){
    new sss(‘#list, #list2′, ‘.toggle’, ‘.box-content’);
    });

    But mootools return an error at line 115 in sss.js.
    Do you think you can fix that? If you want I can give you some bucks for it (using paypal)

    Thanks a lot.

Leave a Reply

ok to use:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

bonus!

If you want to post code, you can use:

<pre lang="[language]">[code]</pre>

Where [language] is a valid geshi language type, and where [code] is your code.

GMFDYUI

google mother fucker, do you use it?

An attractive friend of mine pointed out that I hadn’t posted in a bit, so this is what you get.

This is a terribly simple drop in php script that basically just redirects people to Google with a query.

This is useful when someone ask you a stupid question, when it should be obvious that they just need to Google it. You can give them a link that may appear to be useful, but will it only taunt them for being foolish.

example

download

This was inspired by http://justfuckinggoogleit.com/ and of course whoever originally came up with the Samuel L macro. A sarcastic apology to anyone offended by the language in this post. Get off the internet, thank you.

trackback

Tags: , , , no responses »

Leave a Reply

ok to use:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

bonus!

If you want to post code, you can use:

<pre lang="[language]">[code]</pre>

Where [language] is a valid geshi language type, and where [code] is your code.

mlurl (my little url): a personal url shortener

mlurl - my little url

A friend (and boss) of mine thought that this would be a good idea, and not being foolish/strange enough to be a coder himself, I decided to make it because it could be useful.

It is a drop in php script that allows you to host your own url shortener / redirector like snurl or tinyurl. Only you will be able to add / remove url’s from it.  This would allow you to essentially brand the url’s you send, or just simplify the linking process on your site or elsewhere.

If you have any trouble, check out the README.txt included, or leave a comment here.

download

trackback

Tags: , , , , , , 4 responses »
  1. julfo's gravatar

    Hi,

    This is great, but i have one suggestion, or even a request. I feel that mlurl would be improved if you made it so that you didn’t have to log in to create urls. Of course there could still be an admin area, but not necessary to log in to create links. If you did that then this would be perfect. Perhaps you could creat Mlurl v.2?

    Thanks,
    Julfo

  2. atom's gravatar

    I am working on another version between other things. It will most likely be released on this site when I am done.

  3. diancitie's gravatar

    Great article.Thanks.

  4. 青岛卓众's gravatar

    青岛卓众(www.chinajoyzone.com)给博主拜年来了,恭祝新的一年事事顺心,万事如意。

Leave a Reply

ok to use:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

bonus!

If you want to post code, you can use:

<pre lang="[language]">[code]</pre>

Where [language] is a valid geshi language type, and where [code] is your code.