Yes, I know that this appears to be the default WordPress theme. That’s because it is.
I am sick of the old design and need some sort of motivation to start over, so this is it. Stay tuned for a redesign, but don’t expect it any time soon!
Float Left
Blimey, I have finally launched a brand new project — Float Left, a teeny tiny web design studio.
I’d love it if you felt like heading over and taking a look and I have written a little bit of an introduction to the site and what I hope to achieve.
Posted in Uncategorized
Leave a comment
IE6 Double Margin: A Simple jQuery Fix
Among the many small irritations we have to contend with when developing a website for IE6 is the so called double margin bug.This bug causes floated elements to render with a double left margin. The bug is described here, and a solution here. Essentially the element must be forced to a state known as “has layout”.
The Original Solution
The solution recommended is as follows:
The work around for this bug is preposterously simple, counter-intuitive and utterly in violation of the W3C recommendations—simply change the style of the floated element to “display: inline” and the problem disappears.
So do this–
<div class="box"> <div class="sidebar" style="display: inline">content </div> content </div>
A slightly cleaner way to achieve this is to create a separate ie.css stylesheet, and add a declaration looking something like this:
.myclass1, .myclass2 {display:inline;}Cleaner still would be to enclose this ie.css stylesheet in a conditional comment so that it is only served to IE6:
<!--[if lte IE 7]>
<link rel="stylesheet" href="ie.css" type="text/css" media="screen" />
<![endif]-->We can now add all of the elements which exhibit this behaviour to the CSS declaration, safe in the knowledge that it will only be seen by IE versions 6 and below.
A Simpler Way
This solution is good, but it does leave us with the problem of having to maintain a long list of id and class names in the ie.css file. A more straightforward way to deal with the issue would be to write a rule stating that all floated elements should also have display:inline; applied. Unfortunately this is not possible in CSS, but we can use a little JavaScript and RegEx trickery to achieve the same thing.
-
This example uses the excellent and extremely easy to use jQuery JavaScript library, so the first step is to link to it in your page’s
<head>element:<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>Note: I am linking to the Google hosted version of the library, you may prefer to host your own copy and link to that.
-
Next we will create a separate
ie.jsfile, and link to that in the<head>section of the page:<!--[if lte IE 7]> <script src="ie.js" type="text/javascript"></script> <![endif]-->Be sure to place this after the link to the core jQuery library.
-
Into the
ie.jsfile, we will add the following:// Initialise jQuery Regex... jQuery.expr[':'].regex = function(elem, index, match) { var matchParams = match[3].split(','), validLabels = /^(data|css):/, attr = { method: matchParams[0].match(validLabels) ? matchParams[0].split(':')[0] : 'attr', property: matchParams.shift().replace(validLabels,'') }, regexFlags = 'ig', regex = new RegExp(matchParams.join('').replace(/^\s+|\s+$/g,''), regexFlags); return regex.test(jQuery(elem)[attr.method](attr.property)); } // ...and use it to overcome the 'double margin' bug. Add display:inline to all floated elements function double_margin() { $(':regex(css:float, left|right)').css('display', 'inline'); } // Let's go! $(document).ready(function() { double_margin(); });What we are doing here is:
- Telling jQuery that we plan to use regular expressions.
- Defining a jQuery function (
double_margin()) which will search for every element which hasfloat:left;orfloat:right;applied, and add an inline style ofdisplay:inline;to each - Telling this function to fire when the document loads.
There we have it. A simple way to overcome the double margin bug by assigning display:inline; to all floated elements. It should be noted that this method will only work for users who have JavaScript turned on. For this reason it is probably wise to check your web stats before implementing this on a site.
Posted in Web Design, how to
Leave a comment
WordPress Relative Post Time
This is a small function I wrote this morning to generate relative time stamps for WordPress posts, similar to those used on Twitter. It is pretty simple to implement, and will allow you to display a relative timestamp simply by replacing the <?php post_date(); ?> call with <?php relative_time(); ?> in your theme.
What it does
This function displays one of the following, depending on the time since the post was published:
- “Less than a minute ago”
- “About a minute ago”
- “XX minutes ago”
- “About an hour ago”
- “XX hours ago”
- The date in the format “Day Month Year Time” (12 hour)
Implementation
Simply add the following code to the functions.php file of your theme:
<?php
function relative_time() {
$post_date = get_the_time('U');
$delta = time() - $post_date;
if ( $delta < 60 ) {
echo 'Less than a minute ago';
}
elseif ($delta > 60 && $delta < 120){
echo 'About a minute ago';
}
elseif ($delta > 120 && $delta < (60*60)){
echo strval(round(($delta/60),0)), ' minutes ago';
}
elseif ($delta > (60*60) && $delta < (120*60)){
echo 'About an hour ago';
}
elseif ($delta > (120*60) && $delta < (24*60*60)){
echo strval(round(($delta/3600),0)), ' hours ago';
}
else {
echo the_time('j\<\s\u\p\>S\<\/\s\u\p\> M y g:i a');
}
}
?>
You can now display the relative time of a post by adding the following anywhere within the loop:
<?php relative_time(); ?>
That’s it really, hopefully it will prove useful to somebody!
Font Squirrel @font-face Generator
I have just discovered Font Squirrel’s new @font-face kit generator.
This awesome little web app allows you to upload a .ttf or .otf font file and convert it to .eot (for IE), .svg (for Opera and iPhone) and .woff (for Firefox 3.6+).
It is awesome for a number of reasons:
-
It removes the need to to use Microsoft’s horrible WEFT program to generate .eot fonts.
-
It gives sample CSS and HTML to make it easy to apply nice cross browser compatibility with very little fuss..
Lovely.
Posted in Web Design
1 Comment
Cross Browser @font-face
There has been a lot of talk recently about web fonts and the possibilities opened up to web designers by the @font-face CSS rule. The ability to set web type in fonts other than Georgia, Arial or Verdana will allow designers to be more creative and original with their work.
As always there are some problems to overcome, specifically with cross browser implementation. Internet Explorer has supported embedding fonts in Microsoft’s proprietry ((Although not for long.)) .eot format for years, but does not support the .ttf or .otf formats. Firefox, Safari amd Opera have recently added support for .ttf and .otf format fonts, but do not support .eot. Here is a handy table showing what is supported where.
To get around these limitations, we can simply serve the font file in both .eot format (for IE) and .ttf/.otf format (for Firefox, Safari and Opera 10).
Microsoft provides a Windows only tool called WEFT to convert .ttf files to .eot. It might just be the worst software I have ever used, but the end result is a .eot version of your .ttf font. We can now embed this font in both formats as follows (In this case I am using the freely available font Stalker 2 ((Font licensing for web embedding is a whole other story which I will not get into.)) ):
@font-face { /* For IE */
font-family: Stalker;
src: url(STALKER0.eot);
}
@font-face { /* For Safari, Firefox, Opera */
font-family: Stalker;
src: url(stalker2.ttf) /* This could also be a .otf font */
format("truetype");
}
As long as we specify the .eot font before the .ttf (or .otf) font, Internet explorer will read the .eot file and Safari, Firefox and Opera will read the .ttf file. We can now call the font in the same way we would any other:
h1 {
font-family:Stalker;
}
I have not shown it here, but it is probably best to specify fall back fonts for users on older versions of Firefox, Safari and Opera.
This solution is tested in IE6, IE7, IE8, Safari 4 and Firefox 3.5.
Gallery View 2.0
A project I am working on requires a JavaScript image rotating gallery, so I took a look at the jQuery plugins page to see what was available.
I settled on Gallery View by Jack Anderson. Unfortunately the latest version of this plugin came with no instructions (due to a problem with the author’s web host, I think). After some playing around and asking a few questions on Twitter (thanks @leepowell) I was able to work it out.
I noticed a large number of people commenting on Jack’s site with the same problems I faced, so I decided to put up a simple example page.
Update
The options available in the $(document).ready section have changed slightly from those listed for version 1.x.
Since a few people have asked, I have put together a quick list for reference. This includes all of the new options and excludes older, depreciated options — it can be found here.
Find My iPhone Actually Works
This is a great story about a guy who has his iPhone stolen in a bar and was able to use the new ‘Find My iPhone’ feature of MobileMe to track the thief and get it back.
Postbox
Postbox is a beta Mac/Windows email client which I have been trying out. It is built on Mozilla Thunderbird by one of the original Thunderbird developers and it has a few nifty features which make it worth a look.
If you are a Gmail user you will be familiar with the concept of archiving old mail, Postbox allows you to do this and is integrated with Gmail’s archive function. It also groups inbox messages into conversations, which helps to keep everything organized, and only requires a username and password to get Gmail or Google Apps Mail running.
iPhone 3.0 Tethering Hack for O2 UK
The iPhone 3.0 software was released today, and one thing seemingly missing was tethering – at least for free. The following is a brief tutorial to enable Tethering without adding the monthly plan. Happy days indeed. Note that this only works on a Mac (sorry Windows users).
Obligatory disclaimer: This is most probably against your service agreement. Don’t blame me if you get told off by O2!
So, on with the show:
- Update iTunes to version 8.2 if you don’t have it already.
- Open Terminal.app and enter the following:
defaults write com.apple.iTunes carrier-testing -bool TRUE - Download the file ‘o2_uk.ipcc’ from here.
- Plug your iPhone in and allow it to sync.
- Once the sync is complete, hold down the option (alt) key and click ‘Restore’ in iTunes. A dialogue box will pop up – browse to the o2_uk.ipcc file which was downloaded in step 3.
- iTunes will now update your carrier settings.
- Now with the iPhone still connected to your Mac by USB browse to Settings, General, Network, Internet Tethering and switch it on.
- That’s it! You will need to wait a minute whilst the connection is established, and a dialogue will appear on your Mac telling you that a new network interface has been detected. Click ‘Network Preferences’ and wait until the new connection shows that it is online.
Now when you want to initiate a tethering session, you just need to plug your iPhone in via USB, and turn tethering on in Settings, General, Network, Internet Tethering.
Note that if you are not on O2-UK, you will need a different .ipsw file. There is an AT&T file available here, and I understand that a number of other carriers are supported if you Google for the correct .ipsw file, but I have not tried them out, so I’d recommend a bit of research before going ahead with it.