Latent Motion » Javascript

How to Sort an Associative Array (object) in Javascript

Brett — Fri, 21 May 2010 18:27:14 +0000

I’ve been working on an ajax site that needs to pass parameters elegantly via the hash tag. While working, I realized that there is usability value to a standardized URL (not to mention SEO value, if Google ever indexes such javascript based pages). In any event, I created this function to sort my hash arrays, and figured you might find it useful too:

function sortObj(arr){
	// Setup Arrays
	var sortedKeys = new Array();
	var sortedObj = {};

	// Separate keys and sort them
	for (var i in arr){
		sortedKeys.push(i);
	}
	sortedKeys.sort();

	// Reconstruct sorted obj based on keys
	for (var i in sortedKeys){
		sortedObj[sortedKeys[i]] = arr[sortedKeys[i]];
	}
	return sortedObj;
}

You can construct a demo page with the following HTML:

How to Create a jQuery Bookmarklet

Brett — Thu, 20 May 2010 16:00:15 +0000

I suspect many of my readers have written at least one jQuery Plugin / Script. In this post, I’d like to show you how to get the most out of that script by also releasing it as a jQuery Bookmarklet. Below, you’ll find two examples of utilities that are ripe for bookmarkleting, as well as a prepared jQuery Bookmarklet file that you can easily modify for the purpose.

Note: Even if you haven’t written a jQuery plugin before, you’ll find bookmarkleting someone else’s plugin as easy as using it on a site.

Before I get to the code though – take a look at the payload. You can add the following links as bookmarklets by right-clicking and selecting “Add to bookmarks / favorites” (in Chrome, you press “ctrl+shift+b” to open the bookmark manager, and drag them over). You can try them before you bookmark them by simply clicking the links on this page too.

Example One:

Clicking the above link will add the table sorter jquery plugin to the page, including its stylesheet, and it will apply the script to all tables on the page. Once it’s loaded, you can click on any of the table column headers to sort the rows by column values.

Example Two:

The visualizer bookmarklet will add graphical representations of the data in the table. As with the table sorter, this bookmarklet was adapted from a pre-existing plugin, Filament’s jQuery Visualize.

2009 Employee Sales by Department
	food	auto	household	furniture	kitchen	bath
Mary	190	160	40	120	30	70
Tom	3	40	30	45	35	49
Brad	10	180	10	85	25	79
Kate	40	80	90	25	15	119

Cool stuff, right? Let’s get to how it works then – starting with the prepared jQuery Bookmarklet template. This is what I recommend you use when writing your own bookmarklets:

/*
 * jQuery Bookmarklet - version 1.0
 * Originally written by: Brett Barros
 * With modifications by: Paul Irish
 *
 * If you use this script, please link back to the source
 *
 * Copyright (c) 2010 Latent Motion (http://latentmotion.com/how-to-create-a-jquery-bookmarklet/)
 * Released under the Creative Commons Attribution 3.0 Unported License,
 * as defined here: http://creativecommons.org/licenses/by/3.0/
 *
 */
 
window.bookmarklet = function(opts){fullFunc(opts)};
 
// These are the styles, scripts and callbacks we include in our bookmarklet:
window.bookmarklet({
 
    css : ['http://www.site.com/your.css'],
    js  : ['http://www.site.com/your.js'],    
//	jqpath : 'myCustomjQueryPath.js', <-- option to include your own path to jquery
    ready : function(){
 
		// The meat of your jQuery code goes here
		$("body").html("Hello World");
 
   	    }
})
 
function fullFunc(a){function d(b){if(b.length===0){a.ready();return false}$.getScript(b[0],function(){d(b.slice(1))})}function e(b){$.each(b,function(c,f){$("").attr({href:f,rel:"stylesheet"}).appendTo("head")})}a.jqpath=a.jqpath||"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js";(function(b){var c=document.createElement("script");c.type="text/javascript";c.src=b;c.onload=function(){e(a.css);d(a.js)};document.body.appendChild(c)})(a.jqpath)};

From top to bottom, what the jQuery Bookmarklet Template does is:

Prepare the full bookmarklet function. This is the call to the minified code in the last line of the js file. It is in an uncompressed format at the bottom of this post for those interested, but most will never need to see it..
Create the configurations, including arrays to your CSS and JS files. You can load as many as you see fit, and the JS files will load asynchronously, ensuring that each file can reliably depend on the file before it.
Provides the callback function for your editing. Place whatever jQuery code you like here.

