indeedle » jQuery

(Greasemonkey) Gaia Avatar Undo

Cody — Tue, 30 Mar 2010 05:10:20 +0000

I had another case of “distracted Greasemonkey writer”, where I’m on a web page and wondering why this certain something really doesn’t work that well.

Anyway, it resulted in me writing a new script, which I call the Avatar Undo. Like my last one, this is for GaiaOnline.com, and basically it adds a simple “undo” button to the avatar page. It records what items you put on, and in what order. Then when you click undo, it will go back and reverse those changes.

It is obviously not perfect, since it cannot compensate for server-side changes (like other items being removed due to layering clashes), however it is pretty good for the simple stuff.

This is something we all should hope Gaia adds, sometime in the future.

It can be found on my Gaia-based website, as well as on Userscripts.org.

Remember, this is a greasemonkey script, so if you don’t have it, go get it!

IDs starting with Numbers

Cody — Sat, 27 Mar 2010 21:54:19 +0000

We all know the ID and NAME conventions on HTML tags. The ID must start with a letter, and then afterwards can be any number, letter, hyphen, underscore or colon. So creating an ID of 56green would not work, as it begins with the number 5. Where as S6green would be perfectly valid.

Recently I wrote a greasemonkey script, and I found (to my horror) the website had used alphanumeric strings as their IDs. That was fine, but the catch was they didn’t check to see if each string followed the standards, meaning half started with a number.

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (“-”), underscores (“_”), colons (“:”), and periods (“.”).

http://www.w3.org/TR/html4/types.html

It didn’t bother them, as the elements were not directly referred to. However it was a pain for me and my script, and so I had to find a way to call the element.

In my example, the name of the element will be 25tuna.

$('#25tuna').hide();
// In this case, nothing would happen. The element would not hide,
// even if it was still on the page.

$('#25tuna').length
// Would = 0, even though we can see the element sitting on the page.

Instead, I ended up having to use a workaround for the issue.

$('div[id="25tuna"]').length; // now will equal 1
$('div[id="25tuna"]').hide(); // should now work

So while you can’t refer to the element using the regular notation, you can use it through attribute notation (since ID is another attribute on an HTML element).

This is not ideal, and does introduce its own performance issues. If it’s a case where you are able to alter the HTML element on the page directly (being your own website), do that and make the ID/NAME attributes conform. It will save effort and frustration.

However if you are writing a greasemonkey script (in jQuery like I did) then you may find this is your only option.

Add a CSS class to any disabled button

Cody — Wed, 30 Dec 2009 00:37:05 +0000

This adds the class of “myclass” to any input with a type of “button” that is marked as disabled. This way you can easily style disabled buttons across a multitude of browsers.

$('input[type=button][disabled=disabled]').each(function(){
	$(this).addClass('myclass');
});