The ReadyAgain jQuery Plugin: Re-executing Ready

I’ve been wanting to become better acquainted with the Mecurial revision control system (see Hg Init for more info). There’s also been a jQuery related issue I’ve been wanting to investigate. So I made the jump and

1. Created a plugin
2. Created a repository for that plugin at BitBucket

ReadyAgain at BitBucket

The ReadyAgain jQuery Plugin

Prior to version 1.4, the array of functions saved by jQuery for execution when the DOM is ready (i.e. those functions added by $(document).ready(function...)) was an accessible property of jQuery. This meant that you could reference the array directly using something like $.readyList. Now, however, that array has been hidden within an anonymous, self-executing function (the deepest, darkest well of data hiding in javascript, here’s a bit of a primer). So re-executing all of the ready functions by grabbing a copy of that array becomes impossible.

The ReadyAgain plugin is my attempt to solve that issue. The specifics can be seen by looking at the code, but the basic concept is to override jQuery.ready to intercept each function as its added, and to save it within our own internal array.

Public Code

So the initial commit of the code is there and I’ve typed up a page on the Wiki with some examples. I hope that people use it and maybe even contribute to it. It would certainly be something fun for me to be a part of and from which to learn.

↓↓(show more)↓↓

SWFObject, IE and Dynamic Content (a problem)

I’ve got a problem. The main players are my plugin, Internet Explorer (7, maybe 8, not 6) and SWFObject.

The original inkling of issues came via Anon’s comment, on my previous update post, that YouTube videos pulled down as part of the “more” section were broken. I tested this locally and saw that, with IE7, he/she was right. Of course, it’s not just YouTube. It would be any of the <object>/<embed> elements video sharing sites provide.

That really sucks.
↓↓(show more)↓↓

Overflowing List Elements

So I had a problem. A long, unordered list of links seems to want to overflow out of their containing <div>. The list items were set to display inline and were extending out past the width of that <div> instead of wrapping down to a new “row”. This list was being generated programmatically, i.e. (simplified):

1
2
3
4
5
6
7
8
9
10
11

$values = get_values();
$display = "<ul>";
 
foreach($values as $value)
{
    $display .= "<li>$value</li>";
}
 
$display .= "</ul>";
 
echo $display;

Why was my list spilling out of its well defined boundaries? A staggering amount of time was spent fiddling with every possible CSS property for that element and those around it. Edit, save and reload. Edit save and reload. It was driving me insane.

Solution? Append a newline after each list element.

6

$display .= "<li>$value</li>\n";

I have no idea why. If you do, please enlighten in the comments.

Dear Lord I hope this helps someone else out.

Absolute Positioning and the Canvas Element

I’ve been working on a personal “hobby time” project lately using John Resig’s port of Processing (a Java thing) to Processing.js (a javascript thing).

I was at one of those lulls where, instead of worrying about the code, I started playing with the layout. My <canvas> element is sitting inside a <div>, whose “positioning” property I changed to absolute. After this edit, the top-left corner of my <canvas> was no longer (0,0). It had changed to the (x,y) coordinate of the <canvas> element on the page.

Of course, the above conclusion was only reached after a bunch of “W.T.F is going on? Why T.F. is everything broken?”. After some other debugging routes, it dawned on me what might have happened. So I set the frame rate to 1, and used Firebug to log the mouseX and mouseY as I moved the mouse around. Sure enough, my positioning of “top: 200; left:200;” was reflected in Firebug’s console output showing coordinates near those values while hovering around the top left corner. Commenting out the style sheet’s absolute positioning returned the console output to the (0,0) area code.

So this is a defect, right? I can’t imagine that’s how it’s supposed to work. Anyway, consider this a heads-up if you decide to embark on a little processing.js play.

A Thorough Video Tutorial for Slicing and CSSing

NETTUTS has an extremely thorough, step-by-step video tutorial that covers slicing a site design in Photoshop, coding the HTML, creating the CSS and then (briefly) adding a touch of Javascript.

I make this recommendation with a bit of hesitance though, as the total running time is a bit over 90 minutes. I actually skipped the last third or so of the first video (slicing the PSD). But there is something strangely mesmerizing about watching someone else progress through their work like this. It’s also interesting for me to see someone else’s work flow and tools use.

The presenter/author, Jeffrey Way, states that the tutorial is for beginners, but I’d say that it edges closer to the intermediate level. The CSS section, though long, progresses pretty quickly. You have to already be pretty familiar with the selectors syntax. And he moves right past terms like “inline” and “block”.

If you’ve got the time and the inclination, it’s an excellent howto for that area of web work.

Firefox, CSS and floats: Where’s my background?

This is one of those absurd situations that result in far too much effort and stress (if you ask me). It goes like this: You want to create a layout with a couple columns. Those columns are set inside your “container” with a pretty background color or nice border. Wrap a couple <div> elements, float one left, the other right, and add your border/color. Right? Check it out in IE and things look as you expect. But when you look at the results in Firefox, you’ve lost your background! Or that distinguishing border is now lumped at the top as a single, less-than-appealing line! What happened?

There are countless solutions to this available via the normal searching mechanisms. I have to give credit to my first encounter of the solution I like the best: a “Background height problem” forum post with the solution being the very first response. The <img> element at the bottom of poster’s content could be modified with the “clear: both” style applied to it. The solution also points to this excellent article, “Clearing a float container without source markup“, which goes into some great detail (a must read).

So here’s my quick tutorial on the matter. For this to be worth while, you’ll need to be following along in Firefox. And again, for more details, please read the “Easy Clearing” article linked to above.
↓↓(show more)↓↓

Wordpress, jQuery and ‘noConflict’

I’ve been working on a plugin for Wordpress and have, until now, been using Mootools. I decided that I should try and simplify things by using jQuery, since it is already included with Wordpress.

So let me take you through my links and hopefully summarize what I’ve learned. First though, let me say, I’m assuming that you already know what it means to hook into the Wordpress application flow by adding “actions”. If not, read up.
↓↓(show more)↓↓