In order to use that script, though, you’ll need to create a link that calls it. Here’s the code for that link:

Your Bookmarklet Name

To some that might look like a handful, but don’t worry, the hard work is already done. All you need to do is change the url in that link to point to your javascript file, and add a little regular-ol-jQuery to that javascript file.

Ok, still with me? Great! Now let’s look at one of the actual live examples we used earlier on the page. Here’s how I included table sorter, which requires both a JS and CSS file:

/*
 * jQuery Bookmarklet - version 1.0
 * Originally written by: Brett Barros
 * With modifications by: Paul Irish
 *
 * If you use this script, please link back to the source
 *
 * Copyright (c) 2010 Latent Motion (http://latentmotion.com/how-to-create-a-jquery-bookmarklet/)
 * Released under the Creative Commons Attribution 3.0 Unported License,
 * as defined here: http://creativecommons.org/licenses/by/3.0/
 *
 */
 
window.bookmarklet = function(opts){fullFunc(opts)};
 
// These are the styles, scripts and callbacks we include in our bookmarklet:
window.bookmarklet({
 
    css : ['http://tablesorter.com/themes/blue/style.css'],
    js  : ['http://tablesorter.com/jquery.tablesorter.js'],    
//	jqpath : 'myCustomjQueryPath.js', <-- option to include your own path to jquery
    ready : function(){
 
		// Initiate table sorter
		$("table").tablesorter().addClass("tablesorter"); 	
 
   	    }
 
})
 
function fullFunc(a){function d(b){if(b.length===0){a.ready();return false}$.getScript(b[0],function(){d(b.slice(1))})}function e(b){$.each(b,function(c,f){$("").attr({href:f,rel:"stylesheet"}).appendTo("head")})}a.jqpath=a.jqpath||"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js";(function(b){var c=document.createElement("script");c.type="text/javascript";c.src=b;c.onload=function(){e(a.css);d(a.js)};document.body.appendChild(c)})(a.jqpath)};

For your convenience, you can also download the script as a JS file.

And that’s about it! Sorta, anyway. Here’re some bonus thoughts for the real enthusiasts:

Bookmarklets leverage caching, big time. When developing, I found this to be a major frustration, so I added a large random number at the end of the js call, which effectively forces a reload each time the javascript is called. Upon deployment – you may choose to remove it, but keep it in mind next time you make a change and don’t see the effects.
Another reason I force refreshing of my js file is because I want to be able to update my scripts without forcing my users to re-bookmark them.
If you create your own bookmarklet and want to post about it in wordpress, you’ll quickly learn you need a workaround. The first one I used was hardcoding the links in an external page, and displaying them through an iframe. It worked, but was lame. Now I’m using javascript to store the desired a href as a variable, then I wrap that variable with the tags, and finally I document.write it. If you have a better idea, let me know.
The table examples that I’ve provided on this page are based on pre-existing jQuery plugins. Those plugins assume that tables are correctly formatted, with table headers etc. If a website’s layout was built in the 90s and still uses tables for page structure, the results won’t be pretty.
Sadly, Disqus (the host service for my comments below) uses tables. This of course conflicts with the specific table examples I used above, and can be resolved by refreshing. I’m sure it’s possible to set the bookmarklet to listen for a click of a table, but that’s beyond the scope of the current script/lesson.

And here’s some extra credit reading:

Learning jQuery made me realize that loading jQuery dynamically is possible. Almost ironically, Paul Irish helped with some modifications over there too.
After writing this article, I was informed Ben Alman had already written a similar script. His actually includes a “generator” that will use your jquery code and embed it for you, which is cool. It doesn’t include a loop to first include javascript / css files, but he probably figured it was easy enough to add yourself.
Tommy, at Smashing Magazine, wrote a much more in-depth article about the details and options when writing a jQuery bookmarklet. Although it was posted a few days after I posted mine, he had submitted it months in advance. Smart guy
Marklets is a pretty nifty bookmark database that gives you searchable access to triggering any script in the arsenal. The creator and I are discussing a joint bookmarkleting project. Contact me if you’re interested in making bookmarklets kick ass again.

If you have any ideas, questions, or musings, I’d love to hear ‘em! Please add your comment below.

Update: Paul Irish was kind enough to help improve this script and teach me a couple things along the way. The following is the unminified version of what I’ve listed above, and includes his structural changes.

