Friday, 4 April 2008

Annoying javascript/css

Well, after finishing my php book I decided I should get some practice and put what I (should of) learnt into practice. So I started work on a new version of my pog website where the menu is produced from the site directory structure and the site only has on page, with the content decided by $_GETting info from the URL string.

I managed to write the menu in PHP okay, and so started work on the lightbox (java)script to display the 300dpi images. Then I spent about 3 days trying to work out how to get the transparent background (to 'dim' the rest of the page) to cover the whole of the page. Unfortunately different browsers give different info for the same property, and there are quite a few properties to do with page/window size that you can query. A couple of hours ago I added the following to the script and then had to run it in each browser quite a few times to try and get the info I needed:
alert('window.innerHeight' + window.innerHeight + '\n'
+ 'document.body.clientHeight' + document.body.clientHeight + '\n'
+ 'document.documentElement.clientHeight' + document.documentElement.clientHeight + '\n'
+ 'window.scrollMaxY' + window.scrollMaxY + '\n'
+ 'document.body.scrollHeight' + document.body.scrollHeight + '\n'
+ 'document.body.offsetHeight' + document.body.offsetHeight + '\n'
+ 'document.documentElement.offsetHeight' + document.documentElement.offsetHeight);
Obviously I also did lots of searching on the pinternet about this issue, and it seems that I was getting different values returned by properties in some browsers than functions posted on the internet would lead you to think (e.g. getting window size rather document size).

Eventually I got the script working in all but IE6, then I found that by just putting
html, body{
height: 100%;
}
in the css and then setting the transparent background element to 100% height and width it would work in all browsers (well at least it does at the moment, hopefully will still work tomorow!) Wish I had known about that before, would have saved me 3 days of trouble.

Food
Breakfast: Frosties; cup o' tea.
Lunch: ½ beetroot sarnie; ½ cheese with iceberg lettuce sandwich; banana; normal rocky; cup o' tea.
Dinner: Chilli con carne; rice; flavoured tortilla chips; grated cheese. Pudding was banana split. Coffee. Chocolate truffle mix.

No comments: