You know those edit in place plugins for jQuery? Well I couldn’t find any that met these two criteria:
Work on elements not yet in the DOM
Didn’t post anything to the server
Now the first requirement probably makes a lot of sense to you, but I bet you’re wondering about the second one. In these crazy mixed up times with rich HTML5 apps, I don’t want to post to the server often. Maybe I’m using local storage, or perhaps I just want to send a big heap of JSON now and again, but I definitely don’t want to post every time anyone changes the value of an editable field.
So after examining all the terrible options (classic first step when choosing jQuery plugins) I decided to throw my own terrible option into the mix.
$.fn.liveEdit = () ->
this.live 'dblclick', () ->
$this = $(this)
return if $this.is("input")
textInput = $("",
id: if id = $this.attr("id") then id else null
this.live 'blur keydown', (event) ->
if event.type == "keydown"
return unless event.which == 13 || event.which == 9
$this = $(this)
return if $this.data("removed")
return unless $this.is("input")
id: if id = $this.attr("id") then id else null
There are two tricks here. The first is that this plugin is really a macro that makes two calls to live. The second is that the editable content keeps it’s same id and class when switched out to a text field, so as long as your selector is not based on the element type it will work. There’s plenty of room for improvements, but this is a super simple first step that meets my needs. Enjoy!
Here’s the CoffeeScript for a jQuery plugin I wrote that makes accepting images dragged in from the desktop super easy. The event.fix part at the beginning is because jQuery currently doesn’t pass on the dataTransfer attribute of events. Once that’s taken care of we create the plugin.
For image drops all you really care about is the file name and the data url, but if for some reason you need different file results here’s the line to modify: reader.readAsDataURL(file). You can also extend or alter what is passed to the callback if this is too mundane for your needs.
And here’s the JS version for anyone eager to copy/paste:
Here’s how you can write your own simple jQuery style events:
At first I was thinking, “I should email this guy and tell him to make a jQuery plugin”. But then I thought, “I’m the one who needs the jQuery plugin…” so I made it. Maybe now I’ll email him and say “I made a jQuery plugin for your color picker”.
This port is from the 1.0.9 version. jscolor was completely rewritten in 1.1.0 and looked like it had some regressions though it is at 1.2.3 now. The newer version is twice as big, still not a jQuery plugin, and also still missing hundreds of semi-colons, so I decided to stick to what I know and work on the smaller version.
So now it is a clunky jQuery plugin. There are still several spots where the syntax could be improved to take advantage of jQuery, but since there are no tests, and I don’t have a bunch of different browers to QA on, I decided to leave it alone as much as possible.
I remember installing a userscript that would display Google search results in two columns in days of yore. Then one day it stopped working. All the other Google userscripts were massive customize everything about Google ever. I just want two columns homie, and favicons, but I’ve already got the FF plugin for that.
So here it is, the amazing remake that is as good as the original… Two Column Google, nothing fancy, just two columns.
This little guy will hang out on your internet and highlight all the elements that match the selectors you type in. Indispensible for development! It doesn’t remember where you leave it on the page yet so it’s probably easiest to turn on only when needed.
Find some more of my jQuery Greasemonkey scripts here. They are sometimes ahead and sometimes behind what I post on the blog.
This technique works whether or not you inject or @require the jQuery js libraries.
The drawback to injecting jQuery is that it is forced to run in the unsafe window context which doesn’t allow you to use GM_* methods in callbacks (this make $.each pretty weak). Also, it breaks pages that define the $ function, but I believe this can be avoided by telling jQuery not to interfere and you can set $ as the local alias within your GM script zone (if that makes any sense).
The drawback of using require is that the UI classes throw exceptions (at least on version 1.6rc6). The dialogs display ok, but you need to catch the exceptions they throw. Also, they throw an exception when you try and drag. I’m pretty sure that it has to do with XPCNativeWrapper. One day UI will be easy in Greasemonkey… one day… Until then this should get you part way there.
The @resource technique works for more than just jQueryUI, use it for your own css and images, at least until jQuery UI gets fixed.
I’ve been called a greasy thug, too. It never stops hurting. So here’s what we’re gonna do: We’re gonna grease ourselves up real good and trash that place with a baseball bat. – Homer
Fact: GreasyThug will make all of your wildest dreams come true.
Built in jQuery functionality.
Google Gears included.
A persistent command history across page reloads and browser restarts.
Drag and drop – remembers where you put it for each site.
Ability to persist micro-scripts and apply them automatically everytime you visit the page.
Warning! GreasyThug is slick (it’s the grease) and dangerous (it’s a thug). An interactive console is essentially a pipe straight into eval(). So… BE CAREFUL! If your thug becomes compromised it will be your house that gets trashed with a baseball bat. Remember, this is eval in the elevated Greasemonkey privilages context, its strength for development is also its weakness for security.
A “The website below wants to store information on your computer using Gears” security warning will pop up, as it will do for everydomain that you have GreasyThug enabled for. It’s not really the website using Gears, though some might eventually. Click “Allow”. (This is how the command history and micro-scripts are saved).
Now let’s get cracking! Drag the interactive console to a comfortable location. (It will begin in the top left by default)
Now on to the cool stuff: that white background is a little bland for Valentine’s Day, let’s spice it up. Pop this into your console:
It’s beautiful! See how I can use jQuery? Neat! Also, the up arrow populates the input with my previous command.
Maybe it’s not quite as good looking as I thought, probably best to stick with white… let’s just refresh and forget about this debacle. Back to normal… but the history remembered my command in case I want to try it again.
It is my strong belief that there should be a link to STRd6 right next to everyone’s email address on the Google search page. Obviously this should only be for logged in users… I can only change it for myself though…
But what about when I refresh… it’ll disappear and all that hard work will be gone?!? Not so good friend:
This will store whatever command you last executed to be executed again when you return. You can save many commands. These are those micro-scripts that you’ve been hearing so much about and they are the future.
So is this the end? It is for today. Now imagine sharing micro-scripts with your friends. It’s our internet now. It just takes some elbow grease and a little thuggery.