/*
 * jQuery Bookmarklet - version 1.0
 * Originally written by: Brett Barros
 * Heavily modified by: Paul Irish
 *
 * If you use this script, please link back to the source
 *
 * Copyright (c) 2010 Latent Motion (http://latentmotion.com/how-to-create-a-jquery-bookmarklet/)
 * Released under the Creative Commons Attribution 3.0 Unported License,
 * as defined here: http://creativecommons.org/licenses/by/3.0/
 *
 */
 
window.bookmarklet = function(opts){fullFunc(opts)};
 
// These are the styles, scripts and callbacks we include in our bookmarklet:
window.bookmarklet({
 
    css : ['http://tablesorter.com/themes/blue/style.css'],
    js  : ['http://tablesorter.com/jquery.tablesorter.js'],    
//	jqpath : 'myCustomjQueryPath.js', <-- option to include your own jquery
    ready : function(){
 
		// Initiate table sorter
		$("table").tablesorter().addClass("tablesorter"); 	
 
   	    }
 
})
 
function fullFunc(opts){
 
    // User doesn't have to set jquery, we have a default.
    opts.jqpath = opts.jqpath || "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js";
 
    function getJS(jsfiles){
 
	// Check if we've processed all of the JS files (or if there are none)
	if (jsfiles.length === 0) {
		opts.ready();
		return false;
	}
 
        // Load the first js file in the array
        $.getScript(jsfiles[0],  function(){ 
 
            // When it's done loading, remove it from the queue and call the function again    
            getJS(jsfiles.slice(1));
 
        })
 
    }
 
    // Synchronous loop for css files
    function getCSS(csfiles){
        $.each(csfiles, function(i, val){
            $('').attr({
                    href: val,
                    rel: 'stylesheet'
                }).appendTo('head');
        });
    }
 
	function getjQuery(filename) {
 
		// Create jQuery script element
		var fileref = document.createElement('script')
		fileref.type = 'text/javascript';
		fileref.src =  filename;
 
		// Once loaded, trigger other scripts and styles
		fileref.onload = function(){
 
			getCSS(opts.css); // load CSS files
			getJS(opts.js); // load JS files
 
		};
 
		document.body.appendChild(fileref);
	}
 
	getjQuery(opts.jqpath); // kick it off
 
}; // end of bookmarklet();

How to use Firebug in IE6 (and all other browsers)

Brett — Fri, 07 May 2010 09:37:42 +0000

Yaknow, I’ve been using Firebug for quite some time, but I haven’t seen many places mention using it as a bookmarklet. Having gotten partway through programming my own makeshift javascript bookmarklet debugger, I was thrilled to find out Firebug Lite can be bookmarkletized too! Here’s the link – right click and add it to your bookmarks to try it out:

Free RapidShare Service & Countdown Bypass JavaScript

Brett — Wed, 05 May 2010 01:55:57 +0000

The free RapidShare downloads are pretty good – but the downloading process is unnecessarily frustrating. Whereas many other providers drown their visitors with ads to generate revenue that pay for their servers (which is reasonable), RapidShare forces you to wait for no reason other than to frustrate you.

Fortunately, as adblocker has proven, we are capable and legally entitled to control the display of websites as we please. So, with no further ado, here is the solution:

Simply right click and bookmark the above link, so that next time you’re stuck on a web page that’s making you wait for no good reason, you can open the bookmark, and the countdown will immediately complete.

Here is a Rapidshare File to test it on.

For those interested, here is how the script works:

The aforementioned link executes javascript on the page it’s loaded on. This javascript loads an external file.
In the external file, we pull all of the variables a page is using.
One second later, we pull all of the variables again.
We compare the first set of variables to the second set, and if any are exactly just one less, we identify a countdown timer
We now know which variable to set – and we set it to 1 (or very low).

The bookmark link looks like this:

Skip Timers Bookmarklet

And the external javascript looks like this:

/*
 * Skip Timers - version 0.1
 * Written By: Brett Barros
 *
 * The purpose of this script is to save you time by setting countdown
 * timers immediately to 1.
 *
 * If you use this script, please link back to my site with credit / kudos
 *
 * Copyright (c) 2010 Latent Motion (http://latentmotion.com/downloads/skip-timers.html)
 * Released under the Creative Commons Attribution 3.0 Unported License,
 * as defined here: http://creativecommons.org/licenses/by/3.0/
 *
 */

// List of original variables
var oldVars = {};
for (var name in this) {
	oldVars[name] = this[name];
}

