Archive for ‘code’ category

Bulletproof Logos

There are a few browsers (Firefox, Opera) that treat image alt text as if it were normal text on the page, when the image isn’t present. If the reader turns images off to save bandwidth, we can still visually treat the images by styling the alt text, and this could be especially handy in regards to site logos.

(more…)

Author Highlighting in MT

I’ve finally implemented author highlighting for the comments here at SimpleBits. Any comment that I add myself gets a slightly different style treatment to set it apart from the rest. I first noticed Dave doing this quite awhile back. Many others followed — and I’ve found it pretty darn useful when I read other sites, being able to quickly scan for the site owner’s remarks.

How is it done? Depending on the system you’re using, there are approximately 34,760 ways to make this happen, and I came up empty when searching for a writeup on how people handle the swap. Here’s how I tackled it.

I started by downloading the Switch plugin for MT. This allows for conditional statements within Movable Type’s templates. I’m sure there are other methods — and feel free to leave your own tips in the comments.

Once the plugin was installed, I just needed a way to insert a class to the <dt> and <dd> elements that I use to structure the author and text for each comment. This class would only exist if the comment was authored by me.

Using the Switch plugin’s syntax I added this to the entry template:


<dt<MTSwitch value="[MTCommentAuthor]">
  <MTSwCase value="Dan Cederholm"> class="dan"</MTSwCase>
</MTSwitch>>

So here, I’m testing for when the author’s value is “Dan Cederholm”. If it is, then it’ll add whatever’s between the <MTSwCase> tags — in this case: class="dan". Notice the space before class — this is important, as for every other case but “Dan Cederholm”, we’ll just have a normal <dt> (or <dd>) element, without extra spaces.

With a class now inserted for my own comments, I could just add specific styles for dt.dan and dd.dan to make them unique.

While I’m using the value of MTCommentAuthor, the plugin will accept any MT tag to match against. You could use an email address, URL, etc. — or I suppose get even more fancy with IP address or other more secure methods. I do realize that, now that I’ve documented this, I’m making it easy for people to pretend to be Dan Cederholm (I’m not sure why one would want to do that), but simplicity is bliss.

Bulletproof Slants

While working on the navigation for a project recently, I had the want/need to do something like this:

example

Nothing ground-breaking or cutting edge here (and certainly not meant to solicit ooohs and ahhhs from the gallery), yet when faced with a little challenge such as the design above, I do my best to make things as bulletproof as possible.

Humor me, while I elaborate.

(more…)

SimpleCode

If you’re like me, than you’re starting to get tired of turning XHTML into entity-encoded markup, suitable for <code> examples. Today I thought I’d whip up a quick Perl script that will take ordinary markup, process it and do all of the turning of < to &lt; and > to &gt; — for you.

It will also recognize double spaces (to nicely format nesting) and turn those into “&#160;&#160;” (it will do the same for four spaces and six spaces as well).

screenshot

SimpleCode intends to make my life easier. It’s essentially in beta and took only an hour to put together — in fact I’ll bet there’s something out there that already exists and I just didn’t think to look earlier. I’m sure it’s missing some features, and that’s where you come in. It’ll come in handy for the SimpleQuiz examples — and I’d venture to say it would help for those commenting as well.

Feel free to use it — and grab the source code to put on your own server. It’s a single, self-contained file that just needs to be dropped in your cgi-bin. Set permissions to 755 and you’re good to go.

Update: Jesper has created a neat and tidy JavaScript version, and also helped me simplify a bit of the Perl source as well. v02 (and v03) already!

SimpleViewer

I’ve had quite a few requests for the slideshow and image viewer Perl script that I wrote for this site, so I finally cleaned it up a bit, gave it a great name (SimpleViewer, of course) and posted the file to the software page for anyone that’s interested.
There are certainly other scripts out there that do way more than this one and are written far better, but it’s done the trick for me for a long time and it was fun to build. Hopefully it’s pretty straightforward to set up and those that were asking can make good use of it.

CSS Photo Zoom

After reading Pixy’s clever Fast rollovers, no preload needed method for using a single background image for multiple hover states, it got me thinking. What if the concept was used to offer a zoomed view of a thumbnail image, right inline on the page, again using a single image?
Here’s the example, where I’ve created a single JPG image that contains both the thumbnail and zoomed photo below it. I then use Pixy’s idea of changing the background-position as well as the width and height for the :hover state to hide the thumbnail, but reveal the larger zoomed photo.
I’m not entirely sure that this is even a practical application of the concept — but it seems like it could work pretty well in certain circumstances, so I thought I’d throw the idea out there.
What to do with un-styled viewers? I thought that making a “View image” link that points directly to the thumbnail/zoomed photo would be acceptable, then hiding the link text with recently discovered text-indent: -1000em; trick. I’m sure there are other, more elegant things to do with a non-styled view, but this seemed the easiest, without creating an additional separate image.
I’ve only tested this on Mac: Camino, IE5.2 and Safari.

Mini-Tab Shapes

And you thought that there was nothing more to be said about CSS tabs… In exploring navigation ideas for a new project, I wanted a mini-tab effect, but something different than the default, border-bottom that the method utilizes.

See the codeThe nice thing about the original mini-tabs is that the border will always be the exact width of the text above it — but you are stuck with a square tab. I started thinking of ways that I could simplistically style the tab portion differently. So I came up with Mini-Tab Shapes. Each style uses a single, small GIF for hovering and active tabs. The answer to my width dillemma (the fact that the width would change depending on the length of the word) was to make the tab image small enough and then center it using:

background: url(tab_rounded.gif) no-repeat bottom center;

Now, if your navigation only contains a few items, you could easily create the tab graphics to fit the entire width of the word — however if you’d like the text to be resizable, the effect would break. The possibilities for shapes go far beyond the four examples, and I’m sure would work well in a vertical list as well. Update: They do.

Tested in Mac: Safari, Camino, IE5; PC: IE5.0, IE5.5, IE6, Opera7