 Keeping an element static on the page
Since DSOC always returns the VISIBLE upper-left coordinates
of the document as seen in the browser window, it allows us to position an
element in a way so it's always visible to the user. And since we can also
determine the exact dimensions of the browser window, we can display this
static element at any one of the four corners of the window, or anywhere
else inside the window, for that matter.
The three steps to rendering an element static are:
1) Define an absolutely positioned <div> or
<span>.
2) Use DSOC and the Window Dimension Properties to
reposition the element so it's visible on the screen
3) Call step 2 above repeatedly (using either SetInterval()
or setTimeout()) inside script to make the element always visible
The static content you see on the upper-left corner of this
page is created by following the above procedures. Here is the source:
<div id="staticcontent"
style="position:absolute; border:1px solid black; background-color:
lightyellow; width: 135px;">
This content stays afloat and always in view, even if you scroll the page.
</div>
<script type="text/javascript">
//define universal reference to "staticcontent"
var crossobj=document.all? document.all.staticcontent :
document.getElementById("staticcontent")
//define reference to the body object in IE
var iebody=(document.compatMode && document.compatMode != "BackCompat")?
document.documentElement : document.body
function positionit(){
//define universal dsoc left point
var dsocleft=document.all? iebody.scrollLeft : pageXOffset
//define universal dsoc top point
var dsoctop=document.all? iebody.scrollTop : pageYOffset
//if the user is using IE 4+ or Firefox/ NS6+
if (document.all||document.getElementById){
crossobj.style.left=parseInt(dsocleft)+5+"px"
crossobj.style.top=dsoctop+5+"px"
}
}
setInterval("positionit()",100)
</script>
Let's quickly run down the important points:
We define an absolutely positioned <div>, and assign
to it an "id" attribute (for reference in your script). The content to be
statically displayed is placed inside this <div>
In function positionit(),
we use parseInt() on all the
DSOC and Window Dimension properties of IE 4+/Firefox.
To position the <div> at the upper left edge of the
browser, we assign the X coordinate of the DSOC plus 10 pixels for some
padding to "style.left" of the DIV object. Similar concept for
"style.top."
setInterval()
is used to call
positionit() repeatedly, and
thus keeping the <div> visible constantly.
There's a much easier way to staticaly position content on
the page, and that is using CSS. The catch is that as of IE6, this isn't
supported, though Firefox does.
|
