wheresrhys

A very short post to announce my third  jQuery plugin: listSplitter, which takes a long list of categorised items (where the categories can overlap) and creates a tabbed interface to show only one category at once. I haven’t done a demo yet (well, I have, buthaving teh same old problem transferring to the server as the server runs on UNIX while my laptop is Windows. I recently found out why this causes a problem, but no easy fix has presented itself) so you’ll just half to take my word for it, though before too many months have gone by I will use it as the basis for a new portfolio.

*edit: Here is a demo

And it can be used with jQuery themeroller, i.e. use the tool at jqueryui.com/themeroller, to design how it shoudl look, then after clicking “download theme” make sure you have ‘tabs’ ticked underneath widgets.

The other day I neglected to mention how I had resolved the list/table dilemma on the site I’d been working on.

As I explained, the content fitted the semantics of a table more than that of a list, but Internet Explorer’s bugs in applying positioning to <tr> tags (up to and including ie8) prevented me from using a table to implement the design.

Or did it.

In the end I had two choices of mark-up for each item in the list:

<ul>
  <li><h3><a title="Blue Reef Resort" href="duikhotel/Egypte/
... marsa_alam/Blue_Reef_Resort">Blue Reef Resort</a>
</h3>
     <ul>
        <li>All inclusive</li>
        <li>8, 15 dagen</li>
        <li>Marsa Alam</li>
        ...
     </ul>
  </li>
</ul>

or

<tr>
  <th colspan="3" scope="row">
    <a title="Blue Reef Resort" href="duikhotel/Egypte/
... marsa_alam/Blue_Reef_Resort">Blue Reef Resort</a>
  </th>
  <td class="rating">
     <img alt="4 stars" src="/img/star4.png"/>
  </td>
</tr>
<tr>
  <td>All Inclusive</td>
  <td>8, 15 dagen</td>
  <td class="location">Marsa Alam</td>
  <td class="price">vanaf €399</td>
</tr>

The second example, combined with appropriate column headings, I figured gave the closest approximation to the real table structure of the content. And the presence of a <th> every other row does suggest that rows are to be taken in pairs (though I’m not sure this is any help to screen reader users).

The above means, I think, that I am closer to web design zen. I have rejected the false grail of table based design, and only now that I have mastered CSS and semantic structure can I claim to understand the table and start to mold it to my enlightened purposes.

As well as web development I also play guitar for a living in a two piece irish band. As well as a few regular and irregular gigs in pubs and cafes we play a lot on the street. If you want to understand world politics try busking; it’s world of bullying capoeira gangs and nervous conservatoire students is as great a microcosm of power struggles and injustices as you could get.

But I digress.

The crime that has no name of the title of this post is the act of videoing a busker/street performer, but not putting any money in. (You know who you are. You can tell when you’re one of them because nobody likes you). Walking past and dancing a bit and not putting any money in is borderline cheeky, but taping it for extended enjoyment and not thinking it’s worth paying for is beyond belief. I can just imagine them sharing the holiday videos with bored relatives, and when they get to the musical highlight the proud projectionist delivers the voice-over: “Oh yes – these guys were great. Really enjoyed them. I would’ve given them some money but, you know my policy: When it’s at all possible to be a bastard… Be a bastard!”

Well, the next one of you who comes along, I’m giving you the finger.

Let’s see how that looks on your family holiday video.

And yes – that is a picture of an amoeba.

I really think I’ve hit the nail on its head when it come to captioning pictures. I really do.

It always bugged me that there wasn’t a really semantic way to caption a picture, despite it being a very common use of words both on the internet and off (for instance, I caption everything I see by talking about it VERY LOUDLY), and this all came to a head yesterday on stackoverflow.com.

And I hit upon the perfect semantic way of doing it. The picture on the right is a working example. The caption is actually a heading – a h5 in this case – above the image in the markup, but a combination of padding and positioning has put it beneath the picture.

Semantically if you put a heading above a paragraph/section then the heading should tell you what’s in that paragraphsection. Surely the same extends to images too. So my markup literally means “The following picture is a picture of a man looking like santa hammering in a nail”.

So here’s the bare bones code, though you’d obviously want to use classes and wotnot:

<div style="position:relative;padding-bottom:50px">
<h5 style="position: absolute; bottom: 0pt; left: 0pt;
           height: 40px; line-height: 14px; font-size: 12px;">Caption</h5>
<img src="..."></div>

Vive la moderate improvement in accessibility.

Finally, I realised today that because of web standards, my job will get easier with time – another 2 years and I won’t have to take ie6 into account… a few more after that and ie7 will be gone… and from ie8 it will be plain sailing. So the job will be easier, but much less fun.

I’ve just spent a  little time adding some useful sounding plug-ins (initially prompted by wanting an effective backlinking plug-in), one of which was the Wordpress Automatic Upgrade plug-in. So, with that installed I finally got around to upgrading wordpress and, to both my delight and dismay, wordpress has changed its admin screens layout since the last version I had (2.3 I think). It’s a much better design, but it does break toolbarize. In fact, it renders it unneccessary as the layout is much more user friendly and screen-space efficient, with scrolling not being no nearly so disruptive to the postying process.