// Compare variables one second later
function compareVars() {
	var newVars = {};
	for (var name in this) {
		newVars[name] = this[name];
	}
   for (var key in oldVars) {
     if (oldVars[key] !== (newVars[key])) {
	  	 window[key] = 1;
     }
   }
}

// Call function to compare variables
setTimeout("compareVars()",1000);

Automated Link Building – White Hat Style

Brett — Thu, 03 Dec 2009 13:00:26 +0000

Yaknow, most of the time, black hat SEOs have all the fun. When you don’t have to follow the rules, the world of SEO opens up to mathematically generated content, canned-ham links, and any number of script based processes. Well, today is the day of the white hat, because I’ve just written a killer link building script that will amplify your honest successes.

Link Building Pro, based at seox.org, will automatically add a citation to the footer of any text copied from your website. Unlike other similar solutions, though, it specifically uses the meta keywords from the page as the anchor text – ensuring that the links use the precise keywords you’re optimizing for. And, here’s the best part, any text within the selection that matches the text of another link on the page will automatically be converted into that link. As a consequence, if this selection is then copied into the user’s site, you’ve not only gained one link of citation, but also as many links as logically apply to the text itself.

Of course, what makes this white hat is that it’s all voluntary. The user could easily remove the links if he chooses. But the default switches from being no citation or link to several, and as the default action is the easiest, it is also the one most often taken.

PS: Unfortunately, my previous script “Search and Share” interferes this script (doh!). For now, you’ll have to pick one or the other, but I’ve got big integration plans for the future!

Using jQuery Clone to Add Dynamic Data

Brett — Tue, 22 Sep 2009 16:00:02 +0000

As a User Interface Expert first and Programmer second, I put a lot of consideration into how I code. With every step, I do my best to ensure that designers with less programming experience will be able to accomplish what they’d like. This distinction in programming methods is most clear in how I place dynamic data onto the page.

Whereas many scripts embed the html markup into their javascript, I much prefer to leave it on the page. More specifically, I prefer to leave a model of the html on the page, and to inject the dynamic data using that model. As my example, I’ll continue yesterday’s post on a rolling delicious feed.

If you’d like to skip ahead, you can view the demo here, or scroll down to view the whole block of code.

But I prefer to break things down first. Let’s look at my so-called model:


    
        
        Posted by: 
		Tags:

Notice that it creates the delicious list, and that inside it is an “item”. We’ll be identifying this model, and duplicating it as many times as we need to. When it’s duplicated, we’ll simply find the spans with the appropriate classes, and insert content. It’s easy and processor efficient, see for yourself:

// Clone duplicates the model (with bindings), strips model class/id, gives a unique id, and then adds it before the model
 $("#deliciousModel").clone(true).removeAttr("id") .removeClass("model").attr("id", "del" + i).insertBefore("#deliciousModel")

 // The finds get each class from within the model and replace it with values from the feed.
 .find(".url").attr("href", entry.u).end()
 .find(".author").html(entry.a).end()
 .find(".tags").html(processedTags).end()
 .find(".title").html(entry.d);

The first line does the cloning, removes the identifying attributes (and class model causes a display:hide;), and inserts the new block.

The subsequent lines insert the appropriate data. Each “find” and “end” here is really important. By chaining the javascript, we’re preventing the code from constantly searching the entire document, and we’re containing the modifications to the model itself.

For the entire block of code, view below:





Delicious Feed






    
        
        Posted by: 
Tags:

Calling Remote JSON Files via Javascript / jQuery

Brett — Mon, 21 Sep 2009 16:00:10 +0000

Not too long ago, I was asked to create a rolling delicious feed using their JSON data. It took me quite a while to realize what was going wrong – but the solution was obvious as soon as the problem became clear. If you’re going down the same path, maybe this bit of advice will help.

Firstly, you have to create a local reference of the JSON data. As I understand it, this has to do with the JSON server settings and security. In any event, it’s easy enough to do. Create a file, such as my delicious-json.php. All you need to put in it is this:

Easy peasy. Now you can reference it via jQuery, like so:


$(document).ready(function(){
// DELICIOUS JSON -- http://feeds.delicious.com/v2/json/tag/hyperstudio
  $.getJSON('delicious-json.php', function(data){
    $.each(data, function(i, entry) {
      // Process your data here
    });
  });
});

How you use the JSON is up to you. In tomorrow’s post, I’ll describe my preferred method – cloning a model. Doing so has a lot of speed benefits, but more importantly, it separates the html from the javascript. As a consequence, any web designer can easily step in and modify the aesthetics without touching code. This facilitates the very important separation of concerns.

