Neatly Sliced

It takes ten minutes or less.

This blog still uses WordPress version 2.0.2.

2.0.2. The current version is 2.1.2. I am a whole number behind.

Here’s the deal: I’m installing the latest version soon. I thought I was content with v2.0.2. However, I have been using 2.1 (not 2.1.2) on a different installation/site, and it is magnificent by leaps and bounds over 2.0.2. Ack, I exclaim, for this current server I am sure will give me much woe in my attempts to upgrade. Equally frustrating, this version of WordPress does not have an easy way to export (unlike 2.1), so I fear wreck and ruin. Yes, wreck and ruin, to the woe of my 12 readers.

On a lighter note, GoDaddy lets you click-click-click a couple times and WordPress is automagically installed. It is a wonderful thing.

I almost started writing a post explaining about list-style-type. Then, I oddly discovered that Safari does not support the very list-style-type that I was highlighting: decimal-leading-zero. Upon this discovery, I wondered what other list-style-types Safari does not support.

I thus happened upon quirksmode. It features beautiful charts comparing the different CSS properties, selectors, and values and their support in various browsers. It is quite comprehensive. I am bookmarking it to make it a constant reference.

I was admiring the CSS for the section headings on BuzzFeed, although I do not necessarily love the content of the site (no offense, just not my thing).
View it in action.

The method to overlay the captions is alarmingly simple. Essentially, the image and caption are contained in a div, and corresponding classes are applied to the nested elements. The caption has styling featuring a negative margin-top to pull the caption up, thus making an overlay. BuzzFeed overkills the divs and puts the caption and image in their own subsequent nested divs when they could merely apply classes to the corresponding < a > tags. I will explain my modified method.

The HTML:

PLAIN TEXT
HTML:




<div class="image-unit">


   <a class="image" href="#">


      <img width="125" height="127" alt="Yum!" src="http://blog.neatlysliced.com/orangeslice.jpg" />


   </a>


   <a class="num-links" href="#">9 Links</a>


</div> 

The CSS:

(I'll comment explanations on pertinent lines)

.image-unit is your block that contains both the image and the caption.

The .image class is applied to the link that wraps around the image.

a.num-links refers to the link that contains the caption overlay. The link should match whatever link the image has, so that the whole block functions as one linking entity.

A cool-looking effect that it not very difficult to pull off. I often wish that more designers knew the capabilities of CSS so that they could incorporate these cool, simple effects in their designs.

View it in action.

If you notice any errors, amendments, or improvements, please leave a comment for the betterment of web development.

Utom Box created the most beautiful Web 2.0 icons. I have implemented a few of them in this site. There is currently no Digg icon, but one of the icons provided by Digg looks Web 2.0 enough to match.

I also started using FeedBurner for my RSS feed. I was confused regarding FeedBurner before. I had thought that it was automagically creating its own feed. In reality, FeedBurner takes the feed that your blog already generates and processes it all fancylike. For example, with FeedBurner I have added the feature to "Email This", "Save to del.icio.us", or "Digg This" right in the RSS feed itself. Additionally, I can derive other statistics regarding the feed. As the user, you receive no significant additional benefit other than the "Email This" and bookmarking links.

One day I will change .htaccess so that the old feed automatically rewrites to the FeedBurner feed, per the instructions in this "Using FeedBurner" WP post. In the meantime, update the feed at your discretion - it makes little difference to me.

I'm not being arrogant, but I'm great at XHTML and CSS. What I'm not great at is the visual design.

I want to redo my site, but I need a designer to make the look and feel of my site. Then I can code it.

Don't get me wrong, I love my watermelon layout. I just want something that I made from scratch and not something I pulled from the WordPress theme machine and had to go in and fix to make the CSS valid.

So, all you designers-but-not-coders out there, if you're looking for a bit of pro bono or portfolio building work, I need your help! Let's work together and make something beautiful.

Courtesy of Daniel Nolan, I found this handy little rollover JS to add rollovers for all your images. It is standards compliant and will not invalidate your HTML. It also majorly cuts down on the bulkiness of your HTML, eliminating the inline JS that is so common on sites nowadays for image rollovers.

Why not just use pure CSS?

CSS allows use of the :hover pseudo-class to swap images. This eliminates nasty inline javascript nonsense to accomplish the same thing and even works with JavaScript disabled. Why not use this method?

I asked myself the same question. There are two answers:

1. Safari does not support image replacement on form elements. Thus, the solution would only work some of the time.
2. IE6 only supports :hover on anchor tags. "Who cares?" you ask. Well, clients who pay money for their sites to work for the largest audience possible care. And, people who don't upgrade their machines care. So, anyone with IE6 would lose the image rollover. Isn't that sad? Especially when you can include them so simply?

How to use it

1. Have a consistent naming convention for your image (and its rollover)

   For example, name your image myimage.jpg, and your rollover myimage_o.jpg. The JS function handles the rest. It even handles the image preloads. Isn't that nice?

2. Add the class "imgover" to the image which you would like the rollover applied.
3. Include the rollover.js file in your site template. If you have a whole bunch of functions executing on the window.onload, delete that line from the bottom of rollover.js and add initRollovers(); to your preload function.

I made a minor addition to include inputs of type "image", as it was hugely cumbersome to me on a site that already had these implemented. My addition is copied below:

var aInputs = document.getElementsByTagName('input');

for (var i = 0; i < aInputs.length; i++){
if(aInputs[i].className == 'imgover'){
if(aInputs[i].getAttribute('type') == 'image'){
var src = aInputs[i].getAttribute('src');
var ftype = src.substring(src.lastIndexOf('.'), src.length);
var hsrc = src.replace(ftype, '-over'+ftype);

aInputs[i].setAttribute('hsrc', hsrc);

aPreLoad[i] = new Image();
aPreLoad[i].src = hsrc;

aInputs[i].onmouseover = function() {
sTempSrc = this.getAttribute('src');
this.setAttribute('src', this.getAttribute('hsrc'));
}

aInputs[i].onmouseout = function() {
if (!sTempSrc) sTempSrc = this.getAttribute('src').replace('-over'+ftype, ftype);
this.setAttribute('src', sTempSrc);
}

}
}
}