Writing and Updating DOM Elements in a Frame

Handling writing and updating objects in an iframe can be bothersome in most browsers. Sure things like jQuery tend to help, but not always.

A normal way to access a frame in jQuery is below:


$("#FRAME").contents()

Now, lets say you actually want to get another element inside of the frame, lets get the HEAD element.


$("#FRAME").contents().find("HEAD");


Continue reading

Expanding the jQuery Plugin Development Pattern

Doing research on a recent project, I came across an article by Mike Alsup on a “jQuery Plugin Development Pattern”.
If you haven’t seen it already its worth a trip to learningjquery.com to checkout the implementation of his pattern.

“There are a few requirements that I feel this pattern handles nicely:”

  1. Claim only a single name in the jQuery namespace
  2. Accept an options argument to control plugin behavior
  3. -Provide public access to default plugin settings-
  4. Provide public access to secondary functions (as applicable)
  5. Keep private functions private
  6. Support the Metadata Plugin
  7. Allow for extending the object via callbacks (either hooks or events) as applicable
  8. Scope all selectors with the ‘this’ object

Continue reading

jQuery 1.5 Deferreds

Eric Hynds on his blog the other day gave a very good run down of jQuery 1.5 Deferreds. From the post:

Deferreds, new in jQuery 1.5, decouple logic dependent on the outcome of a task from the task itself. They’re nothing new to the JavaScript scene; Mochikit and Dojo have implemented them for some time, but with Julian Aubourg’s AJAX rewrite landing in 1.5, deferreds in jQuery was the logical next step. With deferreds, multiple callbacks can be bound to a task’s outcome, and any of these callbacks can be bound even after the task is complete. The task in question may be asynchronous, but not necessarily.

Continue reading

$(“#ID”) is fast enough

We all know that the fastest selector to use is the ID. Something like $(“#id”) is better than using a class. However,
after looking at the last test we did on The Great Assumption – JavaScript I noticed
a large discrepancy in $(“#ID”) versus the native document.getElementById().

Now, I always assumed it was slower, but not anywhere near close to what I saw. So, lets challenge the assumption that $(“#ID”) is good enough.

Continue reading

The Great Assumption – Javascript

A couple of weeks ago I was sitting down with a Google Frontend Engineer friend of mine, talking about some of the JavaScript best practices we all have come to know and abide by. I found myself in agreement with 90% of everything we were talking about. However, something kept eating at me. Why do we both agree on these things? Is it because we actually sat down and did some test? Or is more because early in our careers we were told it was the correct way and have never gone about challenging our assumptions.

So with this post, I am going to start challenging our assumptions on what’s right, OR validate those assumptions with some documented proof. Thus begins our first in a series of posts about performance, and a “Do this, Not that” series. Some of the posts will focus on jQuery, others on core JavaScript, however all of them should give you some insight on what to do in the future.

Continue reading

JavaScript Performance Testing – An Indispensable Tool

Over the course of the last couple of weeks I have been looking into various tools to test Javascript Pefromance. I needed a way to test various JavaScript code snippets to see the overall latency/run time of each. I started looking for a way to manage the tests and be able to reference them in an easy way. Here are a couple of the performance suites I looked at and afterwards, my decision.

Continue reading

Underscore.js Templates

After the post about why Underscore.js, I think it is best to follow up on one of the best parts of the library. Now, I haven’t had a chance to go through the new templating in jQuery, however what I have found with Underscore.js has allowed me to complete some very complicated tasks in my day to day work.

Lets take a look at the documentation for _.template and then we will dig into it a bit more:

template_.template(templateString, [context])
Compiles JavaScript templates into functions that can be evaluated for rendering. Useful for rendering complicated bits of HTML from JSON data sources. Template functions can both interpolate variables, using

<%= … %>, as well as execute arbitrary JavaScript code, with <% … %>. When you evaluate a template function, pass in a context object that has properties corresponding to the template’s free variables. If you’re writing a one-off, you can pass the context object as the second parameter to template in order to render immediately instead of returning a template function.


var compiled = _.template("hello: < %= name %>");
compiled({name : 'moe'});
=> "hello: moe"
var list = "< % _.each(people, function(name) { %>
<li>< %= name %></li>

< % }); %>";

_.template(list, {people : ['moe', 'curly', 'larry']});
=> "
<li>moe</li>
<li>curly</li>
<li>larry</li>
"

Pasted from <http://documentcloud.github.com/underscore/>

So what can we do with this? Lets take a look at showing some employee data:

Continue reading

Underscore.js

Coming from a more technical backend role, and moving into JavaScript many people tend to look for very common functions to make their life easier. However, since JavaScript is considered a “functional” programming language, most of those little conveniences are currently unsupported. So I went searching a bit. Turns out there is a nice little utility belt library that gives us access to all of those built-in methods we all take for granted and are about to be supported in ECMAScript 5.

As the guys over at Underscore.js put it:

Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects. It’s the tie to go along with jQuery‘s tux.

Underscore.js uses the built in functions if they exist, and if they don’t falls back to its own version. Since there are only a few browsers that currently support ECMAScript 5, it allows us to use these functions even on older browsers.  Now, not only can we start using those constructs before they are officially supported in the browsers, but as soon as they become available underscore.js will get out of the way.

Continue reading

Finding an Element outside of your current iframe

Sometimes you are working within an iframe and need to be able to check for an element outside of that frame. It sounds simple enough, and you are right. The following bit of code grabs an element outside of your current iframe:


if (typeof window.parent != "undefined"){
window.parent.document.getElementById("SOMEID");
}

Pretty simple!

Now, lets look at a use case where you might actually need to do something like this. We will use jQuery to grab all of the links outside of the iframe and set an onclick event that will stop the link from working:


$("A", window.parent.document).click(function(e, data) {
// "this" is now the A that was clicked
console.log($(this));
e.preventDefault();
});

Continue reading

Custom Events in jQuery

*quick note: I originally posted this on trulyevil.com. However its time to move sites and actually keep something up and running for a while.

Events seem daunting at first, but really jQuery makes them super simple. Events can be used to alter behavior or even have multiple events happen on a single state change.

We all know about events like click, onkeydown, onmousedown, onmouseover, etc. But you can fire custom events as well. First you need to understand how to fire events. You can do this by using the $().trigger() event through jQuery.

Continue reading