woolie t.

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.

»»» but wait, there’s more reading to do »»»

I had to update the Read More Right Here plugin for the recent 2.8.1 Wordpress release (details below). The most important item to note is that now the minimum required version of WP is 2.8.

»»» but wait, there’s more reading to do »»»

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.

(It’s fixed….see second update below)

I just updated this site to use the latest WP (2.8) and now my “Read More Right Here” plugin doesn’t work quite right. When you click the “Read More” text, the rest of the post successfully downloads and is displayed. However, the next “click” takes you to the post’s single page display instead of just collapsing the new content.

I will hopefully get this sorted out soon. Whenever I do, I’ll update here.

UPDATE:

Unfortunately I haven’t been able to fix this. The problem is caused by the latest version of jQuery (1.3.2), to which WP apparently updated. Actually, it was caused somehow in the changes made in between 1.2.6 and 1.3.

Specifically, the function curCSS is throwing exceptions during the animation of the new content “away” (i.e. hiding).

800

var computedStyle = defaultView.getComputedStyle( elem, null );

The elem parameter being passed to getComputedStyle that causes the exception is a “\n“. With jQuery 1.2.6, I don’t see that element being passed to that function.

I tried some of the other animation techniques, but they I guess they all hit curCSS at some point or another. Even plain old hide causes problems.

So…..sorry. As of right now, the RMRH plugin does not work with WP 2.8. The only solution I can see at the moment is to include the older version of jQuery with the plugin. But I’m not sure yet how that will work out.

UPDATE 2: FIXED

»»» but wait, there’s more reading to do »»»

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.

Over on the post announcing my “Read More Right Here” wordpress plugin, an interesting few comments popped up by Thijs (I love these drawings). He found that the plugin breaks when a domain lets wordpress run its root, but the actual Wordpress files are stored in a subdirectory (see this codex article for the how to).

And awesomely enough, he found the cause of the problem!

»»» but wait, there’s more reading to do »»»

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 passed 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.

There’s a pretty simple tutorial over at Web Designer Wall covering large backgrounds with CSS. Of course, I enjoy the “pretty simple” write-ups because there almost always manages to be some nugget of gold for me. In this case, I had no idea that it was possible to use the HTML element to display background images.

»»» but wait, there’s more reading to do »»»

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.

»»» but wait, there’s more reading to do »»»

I’m releasing the first of what I hope are many plugins for Wordpress. All of the details are at the new “WP Plugins” page here at wooliet.

If you’re reading this on the wooliet main page (with multiple posts listed), you can see it in action by clicking the link below. If the is the “single post page” display then..well….there’s nothing to see! Just go to Wooliet and find an entry with a link to more content.

(Updated with official WP plugin link)

»»» but wait, there’s more reading to do »»»

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.

»»» but wait, there’s more reading to do »»»

GUIMags. Magnets designed like standard GUI controls (text field, combo selection, etc.) which can be written on with the dry-erase markers. The idea is quick layout/design prototyping. It’s one of those “born out of necessity” ideas:

Our lead designer wanted to find a way to keep coming up with great interfaces after carpel tunnel entered his body uninvited. As he pondered a design at home, he used refrigerator magnets as imaginary interface controls, since drawing and clicking was painful.
A journey of ideas and tests later resulted in the birth of GUImags which turned out to not only help hurting arms, but helped speeding up the design process as a bonus.

The site also has tabs for GUIPanes and GUIBoards, both of which are still underwraps.

Not a recommendation or anything, these just looked fun.

»»» but wait, there’s more reading to do »»»

Firebug is a fantastic tool. It works as an add-on to Firefox and can be used for all sorts of fun stuff. It is a javascript debugger (breakpoints, variables and watch expressions). It can also be used to “inspect” whatever web page you happen to be visiting (hover over areas of the page to see its corresponding HTML and CSS). It’ll even profile the javascript.

The original author, Joe Hewitt, open sourced Firebug sometime last year and back in mid-July, John Resig (a well-known javascript guru and Mozilla employee) announced that he was taking over its development. Today he laid out his initial plans:

• Improve the knowledge of Firebug that we have
• Build a runnable set of test cases to prevent regressions
• Track the state of Firebug performance
• Audit and Improve

I can’t wait to see how Firebug evolves now that Resig has reign.

Don’t like the indentation size of list elements in Firefox? I tried padding and I tried margin-left. After much too long, I realized that I failed to try both.

div.links_list ul
{
	margin-top: -10px;
	margin-bottom: 0px;
	margin-left: 5px;
	padding: 0px;
}

Via Wired, here’s the current draft HTML5, representing “the 5th major revision of the core language of the World Wide Web, HTML“. It was published this past Tuesday (1/22) as their first draft. I don’t know if it’s common to have such language included as part of these documents, but close to the opening one starts to get the distinct feeling that reaching this point in the document’s life was not easily accomplished:

The publication of this document by the W3C as a W3C Working Draft does not imply that all of the participants in the W3C HTML working group endorse the contents of the specification. Indeed, for any section of the specification, one can usually find many members of the working group or of the W3C as a whole who object strongly to the current text, the existence of the section at all, or the idea that the working group should even spend time discussing the concept of that section.

Got it…(awkward)

»»» but wait, there’s more reading to do »»»