Fixed Content using CSS/ Dynamic Expressions
CSS lets you position content on your page in a variety of ways,
one of which is "fixed". In this mode a piece of content remains completely
static without so much as a flinch when the rest of the page is scrolled. One of
my predictions for the year 2007 is the eruption of this effect on the web as
the majority of visitor browsers support it natively using CSS.
In the following tutorial, I'll discuss how to use "fixed"
positioning in CSS, plus how to simulate the behaviour in IE5/6 using Dynamic Expressions, which does not support the
direct CSS approach. Shall be begin?
Fixed Content using CSS
There' really only one authentic way of creating fixed content
that doesn't scroll on the page, and that's through CSS "fixed" positioning.
Like "absolute" positioning, "fixed" places a piece of content outside the
normal flow of the document using an explicit x (horizontal) and y (vertical)
coordinate system. However, with "fixed", its coordinate system is relative to
the viewpoint of the browser, so "5px" vertically for example means "5px" down
from the upper left corner of the viewable window, regardless of whether the
page is scrolled or not.
<style type="text/css">
#mydiv{ position: fixed; left: 10px; top: 50px; } </style> <div id="mydiv"> Some content here </div>
Remember, in fixed positioning, the left and top values are
relative to the upper left corner of the window viewpoint, which automatically
changes as the page is scrolled. This creates the static effect.
Fixed Content in IE (5 & 6) via Dynamic Expressions
We can always count on IE to make things more 'interesting" for
web developers. In IE6 and below, CSS "fixed" positioning isn't supported
(note that IE7 does). In order to realistically implement fixed content,
we need a no-fuss way to simulate the effect in IE6 (and perhaps IE5). Dynamic expressions, a IE proprietary feature, fits
the bill:
<style type="text/css">
#mydiv{ position: fixed; left: 10px; top: 50px; } * html #mydiv{ /*IE6 only rule, applied on top of the default above*/ position: absolute; top: expression(document.compatMode=="CSS1Compat"? document.documentElement.scrollTop+50+"px" : body.scrollTop+50+"px"); } </style> <div id="mydiv"> Some content here </div>
Take a look at the highlighted CSS rule. It's targeted exclusively
towards IE5 and 6 by way of the Star (*) html hack, and is what will help us
simulate fixed positioning in legacy IE5/6 browsers. First, I override the
default "position: fixed" declaration with something IE understands, "position:
absolute". Then, by using dynamic expressions, I get its "top" attribute to
automatically update itself so it's always "50px" below the upper left viewpoint
of the browser window:
top:
expression(document.compatMode=="CSS1Compat"? document.documentElement.scrollTop+50+"px" : body.scrollTop+50+"px");
Now, even if you're familiar with IE's dynamic expressions in
general, the above line may still look somewhat confusing- why the conditional
operator inside it and two different value settings accordingly? Well, depending
on whether your page contains a valid doctype declaration at the very top or
not, the syntax to referencing certain measurement properties of the body in IE,
such as the "scrollTop" property, differs slightly. The above dynamic expression
takes into account both possibilities. Note that I've left out setting the
"left" property as a dynamic expression as well in IE, making a leap of faith
that the page doesn't contain any horizontal scrollbars to warrant this property
being dynamic. However, if you wanted to declare it, it would look something
like:
left:
expression(document.compatMode=="CSS1Compat"? document.documentElement.scrollLeft+10+"px" : body.scrollLeft+10+"px");
In any event, the end result is a DIV that stays static on the
page in all the major browsers, albeit with some hesitance in IE5/6 in that the
effect isn't 100% smooth due to it being simulated programmically. But it's an
acceptable compromise, and helps overcome the main mental hurdle to using
"position: fixed" on our pages!
|
Monday, November 7, 2011
IE position fix
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment