Today, Alexis Ohanian and I released a new project: WTF CNN. We created the site to make it easy to compare CNN’s US front page with news sources from other countries. If you like what you see, pass it on, and check back the next time a big story emerges!

For the nerds: the site uses jQuery for the animations. It also uses a lot of modern CSS3 styling with Modernizr styles to ensure that things play nice in IE. This was my first time playing with Modernizr, and I’m super impressed by its simple approach to feature detection.

However, one thing I’ve never understood is the decision to use an anchor element to cancel an open reply box. I’m far more accustomed to the reddit style of placing a cancel button next to the submit button, like this:

The problem with the anchor element generated by Wordpress is that it looks really out of place when arranged next to the “submit comment” button. I had hoped there would be a parameter to change the anchor element into a button, but was disappointed to find that this particular HTML is hardcoded into the get_cancel_comment_reply_link() function.

However, the function does provide a filter hook, which I’ve used to make the change I desired. I simply intercept the HTML and return my own version with a button. It’s not very elegant, but it works.

If you’d like to use this hack, just add the following code to your theme’s functions.php file:

/**
 * Use an HTML button element for the cancel comment reply link.
 */
function cancel_comment_reply_button($html, $link, $text) {
    $style = isset($_GET['replytocom']) ? '' : ' style="display:none;"';
    $button = '<button id="cancel-comment-reply-link"' . $style . '>';
    return $button . $text . '</button>';
}
 
add_action('cancel_comment_reply_link',
           'cancel_comment_reply_button', 10, 3);

The saidit script enhances reddit comment pages by highlighting unread comments. It works by keeping track of the comments you’ve already viewed. Here’s what it looks like:

Features

• Highlights unread reddit comments
• Read comments are stored locally
• Automatic removal of old data
• Efficient implementation

Installation

If you’d like to give it a spin, make sure you have Greasemonkey installed. Then, just install saidit from userscripts.org. Have fun!

How it works

For every comment viewed on reddit, saidit records the comment id in a “seen comments list” using DOM Storage. When a reddit comments page is loaded, saidit scans through each comment and checks if the id is in the list. If the id is not found, the class “unread”, is added to the comment div (this class can then be styled to emphasize unread comments). The seen comments list is then updated to include the new comments.

Since the script scans through hundreds of comments during the time-sensitive page loading process, I needed to make checking comment ids as fast as possible. Experimentation showed that if the seen comment ids were loaded into the fields of an Object, looking up ids was much faster than using an Array. Currently, saidit takes up to 2.5 seconds on the largest comment pages (200+) on my machine. I’m continuing to look into ways of making it faster.

Interoperability

An interesting side-effect of using DOM Storage is that read comment data is accessible to JavaScript on reddit and any other user scripts. If you can think of any clever ways to use this data, feel free to load it using the loading code below, or simply fork saidit to create a new script. Please use your new powers for good, not evil!

Here’s what the data loading code looks like, using Mozilla’s non-standard implementation of DOM Storage:

var redditStorage = globalStorage.namedItem("www.reddit.com");
var pageThingID = getThingID(getPageThing());
var seenArray = [];
var seenObject = {};
 
var seenData = redditStorage.getItem("seen-"+pageThingID);
seenArray = seenData.value.split(",");
 
// Build an object for faster access
seenArray.forEach(function(element) {
  seenObject[element] = true;
});

The “unread” class can be styled in subreddit CSS to achieve different effects. Just use a CSS rule similar to the default (perhaps with !important added):

.comment.unread .tagline {
  font-weight: bold;
  background-color: #fea;
  display: inline;
}

If you discover any interesting ways to use these, please leave a comment!

This morning, I bit the bullet and finally took a look at my site in IE6. A few minutes later, after fruitlessly experimenting with compatibility scripts, I decided to formally drop IE6 support for this site. I’ve long felt that it’s a waste of effort to cater to browsers that don’t meet developers halfway, so I’ve typically put minimal effort into designing my pages around them. I’ve also felt that the best way to finally stab the stake into IE6’s heart is to simply let pages look bad and out of date in it. I’m pleased to see that this practice is finally gaining critical mass.

Thus, I set out to find some JavaScript glue to formally explain my intentions to visitors. After surveying the options, some of which were a bit too preachy, and others a bit too mild, I decided to write my own little IE6 handler script.

My script, IE6unstyled.js, adds the header seen at the top of this post. The page is then displayed unstyled (based on David Dorward’s bookmarklet), which works well if your page degrades gracefully. Rather than allow IE6 to mangle the page layout, I choose to simply give it the raw content. This frees me from worrying about the presentation in IE6 and restores the layout to a basic, usable state. I feel that this projects the right message: to experience the current web to its fullest, you’d best switch from using IE6.

Here’s the script.

window.onload = function() {
	for(i=0;i<document .styleSheets.length;i++) {
		document.styleSheets.item(i).disabled=true;
	}
	el = document.getElementsByTagName('*');
	for ( i=0; i<el.length; i++) {
		el[i].style.cssText = '';
	}
 
	div = document.createElement('div');
	div.innerHTML = '<h1 style="font-size:18pt;">Note: a version of Internet Explorer of 6 or lower has been detected.<p>Your browser cannot display this page properly. For compatibility, this page has been reduced to a low-graphics mode. To view this site the way it was intended, please upgrade Internet Explorer or <a href="http://browsehappy.com/browsers/">switch to another browser</a>.</p>';
	div.style.cssText = 'color:black; background-color:yellow; border:5px solid black; padding:15px;';
	document.body.insertBefore(div, document.body.firstChild);
};

To use it, stash the file somewhere on your server. Then, add the following HTML to your header (edited to reflect the file location).

<!--[if lte IE 6]>
	<script src="path/to/IE6unstyled.js" type="text/javascript"></script>
<![endif]-->

Please feel free use this and make any modifications as you see fit.

Intro

I first saw this effect on a deviantART profile page following their “v6″ redesign. Each profile has a long box of links to areas of interest regarding the profile owner. The box is clipped and fades to transparency in its default state. When hovered over, the box expands to its full height, and the fade disappears.

Honestly, I’m not crazy about the particular usage by deviantART. I think it obscures important links in a way that isn’t obvious to new users (most on-hover features are plagued by this disadvantage). However, the technique is useful whenever there is a long stream of continuous content that won’t be missed by your readers. For instance, I developed the trick behind this technique styling the “elsewhere” listing (by Lifestream) on the sidebar of this blog.

First steps: the fade gradient

The example I will present involves two divs adjacent in the markup: a faded element and an overlayed fade element. This was a constraint in my styled markup, though with a little tinkering, it could also work for an overlay element inside a container element.

Consider the following HTML markup:

<div class="faded">
  <a href="#">How to make</a>
  <a href="#">an element fade away</a>
  <a href="#">to transparency</a>
  <a href="#">using CSS</a>
</div>
<div class="fade"></div>

With today’s CSS, I know of no standard way to mask the opacity of an element’s content with an image. Because of this, we’ll have to settle for merely the illusion of doing so. To produce the fade effect, we’ll give the faded element a solid background color and style the overlayed fade element with a gradient image from 0% opacity at the top to the background color at the bottom (here’s an example).

This way, any content within the faded element will transition to the background color, giving the illusion that it is fading away (while it is actually being obscured):

.faded {
  background-color: #555;
}
 
.fade {
  height: 100px;
  background: url(/wordpress/wp-content/uploads/2008/12/fade.png) repeat-x;
}

To position the fade on top of the faded content, I used a negative top margin. Since the height of my gradient is 100px, I displaced it upwards 100 pixels so that the bottom would be at the base of the target faded element.

.fade { margin-top: -100px; }

Finally, to superimpose the fade element over the faded element, we’ll set a z-index value greater than 0. Since z-index only applies to positioned elements, we’ll need to also set both elements to have relative positioning.

.faded {
  position: relative;
}
 
.fade {
  position: relative;
  z-index: 10;
}

With these styles in place, we achieve a result that’s perfect visually:

Alas, the moment you try to click one of the links, you’ll realize that the fade element is obscuring the element below both visually and in terms of functionality. If you wanted to put clickable elements under the fade at this point, you’d be out of luck.

Making links clickable

A simple solution to this problem is to use CSS to remove the fade element when the mouse pointer is above it. We can achieve this by using the :hover pseudo-class to give the fade a negative z-index when it is hovered over, placing it underneath the faded element.

.fade:hover { z-index: -10; }

Unfortunately, there’s a problem with this proposal. If you’ve ever worked with selectors using the :hover pseudo-class, you may have encountered the flicker. As an illustrating example, try hovering your mouse pointer over this:

The problem is that the instant the fade element falls beneath the faded element, it is no longer being hovered over by the pointer. It then switches back to its normal style, placing it over the faded element, where it is once again being hovered over. This creates an infinite loop: the browser rapidly switches between the :hover and non-:hover styles for the fade element.

A solution

Fortunately, there is a simple trick to stop the flicker and make this technique work. Ironically, the trick came to me as a direct result of my horrific abuse of :hover pseudo-classes in the hurts_my_eyes subreddit. The key is to ensure that the fade element cannot return to being above the faded element when it loses :hover status.

To break the flicker cycle, we’ll give the faded element z-index of 20 when it is hovered over:

.faded:hover { z-index: 20; }

Like before, when the fade element is hovered over, it gets z-index: -10 and drops below, leaving the faded element hovered over. With this new rule since the faded element is hovered, it assumes a z-index of 20. Next, since the fade element is no longer hovered, it returns to its normal z-index of 10. Because the faded element now has higher z-index, and will as long as it is hovered over, no flicker cycle is created. The fade is effectively hidden until the mouse pointer leaves the area. Since the fade is displaced, links and other children of the faded element will be clickable.

Here’s an example employing this new rule, identical to the one at the top of this post.

Conclusion

When dealing with the :hover pseudo-class, the straightforward way to style a behavior can sometimes introduce flicker. This happens when the :hover style results in the element no longer being hovered upon, creating an infinite loop. The trick to resolving the flicker is to find a way to break the cycle, ensuring that the element with :hover styling will not be hovered over twice. In the case of this howto, the addition of a single CSS rule made all the difference.

The core of the z-index trick is an interesting two-step process where the :hover style of the fade element on top triggers the :hover style of the faded element underneath. Utilizing this second :hover was the key to breaking the cycle. This technique enables us to complete the effect we were after using only simple CSS.