Learn Dash Ajax Dot Com

Confessions of a web developer

"Drag Everything", My Latest Greasemonkey Script

clock January 26, 2009 03:44 by author nickyt
Hey folks,

I think I'm having a little too much fun with Greasemonkey. I decided to make another fun, simple and potentially useful script called "Drag Everything".

Basically it makes anything (or almost anything) instantly draggable on a page. Why would you want to do this? Maybe you just want to waste time and have some fun, or maybe you're a designer and want to change your layout at client-side runtime. Once you have a layout you like, you can view the run-time generated source using a cool tool like the FireFox Add-on Web Developer to test out your new markup layout.

Grab the script on userscripts.org here. As usual, make sure FireFox is installed with Greasemonkey. See my previous posts on Greasemonkey to get that setup.

Here's the non-minified code. I minify the code on userscripts.org so as to reduce the footprint of the script. It's not to make anything super secret. I couldn't bother pasting my script in my blog because formatting it was a pain, so here's the script, drag_everything.js.


Learning AJAX APIs Made Easier: Google Releases API Playground

clock January 23, 2009 14:47 by author nickyt
I can't take credit for this find. I received this via my codeproject.com daily newsletter. And I guess they can't take credit for this either, because it was Frederic Lardinois that wrote the article Learning AJAX APIs Made Easier: Google Releases API Playground .

Anyways, the article points to some cool AJAX stuff that Google has done and gives you a playground, AJAX API Playground, to test it. I haven't really used any of the Google AJAX stuff except for a Google Map that I added to this site. Some of the widgets are pretty cool though like the gauge widget .


Greasemonkey Script for Pre-Fetching Page Content

clock January 20, 2009 04:57 by author nickyt
Hey folks,

Here's a script that prefetches content from links on a page. The point is to help speed up load times of pages that you may be potentially visiting. I whipped this one up pretty quickly, so there's quirks in it right now.

The way it works is, I load all href attributes of anchor tags into separate iframes and then on the load of the iframe, I delete it It seems to work OK, but I already noticed a quirk. Links that are downloads sometimes pop up a Save dialog. As well, I currently skip loading links from iframes and frames just because I don't want to slow down the browser too much.

I think the FireFox team is working on a page prefetcher for the browser, but for now my script is really just to tinker around a bit.

So to use the script, first, you need to be using Firefox. Second, you need to install Greasemonkey. Once you have all that, download my script, Page Prefetcher.

That's it. Presto!

I recently minified the code for the script using YUI Compressor, so if you want to see the original code as of January 20th, 2009 check it out below. I formatted some of the lines which is why you see some strings broken up when it's not necessary.


// ==UserScript==
// @name Page Prefetcher
// @namespace Webnick.UI
// @description Pre-fetches content from links in a page. Released under the GPL license, http://www.gnu.org/copyleft/gpl.html
// Skips mailto:, ftp:, ftps:, chrome: and javascript:
// protocols (suggest other protocols to skip please).
// Also skips iframes and frames for now.
// This is a work in progress.
// @include *
// ==/UserScript==



(function() {
if (self != top) {
// skip frames and iframes for now.
return;
}

// Change this time to whatever you want.
// I found on my PC, 5 seconds (5000 milliseconds) works best.
var preFetchWaitTime = 5000;


// set this to true if you want to see links being processed.
var seePrefetching = false;


var links = self.document.getElementsByTagName("a");
var linksToProcess = [];
var currentLink;
var preFetcher;



if (seePrefetching) {
var div = document.createElement("div");
div.style.position = "fixed";
div.style.top = "0px";
div.style.left = "0px";
div.style.width = "600px";
div.style.height = "100px";
div.style.overflow = "auto";
div.style.backgroundColor = "orange";
div.style.textAlign = "left";
div.style.padding = "5px";
document.body.appendChild(div);
}

for (linkIndex = 0; linkIndex < links.length; linkIndex++) {
currentLink = links[linkIndex].href;

if (!(/^(mailto:)|(ftp:)|(ftps:)|(chrome:)/i.test(currentLink))
&& !linksToProcess[currentLink]) {
linksToProcess[linksToProcess.length] = currentLink;
}
}

setTimeout(
function preFetch() {
if (linksToProcess.length > 0) {
var url = linksToProcess.pop();


if (seePrefetching) {
div.innerHTML += "Pre-fetching " + url + "<br />";
}


preFetcher = document.createElement("iframe");
preFetcher.src = url;
preFetcher.id = (new Date()).getTime();
preFetcher.style.display = "none";
preFetcher.setAttribute("onload"
, "setTimeout(function(){top.document.body.removeChild("
+ document.getElementById('" + preFetcher.id + "'))}, 0);");
document.body.appendChild(preFetcher);
setTimeout(preFetch, preFetchWaitTime);
}
}
, preFetchWaitTime);
})();



Greasemonkey Script for Outlining Inputs like Safari/Chrome

clock January 5, 2009 19:06 by author nickyt
Hey folks,

Here's a very simple script that gives you the outline around inputs when on a web page, just like Safari or Chrome or I guess any AppleWebKit based browser.


First, you need to be using Firefox. Second, you need to install Greasemonkey. Once you have all that, download my script, Outline Inputs Like Safari .

That's it. Presto!