I have a couple of these listed on here, however this one is a nice, simple piece of javascript that applies a fade transition between images. Javascript fading slideshow.

I’ve been messing around with video editing recently – it’s something I have never really looked at before as I have never had the power to do it properly, but one of the first barriers I ran into was suitable file formats for importing into iMovie.

I had a few old video’s that I wanted to play with (skiing vids / holidays etc) and I tried to import these into iMovie but I could not get them to work (they were in a variety of formats).

The video’s were a mixture of wmv, avi and other formats but iMovie refused to import them (or it pretended to import the file, which was even more frustrating!).

After much research I ended up using handbrake (which I use to transcode video for playback on my iPhone) and I set up a small file and transcoded it into about 12 different combinations of file type (the container, such as .avi or.mp4) and the codec (the file itself).

In the end I found creating a MP4 format file that is encoded with MPEG-4 using the ffmpeg codec worked a treat and iMovie was able to import the file with no problems.

I found this post (http://perishablepress.com/press/2008/01/22/6-ways-to-customize-wordpress-post-order/) about how to get your wordpress posts sorted alphabetically and thought I would drop it here until I have time to get a fix on my recipe’s website which I created to store some ideas for food and share them amongst friends and family – I really am getting bored with eating the same food over and over again and have too little time to look for new ideas!

Update:

I ended up using this plugin for category post sorting in the end which works a treat up to, at the time of writing, wordpress 2.8.

I have been messing around with z-index recently for styling documents. I have been meaning to use it as a much more efficient way of creating cool backgrounds but it’s always been a bit of a mystery!

It still seems a bit wierd – I don’t think it is supported very well in new browsers (??) the best I could do was to set a div of zero height and width with auto margins and then put the image into this div, giving in a z-index of -1, position absolute (it would only work with absolute) and then use ‘top’ and ‘left’ to position the image underneath the rest of the document. The auto margin div resets the 0,0 point to the top dead centre of the page regardless of width.

So in the document:

<div id="container">
<img src="images/image.jpg" border="0" alt="" />
</div>

And the CSS:

#container {
 position:relative;
    width: 0px;
 height:0px;
 margin:00px auto 0;
 text-align:left;
}
img {
 z-index:-1;
 position:absolute;
 top:50px;
 left:-100px;
}

Which gives me a nice big background logo for the company page that does not interfere with the layout of anything on top of it.

If you want to display a higlighted category to your  visitors so that they know where they are in the site, use the following code, which checks to see if the page is of a certain name, category or if in the case that a single post is being displayed, it checks if one of the categories matches ‘id#’ (the number of the category you want to specify). If any of these is true, the class tag is written into the page.

Add the code into <li> or <a> or <h2> tags that surround the call for the category list or into the hard coded links (which is what I use in my own site).

<?php
if ( is_page(’pagename‘) ) {
echo ‘class=”active”‘;
} elseif ( is_category(’id#‘) ) {
echo ‘class=”active”‘;
} elseif ( in_category(’id#‘) ) {
echo ‘class=”active”‘;
} else {
//
}
?>

Once you have this in place, all you need do is create a corresponding class in your css file to highight the text or image link and voila.

After the last ‘//’ you could have class=”unactive” or whatever name you choose to use in order to style your navigation link to suit your site.

I’m posting this because occasionally I forget.. it’s by far the easiest method that works across all major browsers!

body {
margin:50px 0px; padding:0px;
text-align:center;
}

#Content {
width:500px;
margin:0px auto;
text-align:left;
padding:15px;
border:1px dashed #333;
background-color:#eee;
}

original post

As part of learning how to use wordpress for work (we are switching all our sites to it) I have decided to port all my websites to the wordpress CMS in order to learn a bit more about it – so at the moment everything looks like a revised version of the old site, but as I get to grips with wordpress I should be able to do a lot more than the totally inflexible (yet mostly reliable) bloggger.

Online service and technical reference