02/04/2007 
8 Comment(s)A New Design Cometh
Dated: 2nd April 2007
I'm once again about to begin a redesign of my website. This is perhaps going to be the most technically challenging site to date, from a CSS and scripting perspective. This is party because I've decided rewrite the PHP engine again from scratch rather than simply recycling and modding the old one, and also because I intend to take the layout and navigation system in a completely different direction.
However I'm going to be delving into uncharted territory in a couple of areas, and whilst I may well have to do my homework to achieve the result I'm after I thought I'd first open it up here to see if any of you fine folk could help me or provide any input.
First-off, vertical sizing of elements to 100% of the browser window height. At one time I knew how to do it in theory from reading, but to be honest I've never done it in practice and as a result, have since forgotten. Is plain-ol' CSS all that's required or is JavaScript necessary too?
Secondly, JavaScript colour transition effects; anyone have any tips or links for writing a script that would, over a given time period, gradually change a colour from a to b? I'm aware I could simply use a JavaScript library, but I've never been a fan of libraries and rarely use them in my work. Home grown is always better in my opinion :)
On a side note I've finally finished my work for .net magazine, and another project, so I'll no doubt have more time on my hands than I've had this first few months since Christmas. Brilliant.
Cheers all
Update 06/04/2007
Thanks ever-so-much to everyone who's left me feedback both here and via email - it's really been great, cheers :)
Post a Comment
Please feel free to leave a comment. If you do leave your email, it will not be made public on the site. HTML is not allowed other than to transcript code. Please don't leave anything offensive or derogatory; nobody likes an arsehole.
Return to Top
Comments
Comments: 8
Spam Blocked: 28318
On Tuesday 03rd of April 2007 Andrew said:
I have always worked round full height objects, either by fixing the body background or by using absolute positioning.
As for the colour fade the only suggestion I can give is to use RGB in the style instead of hex so it is easier to do the maths with.
On Tuesday 03rd of April 2007 Richard Kimber said:
I agree, home grown is best, though libraries are a great reference source.
In the past, I have used JavaScript to aid vertical resizing to 100%. I'm sure it's not the best way to tackle the problem, but it was the only reliable option I could come up with. The project was intranet based so I didn't have to worry about people with script turned off. I attached events to onload and window.resize that calculated the height of the area I wanted the element to fill. I would like to know of a CSS based alternative.
In order to transition from one colour to another, I created a time delayed loop that adjusted the RGB values.
As I say, I don’t expect either to be technically inspiring. However, I can provide code for both if you’re interested.
On Tuesday 03rd of April 2007 Steve Tucker said:
@Andrew: I'd considered a fixed BODY height, but these practices can often lead to side effects, particularly in our good friend IE6. Regarding the colour system I had planned on using RGB, as opposed to hex - just need to figure out how!
@Richard: Cheers, Richard. As it happens I should only require the 100% vertical height if JavaScript is active, so I really don't too much mind if JS is necessary. Anything you could send me would be gratefully appreciated, thanks!
On Wednesday 04th of April 2007 P.J. Onori said:
I honestly do not know how you do it. Seriously, where do you find the time?
Good luck with the redesign - I can't wait to see it.
On Wednesday 04th of April 2007 Andrew said:
I used this fairly recently for body height, might help:
if (window.attachEvent) {
window.attachEvent("onresize",function(){ //IE
var $hght=document.documentElement.clientHeight;
document.getElementById("element").style.height=$hght+"px";
});
} else {
window.addEventListener("resize", function() {
var $hght=document.documentElement.clientHeight;
document.getElementById("element").style.height=$hght+"px";
}, false);
}
On Wednesday 04th of April 2007 Steve Tucker said:
@PJ: Most of the time it's at the expense of something else... like eating and sleeping ;)
@Andrew: Much appreciated - I'll give that a whirl!
On Wednesday 04th of April 2007 greg said:
I think it could be worth having a think about the purpose of your redesign. I've recently redesigned my own site with Cameron Moll's 'realign' idea in mind, and it turned out pretty well.
As for the vertical issue can you keep us updated with any solutions that you may use?
On Wednesday 04th of April 2007 Steve Tucker said:
I like your site's new design greg, though unfortunately I hadn't seen the original. Little touches, like the 'home' button icon, rather than simple text are real nice.
The purpose of redesigning this site is that I'm never quite happy with the existing one, plus I keep getting those damn idea bubbles popping up. This site's more of a testing ground where I try new things out and experiment - it's already in its 11th incarnation. The main two other versions are:
version6.stevetucker.co.uk, and
version10.stevetucker.co.uk
And sure, I'll post my findings about 100% heights here :)