Archive for the ‘Website’ Category
Three Column Stretchy HTML layout November 2nd, 2012
OK first off, apologies for the delay between posts there. As I’m still working at IE at the moment I’m still not getting to do a lot of work that I can actually stick on this blog and what with the wedding this year and all I haven’t done an awful lot of work in my free time either. With that in mind I’ve decided, instead of adding some new content, I’ll just fill the gap for now with something recycled from CoderSphere. When I originally posted about the CoderSphere project I said I would transfer some stuff over so here goes.
I’ve always struggled to achieve a good stretchy layout – two static width side columns and a stretchy middle – and, until I came to accept JavaScript as an inevitability, it’s something I avoided.
You see the issue for me with this layout was that, due to the absolutely positioned sidebars, it was practically impossible to achieve properly without using some JavaScript to ensure that the heights all matched up and the rest of the page flowed correctly. For CoderSphere I decided the time had come when this was no longer an issue and so I built the HTML, added some emergency ‘no JS’ CSS and then created a little JS snippet to make sure everything worked as it should. All of this I detail below.
So first off – the basic HTML structure:
<div class="container">
<div class="left">Left Column</div>
<div class="middle">Centre Column</div>
<div class="right">Right Column</div>
</div> |
Here we have a container div and then my three stretchy columns. the left and right columns are fixed width, absolutely positioned elements and the central div will stretch to fill the rest of the space, to do this however it needs some CSS:
.container { position:relative; margin:10px; min-width:300px; } .container div { border:1px solid #999999; padding:10px; } .left { position:absolute; left:0; top:0; width:80px; } .middle { margin:0 110px; } .right { position:absolute; right:0; top:0; width:80px; } |
Here’s the result:
It’s hard to see the actual result here as I have a fixed width container around it but try it yourself and you’ll see.
So now everything’s sorted. Simple eh? unfortunately there’s a problem. Because the two side columns are positioned absolutely if the content in either of those happens to be longer than the content in the central column they will overlap anything beneath them in your page layout (for example your page footer, sitemap etc…).
I fixed this in two ways. First I put together some CSS, to be included in the event that JavaScript is disabled on the page, that will do a basic but ugly job of ensuring this isn’t a problem:
.left { max-height:600px; overflow-y:scroll; } .right { max-height:600px; overflow-y:scroll; } .middle { min-height:600px; } |
So this will ensure that the central column is always as tall, or taller, than either of the two side columns. The drawback of this as a sole solution is that you’ll have ugly vertical scrollbars on the two sidebars if their content happens to be greater than 600px high. So, as I mentioned, we only include this if JS is unavailable:
<noscript><link rel="stylesheet" href="nojs.css" /></noscript> |
And then we write some JavaScript to do a much more elegant job of it:
$(document).ready(function() { sizeColumns(); $(window).resize(function(){ sizeColumns(); }); }); function sizeColumns(){ $('.left, .middle, .right').removeAttr('style'); var hArray = [$('.left').outerHeight(), $('.middle').outerHeight(), $('.right').outerHeight()]; var maxHeight = 0; for(var key in hArray){ if(hArray[key] > maxHeight){ maxHeight = hArray[key]; } } $('.central-column').css('height' , (maxHeight + 20) + 'px'); } |
This basically loops through the three divs, checks which one is tallest and then ensures that the central, content column matches the height (and adds a little more for good measure). It also ensures it re-fires on page resize. So now we have our flexible, three column layout with everything flowing into place nicely beneath – as seen on CoderSphere.
Very simple jQuery news ticker July 18th, 2012
Here’s a very simple jQuery news ticker I built for a client web site recently!
- Another jQuery slider (v 2.0) December 17th, 2011
- jQuery popup plugin August 4th, 2011
- jQuery form validation plugin November 15th, 2010
The ticker can be attached to a list element and will take each list item and treat them as separate news items, sliding them in and out, horizontally, one by one.
Not too many options here. You can set it to slide in from the left or right as well as setting the speed at which the slider operates – the slide in, slide out and pause speeds are all changeable.
Feel free to grab the files and use the slider, but if you don’t mind, leave the credits in the JS file in-tact.
CoderSphere June 27th, 2012
www.coderpshere.com
Several months ago myself and Sean McAlinden, a colleague of mine, came up with an idea for a site where web developers and professionals like ourselves could build themselves an online profile. So we built www.coderpshere.com, it started out as a basic blogging tool and the idea was we would keep expanding the functionality until it became, basically, a place for everything. We quickly added code snippet functionality, an image gallery, a wiki and a private favourites repository.
You can see all this in action at the site, however, for now, we have decided to remove the public sign up aspect of the site so it is no longer accessible to any old Tom, Dick and Harry. This is largely due to concerns about whether we had thought through things like scalability and how much time we could afford to spend actually supporting the site properly. So for now it’s just a site where Sean and I can start to build up our own store of code snippets and how to’s. If you can see potential and desperately want to be an early adopter though please drop me an email or comment via this blog and I’ll see what I can do.
As for the tech involved – the site is built with the Razor MVC engine for .net and although I was acting as designer and front ender on this and didn’t get involved with much of the back end nitty gritty it was great to get a bit of experience in it. The front end, of course, is HTML / CSS with the odd bit of JQuery for form styling and validation (it’s also the first time I’ve used AdSense).
I’ll probably be writing a number of blog posts around CoderSphere over the next few months so keep checking for updates. There’s also a couple of posts I’ve written on my CoderSphere blog which I’ll be replicating here fairly soon. Also, if you like, you can follow CoderSphere on Twitter.
Wedpings! February 18th, 2012
www.wedpings.com/siandkasia
Sorry for the gap, and no Christmas post – a terrible state of affairs. Never mind though, here’s something to cheer you up – it’s our wedding page. The first entry on wedpings.com. A little side project for me which I intend to turn into a sort of social network for wedding planning. There’s not much there at the moment, as you’ll see if you visit the home page, but the intention is to start adding features soon. User accounts, wedding list organisation and RSVPs, photo galleries, venue information and maps – that sort of thing. To be honest I haven’t really spec’d it out yet but hopefully i’ll get round to it eventually. Drop me an email if you’d be interested in using such a service 
.
For now our page is just a bit of HTML and jQuery with a simple RSVP form – it just sends us an email with a yes or no. Nothing fancy but I was quite pleased with the design. Hopefully in a few months there’ll be a new Wedpings post announcing a proper site. We’ll see.
To the happy couple!
Website Roundup February 18th, 2011
www.asteral.com | www.london-bathrooms.co.uk
Not much to report this month i’m afraid, it’s far too early in the year for anything exciting. Plus our central heatings been on the blink since before Christmas and I find it hard to motivate myself when i’m freezing cold. Work wise i’m not doing anything postable sadly due to the nature of the new job – although I’m currently working on my first mobile web app so hopefully i’ll be able to put up a link to that at some point.
Anyway – with that in mind i’m posting a couple of sites i’ve worked on that have gone live recently. The first one is the Asteral web site which i completed just before I left The Crocodile and which, for some reason, has only recently gone live.
The Asteral site is built in Expression Engine and incorporates 3 levels of navigation, which was quite tricky to acheive. It also utilises the indispensible Freeform plugin to incorporate a contact form and newsletter sign-up.
The second site is a smaller site I designed and built for a London based Bathroom company (called, fittingly, London bathrooms). I also created the London Bathrooms logo, which featured in a recent post.
This is a fairly standard small site with information about the company, some work samples and testimonials and a contact form. Which you should definately use if you need a Bathroom fitted in London (or the surrounding area).
Since spring is already in the air I’m hoping the next post will be a total break from the norm and be about the landscaping of my garden which I started last year and which ground to a halt over winter. Not just a one trick pony!
Anyway, it’s been a pleasure as always.
