On 11 June 2011 21:47, Mark Rogers mark@quarella.co.uk wrote:
My latest experimental version is here: http://www.more-solutions.co.uk/alug.html - I'd appreciate comments about the approach I'm taking (aside from the issue of IE6/7 for now). Basically it's for what will become a web application so controlling the layout makes sense, and the right hand "content" pane will likely be loaded using AJAX and it makes sense that it should scroll independently from the (tree) menu on the left which could get quite long if all nodes are opened. I'm a long way from being a CSS expert and I'd really like to try and learn how to do this "correctly" as far as I can.
If you're looking at AJAX, I'd suggest investing some time looking at a JavaScript framework. I'd suggest jQuery, others are available. If nothing else, it simplifies some of the cross-browser problems you're going to encounter - for example, you're getting the height of the window, that could be done with jQuery using something like $(window).height() will give the height (http://api.jquery.com/height/). But it will really pay dividends if you're going to use AJAX.
For comparison, the jQuery equivalent of your function would be something like (remembering to include the jQuery library at the top) ...
function autoHeight() { var h = $(window).height() - $("#header").outerHeight(true) - $("#footer").outerHeight(true); $("#menu").height(h); $("#content").height(h); } $(document).ready(function(){ autoHeight(); } ); $(window).resize(function(){ autoHeight(); } );
Also, your "test" link adds a scroll bar that allows me to scroll up and down one pixel (FF 3.6.17); That's because the link remains selected which adds to the height (until you click elsewhere to unselect it). I'd suggest adding this.blur() before calling autoHeight on the link to prevent that and confusing you (it did me for a while, anyway).
Greg