Thursday, January 31, 2013

Fixed header for a html page

I was recently working with an application in which users requested for a fixed header that would not move  with the web page as its users scroll left or right.

I went through a bunch of options  to do it and every attempt I have made in the past with similar requests were kind of close and I had to include the usage of either quick javascrit functions that runs with a specified interval or I had to use the tag named "<!doctype>" and end up screwing my happiness with thanks to the different versions of the beautiful internet explorer.

I dont remember where I got the following stuff, but I really though that using "expression" with css is a no brainer. I also remember words from certain geeks advicing not to rely on them.

May be I dont understand the geeks yet, cos this 'expression' stuff with css seems to be good. Following is what I am taking about

<div style="left: 0px; left: expression(eval(document.body.scrollLeft)); position: fixed; top: 0px; top: expression(eval(document.body.scrollTop));">
My header contents </div>

I never knew that I had to use expression with eval of something. kriss... Thats some trick that I got to know better and remember. After all it makes life easier. Plus, this still has a few issues with the great internet explorer.Advanced users will eventually never use IE so better find a different browser to always work with.

On top of it, this code, I mean the usage of Expression keyword with Eval keyword is a trouble that you have to go through for IE alone. Because, "position:fixed" alone would do the work in Firefox and Chrome.

No comments:

Post a Comment