I am Ad Taylor
2009 July
-
Detecting old versions of Firefox for progressive enhancement
Posted on : Friday, 31 July, 2009
Today I have been redesigning my CV (as you do) as I wanted it to be hosted/printed/enjoyed from my site and not as a PDF. Whilst designing it I saw a post by Jonathan Snook on CSS text rotation, this is really exciting as Jonathan also shows you how to use a filter to make it work in IE — exciting stuff.
I decided to use it on my CV, but whilst designing I noticed it wasn’t working in Firefox older than 3.5. This sucked. So I set about BROWSER SNIFFING. I didn’t take this decision lightly but I figured it is no different to
[if IE]and the only difference to the code would be removing a class.jQuery to the rescue
To make long story short, I used the version function in jquery. Comments are in the code:
if($.browser.firefox || $.browser.mozilla) { var ver = $.browser.version; // Take out al the full stops so we can use it // as an integer ver = ver.replace(/\./g,""); // As the version numbers differ in length // we force all numbers to be the same length. // This is ok as we are only interested in the // first couple of digits var verl = ver.length; while (verl < 7) {ver = ver + '0'; verl = ver.length;} ver = parseInt(ver); // Check to see if the browser is older that 3.5 if(ver <= "1910000") {$("h3").removeClass('rotate');} } -
A fixed position sidebar with scrollable content – all centred!!
Posted on : Thursday, 23 July, 2009
Today I got the chance to redesign a site I made for a client sometime ago. I have been having the same problem with it I had back then. The sites aims are to be simple and minimal BUT to have all content broken into individual pages/sections. This lead to some small pages and it looked odd. (Though I thoroughly agree with small and simple approach)
SO
I decided I would make a single page site with all content separated down the page but joined together with some pretty graphics and smooth JavaScript. I hit a problem.I wanted the navigation to be fixed and on a 960px centred grid, with the navigation sat on the side on the content. I have to admit this got me stumped for a bit, but I figured out this way.
WARNING: This could be a crappy method.
Assuming we have 3 DIVs – #wrap,#content and #sidebar the css would be as follows.#wrap { position: relative; width: 960px; margin : 0px auto; } #sidebar { position : fixed; top : 0px; left : 50%; width : 960px; padding-left : 235px; } #content { width : 700px; }A brief explaination.
The example all works off the assumption that the #content width is 700px and that we would want a 15px gutter between the elements. So as we are using a percentage to centre the DIV we know where the DIV will be — bang in the middle — and we need to work out how far to push it out. This is done by the simple calculation:
(700-(960/2))+15 = 235px
Yeah, I know, stupidly obviously simple. Just it had me hanging around for ages trying to solve. Just thought it could help someone else.
-
A Perch Textmate bundle
Posted on : Monday, 13 July, 2009
I thought I would host this up for anyone who is using Perch and Textmate, its not much but it could save someone else the arduous task of making it themselves.
You can download it from here (probably right click ’save as’).
The bundle doesn’t do much more than speed up your workflow on Perch sites, its usage is pretty easy:
- perchc+tab =
perch_content('Content'); - percht+tab = inserts type:text
- perchta+tab = inserts type:textarea
- perchd+tab = inserts type:date
- perchi+tab = inserts type:image
- perchf+tab = inserts type:file
Keep it simple stupid.
- perchc+tab =
-
Beautiful site-maps from an unordered list
Posted on : Thursday, 9 July, 2009
So, everyday it usually takes me close to an hour to wade through my RSS feeds and to be honest it can seem a bit of a chore. But today I remembered why I did it; There are some bloody clever people out there just waiting to share beautiful ideas with anyone who will listen.
Matt Everson of Astuteo is one of these people. He has created a CSS file (and accompanying images) that style a unordered list into a great looking, easy to use and easy to maintain sitemap. I just ran it through its paces and it seems fairy bug free (though will take some knocking into shape for IE6) and I can’t wait to use it.
Thanks Matt!
by tag
by date
| 2010 | Feb ( 1 ) |
|---|---|
| Jan ( 1 ) | |
| 2009 | Sep ( 2 ) |
| Aug ( 1 ) | |
| Jul ( 4 ) | |
| Jun ( 5 ) |
Social Hub