Div Class Clear – Without the Markup

Brett — Mon, 14 Sep 2009 16:00:00 +0000

The Div Class Clear is an old trick for getting container backgrounds to stretch down to the bottom of its contents. Although there has since been a push for the “float nearly everything” technique, I’m not convinced that constantly setting floats and widths across all elements is a sustainable method. Instead, let’s address the only problem people have with the Div Class Clear method – the added markup.

We can remove this markup quite simply with jQuery. Rather than mess with the actual on-page elements, why not insert it dynamically? Check out the code:

Note: As you may imagine, this method assumes that the viewer has javascript enabled. Given that the downside is a matter of background stretching, and considering all the numerous other things that break when javascript isn’t enabled, I (generally) readily accept this sacrifice. After all, it’s not like Flash, where they get no content at all.

Separating jQuery Functions into External Files (without selectors!)

Brett — Thu, 03 Sep 2009 13:00:54 +0000

In javascript, writing reusable blocks of code is easy. You simply enter something like: “function myFunction() { … }”, and then you later call it by simply writing “myFunction();”. Consequently, when I write jQuery, I often use this javascript shorthand within my jQuery ready tags. As long as all the code stays in a single file, things go smoothly.

But sometimes code grows, and when it does, you’ve got to separate your logic into separate external js files. That’s when things break. You see, in each of these external files, you now have to separately reiterate the jQuery ready tags, and when you do, you’ve buried your functions in a (jQuery) function, rendering it hidden. Out of scope. Or as the error console will tell you, “Missing”.

The trick is to create a jQuery function. There are articles all over the place that tell you how to do this. But every one that I’ve found seems to assume that you want your function to act on a selector. What I needed (and you may as well), was a function that acted just like that regular old javascript function (with jQuery syntax enabled). Believe it or not, all it takes is a minor tweek. Check it out:

External File (tilex.js):

  (function($){
    tile = function() {
      $("body").append('See? It works.');
    };
  })(jQuery);

Inline HTML:




HyperStudio Timeline

Common SEO Mistakes: CSS Image Replacement

Brett — Thu, 30 Jul 2009 15:14:01 +0000

Knowing about CSS Image Replacement and Dynamic Text Replacement, as well as how to implement them, is undeniably valuable. As with most of SEO, having a developer’s skill set (or at least a knowledge of your options), will enable you with a can-do world view. In this case, when a client tells you that they’re committed to a web unsafe font for their headers, and that they therefore can’t use the appropriate keyword rich header tags, you’ll answer “yes you can”.

But there is a very common problem with over-zealous implementation of such SEO tactics without full consideration of their impact. Even SEOs who I have high regard for are victims of this vice. Have a look:

Notice how in each above case, the site represents its graphical logo as an unoptimized text link going back to the home page. And if you subscribe to the first link theory, (which as an astute reader, I’m sure you do), you’ll recognize that this renders any subsequently optimized link back to the homepage relatively (if not completely) limp.

ShoeMoney has it the worst of all, if you ask me. Why, praytell, is the h1 of EVERY page “Shoemoney – Skills To Pay The Bills”. This is only one step down from using the same title, or same description, which you’ll surely be alerted of if you use Google’s Webmaster Tools. And no offense to Gab, but SEOROI isn’t much better, depending on your perspective on the over-use of H1’s.

“Ok, Smartass” you’re probably thinking. “So you think I should go black hat and use cloaked optimized text?”

Well, I’d argue that if your text is descriptive of the graphic, it’s not black hat. But even if you disagree, that’s not your only option. You could also use the equally semantically valid “Alt Attribute” (it’s not a tag), which is designed to describe photos and the like to the blind. This old school method is clean as a whistle, allows you to label as you will (i.e., my: “Boston SEO Logo”), and doesn’t detract from your later carefully picked anchor text links.

So what’s the take away here? Don’t just blindly do what SEO Bloggers say (myself included). Always put yourself in the many shoes of a search engine spider, look at the source code (even if you don’t understand it all), and ask yourself of each element “what would I think of this?” You’ll probably be surprised with the result.

Side Note: In order to dispel any misconceptions right off the bat – I’m not opposed to text replacement. In fact, I think it’s brilliant for header (h1, h2, h3) replacement. Often times company branding dictates the use of a specific font – and this prevents SEO from getting in the way of that. So, if that’s what all you’re doing with it, well done and carry on!