archive for June, 2006

List Authors Widget 1.0

mikesmullin — Wed, 21 Jun 2006 16:02:09 -0600

Display a list of authors in your WordPress Sidebar Widgets linking to the authors.php page.

Demo:

See ConnectBlogs.com.

Features:

Optionally exclude Administrator account from the list.
Use either full names or login names in the list.
Optionally hide Authors without any posts.
Works in current versions of all browsers.

Recommendations:

If you're metablogging or hosting a blog network, this is a must!

Requirements:

WordPress Sidebar Widgets plugin by Automattic

License:

No license; just trying to help out the WordPress community. Feel free to implement whenever you like. All I ask is that you leave a comment/trackback here so others can see your implementation.

Download:

Version 1.0: list-authors-1.0.zip
Tested with WordPress 2.0.2 and 2.0.3

Plugin Installation:

Unzip/upload to /plugins directory.
Activate via WordPress Plugins tab.

Removing the Dotted Outline from Focused Links

mikesmullin — Fri, 16 Jun 2006 19:23:37 -0600

Have you ever noticed the dotted outline that appears around links as you click on them? That is an accessibility feature for people who can't use the mouse for whatever reason. It is supposed to show where the current focus is when you use the TAB key to move through a document, and does a fantastic job.

But why does it appear when you are using the mouse to click on a link?

This naturally subtle visual cue has become a convention across all browsers, gently reassuring the user when they have successfully clicked on a link. Without it, users will try again to click a link thinking they missed it—and if the server isn't immediately responsive they assume the browser is frozen and contemplate closing it.

But for a designer this happens to be particularly annoying on image links, when the dotted focus remains even after you have clicked the link and moved your mouse away from it.

While I am an advocate of using JavaScript to remove the dotted focus from links onMouseDown or onMouseOut, but I would not recommend removing the dotted focus entirely. You still need it to be there when people are using the keyboard.

Remember: This is an accessibility feature, and people who can't use the mouse for whatever reason depend on it. You know, people who eat and surf the web, like me.

Enough banter, show me the code:

<script type="text/javascript">//<!--
var runOnLoad = new Array(); // for queuing multiple onLoad event functions
window.onload = function() { for(var i=0; i<runOnLoad.length; i++) runOnLoad[i]() }
// hide dotted :focus outlines when mouse is used
// but NOT when tab key is used
if(document.getElementsByTagName)
for(var i in a = document.getElementsByTagName('A')) {
  a[i].onmousedown = function() {
    this.blur(); // most browsers
    this.hideFocus = true; // ie
    this.style.outline = 'none'; // mozilla
  }
  a[i].onmouseout = a[i].onmouseup = function() {
    this.blur(); // most browsers
    this.hideFocus = false; // ie
    this.style.outline = null; // mozilla
  }
}
//--></script>

Alternatively, you could remove the dotted outline entirely in favor of a different visual cue. Maybe even one that matches your design. I've experimented with color, backgroundColor, and font-size and they were all pretty cool.

Rate-in-Place 1.0

mikesmullin — Tue, 06 Jun 2006 00:58:56 -0600

Now you can not only display a rating for each one of the Links in your Blogroll, but you can update the rating right from the front page (logged-in with editing privledges, of course) with AJAX!

Current Version:

Rate-in-Place, Version 1.0
Designed for WordPress 2.0.3

Demo:

I install most of the plugins I create on my own blog. In this case, you can see the rating below each link in my blogroll, but you'd have to be an admin to see rating it in action!

Features:

rate links without refreshing or leaving the page
works in current versions of Firefox, Internet Explorer, Opera, Netscape, and Safari.

Recommendations:

perfectly compliments the feedwordpress feed aggregator plugin.

License:

No license; just trying to help out the WordPress community. Feel free to implement for smooth AJAX link rating functionality via Prototype whenever you like. All I ask is that you leave a comment/trackback here so others can see your implementation.

Download:

.ZIP package: rate-in-place-1.0.zip

Plugin Installation:

Unzip/upload to /plugins directory.
Activate via WordPress Plugins tab.
open /wp-includes/links.php and insert the following code at line 255: if ($show_rating) $output .= rip_link_rating($row->link_ID, $row->link_rating);
in the same file, on line 194, change this code: $sql = "SELECT link_url, link_name, link_image, link_target, link_description, link_rating, link_rel $length $recently_updated_test $get_updated FROM $wpdb->links WHERE link_visible = 'Y' " . $category_query; to this: $sql = "SELECT link_ID, link_url, link_name, link_image, link_target, link_description, link_rating, link_rel $length $recently_updated_test $get_updated FROM $wpdb->links WHERE link_visible = 'Y' " . $category_query;
OPTIONAL: Each of your Link Categories have a setting whether to Show Rating or not, which can be modified from inside the WordPress Links > Link Categories tab. This is checked by default so most of the time you won't have to worry about it.

Prototype Installation:

Download/unzip/upload the latest version of Script.aculo.us (currently 1.6.1) to /wp-includes/js/scriptaculous
make sure prototype.js (comes with Script.aculo.us) is in there, as well.
Include prototype.js in your theme's header.php, like so: <script type="text/javascript" src="/wp-includes/js/scriptaculous/prototype.js"></script>

Achilles’ Heel of Tabless CSS Design

mikesmullin — Thu, 01 Jun 2006 05:03:05 -0600

By now most people have noticed the Achilles' Heel of tabless CSS design is currently the inability to align footers to the bottom of the window. (eg. always at the very bottom until content actually overflows)

Currently you can only achieve this effect in all browsers with *gasp* tables—but it's different now in XHTML 1.0 Strict than it was in HTML 4.01 Traditional.

For some CSS purists, that fact is an acrid pill to swallow. I tend to agree with Eric Meyer though—don’t try to map table design mental models onto CSS—it’s a recipe for heartache; practicality over purism.

In my case--designing a WordPress template--I used the THEAD, TBODY, and TFOOT tags to distinguish between the blog's template header, content, and footer. Like so:


<table cellspacing="0"><thead><tr><td>
  <h1><a><img /></a></h1>
</td></tr></thead>
<tbody><tr><td>
  <div id="content"></div>
  <div id="sidebar"></div>
</td></tr></tbody>
<tfoot><tr><td>
  <p>Powered by WordPress.</p>
</td></tr></tfoot>
</table>

Then I used CSS to get the table to fill the full height of the window. Like so:


html, body, table, thead, tbody, tfoot, tr, td, h1, img {
  margin:0;padding:0;border:0
}
html, body, table { width:100%;height:100% }
thead td, tfoot td { height:1px }
td { vertical-align:top }

Remember: This solution is Section 508 Accessible, Well-Formed, and Valid XHTML 1.0 Strict markup.

Not too bad once you understand it.