However, it has inspired me to write a plug-in which makes perfect use of screen space by hiding things I very rarely use… or putting them in the footer. I could even make it so users can customise which screen elements are hidden.

Well – here it is. As promised earlier, my first ever software release into the open source world is an adaption of Eric Meyer’s MW adminize plug-in to give the wordpress admin interface a fixed toolbar along the top of the screen and so that the publish post box is always visible on the right. Scrolling up while posting to your blog can finally be consigned to the past.

The plug-in works on all modern browsers, (Safari, Opera, Firefox, Internet Explorer 7, and almost certainly all others with good CSS support). It will however leave everything unchanged in ie6 as it has poor support for position:fixed.

Here is the download: toolbarize.zip.

Simply unzip it into your plugins folder – no additional setup required.

Visually, I’d like to rehash how the publish box appears – it doesn’t sit well either where it is now or lower down, so a redesign may be in order. Also, I need to work out how to add some javascript to better resize the upload media screen (at present the close button is hidden, but you can just click off the screen to make it disappear.

Please let me know if you have any suggested improvements

Further to my post about the usefulness of position:fixed, in particular with regard to the .submitbox in the wordpress admin interface, I’ve continued to refine it all.

I came across Eric Meyer’s MW Adminize Wordpress plugin (via the latest Sitepoint list of useful CSS links). Essentially what it does is compress the navigation and header of the admin screens into a smaller area by including an extra stylesheet.

“Hang on, ” think I. “Now that looks pretty much like a toolbar – why not use position:fixed on it”. Which is what I’ve done, and the effect is most satisfactory. There’s was a bit of ironing out to do as various page elements (which presumably have position: relative/absolute) overlaid it, but z-index:2000; soon sorted that out.

At present I’ve had to edit not just Eric Meyer’s CSS file, but also a couple of the php pages in order to insert a div with id=”toolbar”, but in a future iteration I will painstakingly go through each page element that needs position fixed and then remove the containing div, thus making it a candidate to be a branch of the original plug-in.

Watch this space.

I always found it annoying when websites got an element (normally an advert) to stay on the screen even when you scrolled up and down athe page. But recently, with the advent of web applications, position:fixed could start to be more commonly used. Facebook’s messaging/notifications bar is the best (and only, if I’m honest) example I can think of; it’s discreet and contains features that it’s quite resaonable to expect you will always want to have to hand.

Along similar lines, I’ve edited my worpress template. Adding .submitbox{position:fixed;top:100px;} to your wp-admin.css means you never have to scroll around to publish a post.

I can make a ball bounce up and down in flash, and that’s about it. And my javascript is rapidly improving, but still leaves a lot to be desired, but simple animation effects using flash or javascript can really enhance a design.

For example, one of my favourite site-designs, http://www.futurelab.org.uk/ (I love the classy, formal look, aimed at senior teachers, but also with splashes of colour and animation to suggest innovation and fun), uses flash to create a subtle bouncing navigation effect.

So what’s a boy to do?

A week or so ago Sitepoint published a cute little tutorial on how to make surprising animations react to browser resizing… and the magic of it was that it only used a gif and a jpeg to achieve this. Inspired by this, I decided to make the futurelab navigation using just animated gifs, and the results are pretty good I reckon. And it only needs a couple of 1 pixel wide gifs per navigation item – less than 1kb in total. (I also only learned how to make animated gifs in photoshop this afternoon, using this tutorial).

A note of caution: my navigation items are all the same colour, so you’d think I could use the same gifs for each item… but not so. Something to do with how firefox renders animated gifs means it doesn’t animate the hover-off image if it’s used on another navigation item too. The solution is simple: make a few copies of the hover-off gif with different names.

Based on a design developed by snook.ca (a great web design site), which creates a 2-column layout with the page elements in a sensible, semantic order in the source, I’ve come up with this variant, which is pretty much the same, but allows for more flexibility in header design. Seems to work ok in safari, firefox and ie all the way back to v5.01. See it in action.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Untitled Page</title>
<html>
<title>Efficient 2 column layout</title>

<style>

.wrapper {width:600px; height: 50em;background:lime;position:relative;}
.main {width:500px; float:right;height: 40em;background:red;}
.header{width:600px;position:absolute;height:5em;background:teal;top:0; left:0;}
.content {width:500px;height:40em;background:green;position:absolute; top:5em;}
.nav {width:100px; float:left; height: 40em; background:black; margin-top:5em;}
.footer {width:600px; clear:both;height:5em;background:cyan;}
</style>
</head>
<body>
<div class="wrapper">
	<div class="main">
		<div class="header">
		</div>
		<div class="content">
		</div>
	</div>
	<div class="nav">
	</div>
	<div class="footer">
	</div>
</div>

</body>
</html>